TypeScript: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
|||
(19 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
'' | {| | ||
< | | 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 | ||
</ | </source> | ||
==person.ts== | |||
< | <source lang="ts"> | ||
namespace People { | namespace People { | ||
export class Person { | export class Person { | ||
Line 15: | Line 67: | ||
} | } | ||
} | } | ||
</ | </source> | ||
==nation.ts== | |||
< | <source lang="ts"> | ||
namespace People { | namespace People { | ||
export class Nation { | export class Nation { | ||
Line 30: | Line 82: | ||
} | } | ||
} | } | ||
</ | </source> | ||
==app.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); | ||
</ | </source> | ||
==tsconfig.json== | |||
< | <source lang="json"> | ||
{ | { | ||
"compilerOptions": { | |||
"noImplicitAny": true, | |||
"removeComments": true, | |||
"preserveConstEnums": true, | |||
"outFile": "dist/app.js", | |||
"target": "es5" | |||
}, | |||
"include": [ | |||
"src/**/*.ts" | |||
], | |||
"exclude": [ | |||
"node_modules", | |||
"**/*.spec.ts" | |||
] | |||
} | } | ||
</ | </source> | ||
==gulpfile.js== | |||
<source lang="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']); | ||
< | </source> | ||
==package.json== | |||
<source lang="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" | |||
} | |||
} | } | ||
</ | </source> | ||
'''Build''' | '''Build''' | ||
< | <source lang="bash"> | ||
npm install | npm install | ||
npm start | npm start | ||
</ | </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://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] | |||
| 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?] | |||
* [[Express]] | |||
* [[NPM]] | |||
|} |
Latest revision as of 07: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