TypeScript: Difference between revisions

From Chorke Wiki
Jump to navigation Jump to search
 
(14 intermediate revisions by the same user not shown)
Line 1: Line 1:
'''.gitignore'''
{|
<syntaxhighlight lang="ini">
| valign="top" |
npm install typescript --save-dev
mkdir src dist
npx tsc --init
vim tsconfig.json
vim /src/index.ts
npx tsc index.ts
npx tsc -w
npm install tslint --save-dev
npx eslint --init
npm fund
npx gts init
 
<source lang="bash">
{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "strict": true,
        "outDir": "dist",
        "sourceMap": true
    }
}
</source>
 
| valign="top" |
npm i typescript -D
mkdir src dist
npx tsc --init
vim tsconfig.json
vim /src/index.ts
npx tsc index.ts
npx tsc -w
npm i tslint -D
npx eslint --init
npm fund
npx gts init
 
<source lang="ts">
const world = 'world';
 
 
 
 
 
export function hello(word: string = world): string {
  return `Hello ${world}! `;
}
</source>
|}
 
==.gitignore==
<source lang="ini">
dist
dist
node_modules
node_modules
npm-debug.log
npm-debug.log
</syntaxhighlight>
</source>


'''person.ts'''
==person.ts==
<syntaxhighlight lang="ts">
<source lang="ts">
namespace People {
namespace People {
     export class Person {
     export class Person {
Line 15: Line 67:
     }
     }
}
}
</syntaxhighlight>
</source>


'''nation.ts'''
==nation.ts==
<syntaxhighlight lang="ts">
<source lang="ts">
namespace People {
namespace People {
     export class Nation {
     export class Nation {
Line 30: Line 82:
     }
     }
}
}
</syntaxhighlight>
</source>


'''app.ts'''
==app.ts==
<syntaxhighlight lang="ts">
<source lang="ts">
/// <reference path="person.ts" />
/// <reference path="person.ts" />
/// <reference path="nation.ts" />
/// <reference path="nation.ts" />
Line 42: Line 94:
nation.add(new Person('John', 'Lennon'));
nation.add(new Person('John', 'Lennon'));
console.log(nation.count);
console.log(nation.count);
</syntaxhighlight>
</source>


'''tsconfig.json'''
==tsconfig.json==
<syntaxhighlight lang="json">
<source lang="json">
{
{
  "compilerOptions":{
    "compilerOptions": {
      "target":"es5",
        "noImplicitAny": true,
      "outFile":"dist/app.js"
        "removeComments": true,
  },
        "preserveConstEnums": true,
  "files":[
        "outFile": "dist/app.js",
      "app.ts"
        "target": "es5"
  ]
    },
    "include": [
        "src/**/*.ts"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ]
}
}
</syntaxhighlight>
</source>


'''gulpfile.js'''
==gulpfile.js==
<syntaxhighlight lang="js">
<source lang="js">
var uglify = require('gulp-uglify');
var uglify = require('gulp-uglify');
var gulp = require('gulp');
var gulp = require('gulp');
Line 74: Line 133:


gulp.task('default', ['compress']);
gulp.task('default', ['compress']);
</syntaxhighlight>
</source>


'''package.json'''
==package.json==
<syntaxhighlight lang="json">
<source lang="json">
{
{
   "scripts": {
   "scripts": {
Line 91: Line 150:
   }
   }
}
}
</syntaxhighlight>
</source>


'''Build'''
'''Build'''
<syntaxhighlight lang="bash">
<source lang="bash">
npm install
npm install
npm start
npm start
</syntaxhighlight>
</source>


