TypeScript所做的，是在JavaScript的基础上到场了范例，TypeScript编译器将TypeScript编译成JavaScript，能够在浏览器或许nodejs平台上运转。最新版本的TypeScript语法根ES6范例已非常靠近，而且由于是JS的超集，TS代码中混合一般JS代码也是能够的。所以，假如你也斟酌开始运用Bable＋ES6，无妨也看一下TypeScript。
TypeScript项目和tsconfig.json
起首装置TypeScript编译器
npm i -g typescript
进入项目目次，新建一个hello.ts
function sayHello(name: string) {
return 'Hello, ' + name;
}
let myName = 'Cheng Wang';
console.log(sayHello(myName));
然后实行
tsc hello.ts
编译器会天生 hello.js
function sayHello(name) {
return 'Hello, ' + name;
}
var myName = 'Cheng Wang';
console.log(sayHello(myName));
为了轻易编译器和编辑器辨认TypeScript项目，TypeScript商定了tsconfig.json文件来存储项目设置，假如运转tsc时不指定输入文件，编译器则会查找项目目次中的这个文件，假如找不到则会顺次向父级目次查找。比方如许：
{
"compilerOptions": {
"outFile": "dist/app.js",
"sourceMap": true
},
"files": [
"src/app.ts"
]
}
直接运转tsc，会自动把src/app.ts编译到dist/app.js。
关于这个设置文件的更多选项，能够看官方文档。
运用模块
TypeScript中，模块的运用方法与ES6一致。
src/modules/utilities.ts：
function getUrlParam(key: string) {
const REG_PATTERN = new RegExp('(^|&)' + key + '=([^&]*)(&|$)', 'i');
let result: string[] = location.search.substr(1).match(REG_PATTERN);
if (result !== null) {
return decodeURIComponent(result[2]);
} else {
return null;
}
}
export { getUrlParam }
src/app.ts：
import { getUrlParam } from './modules/utilities';
let deviceType: string = getUrlParam('deviceType');
console.log(deviceType);
编译后的app.js（TypeScript编译器在输出单个文件时，只能运用AMD或System模块范例）：
define("modules/utilities", ["require", "exports"], function (require, exports) {
"use strict";
function getUrlParam(key) {
var REG_PATTERN = new RegExp('(^|&)' + key + '=([^&]*)(&|$)', 'i');
var result = location.search.substr(1).match(REG_PATTERN);
if (result !== null) {
return decodeURIComponent(result[2]);
}
else {
return null;
}
}
exports.getUrlParam = getUrlParam;
});
define("app", ["require", "exports", "modules/utilities"], function (require, exports, utilities_1) {
"use strict";
var deviceType = utilities_1.getUrlParam('deviceType');
console.log(deviceType);
});
运用NPM库
我们开辟JS顺序的时刻，要用到NPM上的第三方的库，比方jQuery、Lodash等，然则绝大多数库都是用JS写的，没有范例提醒，我们也不能在在代码中将这些库作为模块引入。
比方我们须要在项目中运用Lodash：
npm i --save lodash
然后在代码中引入：
import * as _ from 'lodash';
console.log(_.camelCase('helloworld'))
运转 tsc 则报错：
src/app.ts(1,20): error TS2307: Cannot find module 'lodash'.
假如想在TypeScript代码中直接运用npm上的JS库，须要借助Typings这个东西。
Typings也是一个包治理器，它治理的是JS代码“定义文件”，用Typings装置响应的定义文件后，编辑器和编译器就能够去node_modules目次中找到响应的JS库，并编译到终究的JS代码中。
先装置Typings东西：
npm i -g typings
然后装置Lodash的定义文件：
typings install --save lodash
Typings会去NPM、Bower上寻觅库的作者加的定义文件，然则有的库如jQuery并没有官方的定义文件，则须要从社区保护的DefinitelyTyped目次下装置：
typings install --save --ambient jquery
然后再tsconfig.json中的files设置中到场一条：
"files": [
"src/app.ts"，
"typings/main.d.ts"
]
此时编译就不会提醒找不到模块了。
装置好定义文件以后，假如运用Visual Studio Code等对TypeScript支撑较好的编辑器，则会供应越发壮大的代码提醒功用。
运用Webpack构建
TypeScript编译器支撑许多模块构造范例，如ES6、commonJS、AMD等，然则假如想要将多个ts文件打包成一个文件，TypeScript只支撑AMD和System，关于浏览器运用来讲，还须要引入第三方的模块加载器。假如运用Webpack合营TypeScript的loader，则能够轻易地构建浏览器能够运转的JS代码。
起首装置Webpack和ts-loader：
npm i webpack -g
npm i ts-loader --save-dev
然后设置项目目次中的webpack.config.js:
module.exports = {
entry: './src/app.ts',
output: {
filename: 'app.js',
path: './dist'
},
resolve: {
extensions: ['', '.webpack.js', '.web.js', '.ts', '.js']
},
module: {
loaders: [
{ test: /\.ts$/, loader: 'ts-loader' }
]
}
}
然后就能够经由过程运转webpack来构建了，构建天生的代码自带了webpack的模块加载器，能够直接在浏览器中运转。