== References ==
== References ==
{|
| valign="top" |
* [https://developers.google.com/web/updates/2017/06/headless-karma-mocha-chai Automated testing with Headless Chrome]
* [http://kangax.github.io/compat-table/es5/ Compatibility Tables for ES5]
* [http://kangax.github.io/compat-table/es5/ Compatibility Tables for ES5]
* [http://kangax.github.io/compat-table/es6/ Compatibility Tables for ES6]
* [http://kangax.github.io/compat-table/es6/ Compatibility Tables for ES6]
* [https://semaphoreci.com/community/tutorials/getting-started-with-gulp-js Getting Started with Gulp.js]
* [https://semaphoreci.com/community/tutorials/getting-started-with-gulp-js Getting Started with Gulp.js]
* [https://rawgit.com/fabioparra/TypeScriptExtJSEmitter/master/TypeScriptExtJSEmitter/index.html TypeScript ExtJS Emitter]
* [https://rawgit.com/fabioparra/TypeScriptExtJSEmitter/master/TypeScriptExtJSEmitter/index.html TypeScript ExtJS Emitter]
* [https://www.typescriptlang.org/docs/handbook/tsconfig-json.html TypeScript Config JSON]
* [https://gist.github.com/ducin/20c30803fcd28fd3fec38fcc6c05bd8a Beginning of TypeScript]
* [https://gist.github.com/ducin/20c30803fcd28fd3fec38fcc6c05bd8a Beginning of TypeScript]
* [[TypeScript Unit Testing]]
* [https://developers.google.com/web/updates/2017/06/headless-karma-mocha-chai Karma Mocha Chai]
* [https://www.npmjs.com/package/karma-typescript Karma TypeScript]
* [https://www.npmjs.com/package/karma-typescript Karma TypeScript]
| valign="top" |
* [https://github.com/monounity/karma-typescript/tree/master/examples/typescript-1.6.2 Karma Example]
* [https://www.npmjs.com/package/gulp What is gulp?]
* [https://www.npmjs.com/package/gulp What is gulp?]
* [[Express]]
* [[NPM]]
|}

Latest revision as of 08:39, 14 March 2021

npm install typescript --save-dev
mkdir src dist
npx tsc --init
vim tsconfig.json
vim /src/index.ts
npx tsc index.ts
npx tsc -w
npm install tslint --save-dev
npx eslint --init
npm fund
npx gts init
{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "strict": true,
        "outDir": "dist",
        "sourceMap": true
    }
}
npm i typescript -D
mkdir src dist
npx tsc --init
vim tsconfig.json
vim /src/index.ts
npx tsc index.ts
npx tsc -w
npm i tslint -D
npx eslint --init
npm fund
npx gts init
const world = 'world';





export function hello(word: string = world): string {
  return `Hello ${world}! `;
}

.gitignore

dist
node_modules
npm-debug.log

person.ts

namespace People {
    export class Person {
        constructor(private firstName: string, private lastName: string){
            //TODO
        }
    }
}

nation.ts

namespace People {
    export class Nation {
        private population: Person[] = [];
        add(person: Person): void {
            this.population.push(person);
        }
        get count(): number {
            return this.population.length;
        }
    }
}

app.ts

/// <reference path="person.ts" />
/// <reference path="nation.ts" />
import Person = People.Person;
import Nation = People.Nation;

const nation: Nation = new Nation();
nation.add(new Person('John', 'Lennon'));
console.log(nation.count);

tsconfig.json

{
    "compilerOptions": {
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "outFile": "dist/app.js",
        "target": "es5"
    },
    "include": [
        "src/**/*.ts"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ]
}

gulpfile.js

var uglify = require('gulp-uglify');
var gulp = require('gulp');
var pump = require('pump');
 
gulp.task('compress', function (cb) {
  pump([
        gulp.src('dist/app.js'),
        uglify(),
        gulp.dest('dist/minify')
    ],
    cb
  );
});

gulp.task('default', ['compress']);

package.json

{
   "scripts": {
      "gulp": "./node_modules/.bin/gulp",
      "compile": "./node_modules/.bin/tsc",
      "start": "npm run compile && node dist/app.js && npm run gulp"
   },
   "devDependencies": {
      "typescript": "^2.0.9",
      "gulp-uglify": "^3.0.0",
      "gulp": "^3.9.1",
      "pump": "^3.0.0"
   }
}

Build

npm install
npm start

References