TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6 的支持，它由 Microsoft 开发，代码开源于 GitHub 上。
它的第一个版本发布于 2012 年 10 月，经历了多次更新后，现在已成为前端社区中不可忽视的力量，不仅在 Microsoft 内部得到广泛运用，而且 Google 的 Angular2 也使用了 TypeScript 作为开发语言。
它除了支持最新的 JavaScript 语言特性之外，还增加了非常有用的编译时类型检查特性，而代码又最终会编译成 JavaScript 来执行，非常适合原本使用 JavaScript 来开发的大型项目。
安装 TypeScript
TypeScript 的命令行工具安装方法如下：
npm install -g typescript
以上命令会在全局环境下安装 tsc 命令，安装完成之后，我们就可以在任何地方执行 tsc 命令了。
编译一个 TypeScript 文件很简单：
tsc hello.ts
我们约定使用 TypeScript 编写的文件以 .ts 为后缀。
编辑器
TypeScript 最大的优势之一便是增强了编辑器和 IDE 的功能，包括代码补全、接口提示、跳转到定义、重构等。主流的编辑器都支持 TypeScript，这里我推荐使用 Visual Studio Code。它是一款开源，跨终端的轻量级编辑器，内置了 TypeScript 支持。另外它本身也是用 TypeScript 编写的。
结合微软开发的开源代码编辑器 Visual Studio Code，使用 TypeScript 开发项目具有以下优点：
- 可以使用最新的 ES2017 语言特性
- 非常精准的代码提示
- 编辑代码时具有即时错误检查功能，可以避免诸如输错函数名这种明显的错误
- 非常精准的代码重构功能
- 非常方便的断点调试功能
- 编辑器集成调试功能
下载安装：https://code.visualstudio.com/
TypeScript 只会进行静态检查，如果发现有错误，编译的时候就会报错。TypeScript 编译的时候即使报错了，还是会生成编译结果，我们仍然可以使用这个编译之后的文件。如果要在报错的时候终止 js 文件的生成，可以在 tsconfig.json 中配置 noEmitOnError 即可。
TypeScript 中，使用 : 指定变量的类型，: 的前后有没有空格都可以。
原始数据类型
- boolean为布尔值类型，如let isDone: boolean = false
- number为数值类型，如let decimal: number = 6;
- string为字符串类型，如let color: string = 'blue'
- 数组类型，如let list: number[] = [ 1, 2, 3 ]
- 元组类型，如let x: [ string, number ] = [ "hello", 10 ]
- 枚举类型，如enum Color { Red, Green, Blue }; let c: Color = Color.Green
- any为任意类型，如let notSure: any = 4; notSure = "maybe a string instead"
可以认为，声明一个变量为任意值之后，对它的任何操作，返回的内容的类型都是任意值。
变量如果在声明的时候，未指定其类型，那么它会被识别为任意值类型。 - void为空类型，如let unusable: void = undefined
- null和undefined
let u: undefined = undefined;
let n: null = null;
- never表示没有值的类型，如function error(message: string): never { throw new Error(message); }
- 多种类型(联合类型（Union Types）)可以用|隔开，比如number | string表示可以是number或string类型
当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型里共有的属性或方法。
如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成 any 类型而完全不被类型检查
接口（interface）
接口（Interfaces）是一个很重要的概念，它是对行为的抽象，而具体如何行动需要由类（classes）去实现（implements）。
TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape）」进行描述。
以下是接口的几种常见形式：
// 定义具有 color 和 width 属性的对象
interface SuperConfug {
color: string;
width: number;
}
// readonly 表示只读，不能对其属性进行重新赋值
interface Point {
readonly x: number;
readonly y: number;
}
// ?表示属性是可选的，可选属性的含义是该属性可以不存在。仍然不允许添加未定义的属性。
// [propName: string]: any 表示允许 obj[xxx] 这样的动态属性
interface SquareConfig {
color?: string;
width?: number;
[propName: string]: any; // 使用 [propName: string] 定义了任意属性取 string 类型的值。
}
// 函数接口
interface SearchFunc {
(source: string, subString: string): boolean;
}
注意，只读的约束存在于第一次给对象赋值的时候，而不是第一次给只读属性赋值的时候。
数组
最简单的方法是使用「类型 + 方括号」来表示数组：
let fibonacci: number[] = [1, 1, 2, 3, 5];
数组的项中不允许出现其他的类型：
let fibonacci: number[] = [1, '1', 2, 3, 5];
也可以使用数组泛型（Array Generic） Array<elemType> 来表示数组：
let fibonacci: Array<number> = [1, 1, 2, 3, 5];
函数
一个函数有输入和输出，要在 TypeScript 中对其进行约束，需要把输入和输出都考虑到，其中函数声明的类型定义较简单，以下是几种函数接口的定义方式：
// 普通函数
function add(a: number, b: number): number {
return a + b;
}
// 函数参数
function readFile(file: string, callback: (err: Error | null, data: Buffer) => void) {
fs.readFile(file, callback);
}
// 通过 type 语句定义类型
type CallbackFunction = (err: Error | null, data: Buffer) => void;
function readFile(file: string, callback: CallbackFunction) {
fs.readFile(file, callback);
}
// 通过 interface 语句来定义类型
interface CallbackFunction {
(err: Error | null, data: Buffer): void;
}
function readFile(file: string, callback: CallbackFunction) {
fs.readFile(file, callback);
}
注意，输入多余的（或者少于要求的）参数，是不被允许的。
函数表达式
let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
return x + y;
};
注意，不要混淆了 TypeScript 中的 => 和 ES6 中的 =>。
在 TypeScript 的类型定义中，=> 用来表示函数的定义，左边是输入类型，需要用括号括起来，右边是输出类型。
在 ES6 中，我们允许给函数的参数添加默认值，TypeScript 会将添加了默认值的参数识别为可选参数
内置对象
ECMAScript 标准提供的内置对象有：
Boolean、Error、Date、RegExp 等。
我们可以在 TypeScript 中将变量定义为这些类型：
let b: Boolean = new Boolean(1);
let e: Error = new Error('Error occurred');
let d: Date = new Date();
let r: RegExp = /[a-z]/;
类型别名用来给一个类型起个新名字。
简单的例子：
type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
if (typeof n === 'string') {
return n;
}
else {
return n();
}
}
元组
数组合并了相同类型的对象，而元组（Tuple）合并了不同类型的对象。
当赋值或访问一个已知索引的元素时，会得到正确的类型：
let xcatliu: [string, number];
xcatliu[0] = 'Xcat Liu';
xcatliu[1] = 25;
当赋值给越界的元素时，它类型会被限制为元组中每个类型的联合类型。
枚举
枚举（Enum）类型用于取值被限定在一定范围内的场景，比如一周只能有七天，颜色限定为红绿蓝等。枚举项有两种类型：常数项（constant member）和计算所得项（computed member）。
常数枚举是使用 const enum 定义的枚举类型：
const enum Directions {
Up,
Down,
Left,
Right
}
let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];
一个典型的计算所得项的例子：
enum Color {Red, Green, Blue = "blue".length};
上面的例子中，"blue".length 就是一个计算所得项。上面的例子不会报错，但是如果紧接在计算所得项后面的是未手动赋值的项，那么它就会因为无法获得初始值而报错。
类
类的一些概念：
- 类(Class)：定义了一件事物的抽象特点，包含它的属性和方法
- 对象（Object）：类的实例，通过 new 生成
- 面向对象（OOP）的三大特性：封装、继承、多态
- 封装（Encapsulation）：将对数据的操作细节隐藏起来，只暴露对外的接口。外界调用端不需要（也不可能）知道细节，就能通过对外提供的接口来访问该对象，同时也保证了外界无法任意更改对象内部的数据
- 继承（Inheritance）：子类继承父类，子类除了拥有父类的所有特性外，还有一些更具体的特性
- 多态（Polymorphism）：由继承而产生了相关的不同的类，对同一个方法可以有不同的响应。比如 Cat 和 Dog 都继承自 Animal，但是分别实现了自己的 eat 方法。此时针对某一个实例，我们无需了解它是 Cat 还是 Dog，就可以直接调用 eat 方法，程序会自动判断出来应该如何执行 eat
- 存取器（getter & setter）：用以改变属性的读取和赋值行为
- 修饰符（Modifiers）：修饰符是一些关键字，用于限定成员或类型的性质。比如 public 表示公有属性或方法
- 抽象类（Abstract Class）：抽象类是供其他类继承的基类，抽象类不允许被实例化。抽象类中的抽象方法必须在子类中被实现
- 接口（Interfaces）：不同类之间公有的属性或方法，可以抽象成一个接口。接口可以被类实现（implements）。一个类只能继承自另一个类，但是可以实现多个接口
TypeScript 的类定义跟 JavaScript 的定义方法类型一样，但是增加了public, private, protected, readonly等访问控制修饰符：
- public 修饰的属性或方法是公有的，可以在任何地方被访问到，默认所有的属性和方法都是 public 的
- private 修饰的属性或方法是私有的，不能在声明它的类的外部访问
- protected 修饰的属性或方法是受保护的，它和 private 类似，区别是它在子类中也是允许被访问的
class Person {
protected name: string;
constructor(name: string) {
this.name = name;
}
}
class Employee extends Person {
private department: string;
constructor(name: string, department: string) {
super(name);
this.department = department;
}
public getElevatorPitch() {
return `Hello, my name is ${this.name} and I work in ${this.department}.`;
}
}
需要注意的是，这些修饰符仅在 TypeScript 程序中才有效，如果直接使用 JavaScript 是可以在类外部访问到被声明为 private 或者 protocted 的类成员，也可以修改被声明为 readonly 的成员变量。
如果没有指定访问控制关键字，则默认为 public。
使用 static 修饰符修饰的方法称为静态方法，它们不需要实例化，而是直接通过类来调用
class Animal {
static isAnimal(a) {
return a instanceof Animal;
}
}
let a = new Animal('Jack');
Animal.isAnimal(a); // true
a.isAnimal(a); // TypeError: a.isAnimal is not a function
abstract 用于定义抽象类和其中的抽象方法。抽象类是不允许被实例化的，抽象类中的抽象方法必须被子类实现。
不同类之间可以有一些共有的特性，这时候就可以把特性提取成接口（interfaces），用 implements 关键字来实现。一个类可以实现多个接口，接口与接口之间可以是继承，接口也可以继承类。
泛型
泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。
以下是使用泛型的简单例子：
function identity<T>(arg: T): T {
return arg;
}
const map = new Map<string, number>();
map.set('a', 123);
function sleep(ms: number): Promise<number> {
return new Promise<number>((resolve, reject) => {
setTimeout(() => resolve(ms), ms);
});
}
我们在函数名后添加了 <T>，其中 T 用来指代任意输入的类型，在后面的输入 arg: T 和输出 T 中即可使用了。
在 TypeScript 2.3 以后，我们可以为泛型中的类型参数指定默认类型。
function createArray<T = string>(length: number, value: T): Array<T> {
let result: T[] = [];
for (let i = 0; i < length; i++) {
result[i] = value;
}
return result;
}
编译并执行文件
大多数时候，为了方便我们可以直接使用 ts-node 命令执行 TypeScript 源文件而不需要预先编译。首先执行以下命令安装 ts-node：
npm install -g ts-node
然后使用 ts-node 命令执行即可：
ts-node --no-cache server.ts
说明：使用 ts-node 执行 TypeScript 程序时，为了提高编译速度，默认会缓存未修改过的 .ts 文件，但有时候会导致一些 Bug，所以建议启动时加上 --no-cache 参数。
tsconfig.json 配置文件
每个 TypeScript 项目都需要一个 tsconfig.json 文件来指定相关的配置，比如告诉 TypeScript 编译器要将代码转换成 ES5 还是 ES6 代码等。以下是我常用的最基本的 tsconfig.json 配置文件：
{
"compilerOptions": {
"module": "commonjs",
"moduleResolution": "node",
"target": "es6",
"rootDir": "src",
"outDir": "dist",
"sourceMap": true,
"noImplicitAny": true,
"noImplicitReturns": true,
"noImplicitThis": true
}
}
- module和moduleResolution表示这是一个 Node.js 项目，使用 CommonJS 模块机制
- target 指定将代码编译到 ES6，如果目标执行系统可能有 Node.js v0.x 的版本，可设置编译到 ES5
- rootDir 和 outDir 指定源码输入目录和编译后的代码输出目录
- sourceMap 指定编译时生成对应的 SourceMap 文件，这样在调试程序时能快速知道所对应的 TypeScript 源码位置
- noImplicit 开头的几个选项指定一些更严格的检查
使用了这个 tsconfig.json 配置文件之后，我们的源码就需要全部放到 src 目录
补充知识：JSX是一种嵌入式的类似XML的语法。 它可以被转换成合法的JavaScript，尽管转换的语义是依据不同的实现而定的。 JSX因React框架而流行，但也存在其它的实现。 TypeScript支持内嵌，类型检查以及将JSX直接编译为JavaScript。
使用第三方模块
一般情况下在 TypeScript 中是不能”直接“使用 npm 上的模块的。由于 TypeScript 项目最终会编译成 JavaScript 代码执行，当我们在 TypeScript 源码中引入这些被编译成 JavaScript 的模块时，它需要相应的声明文件（.d.ts文件）来知道该模块类型信息，这些声明文件可以通过设置tsconfig.json中的declaration: true来自动生成。而那些不是使用 TypeScript 编写的模块，也可以通过手动编写声明文件来兼容 TypeScript。
为了让广大开发者更方便地使用 npm 上众多非 TypeScript 开发的模块，TypeScript 官方建立了一个名叫 DefinitelyTyped 的仓库，任何人都可以通过 GitHub 在上面修改或者新增 npm 模块的声明文件，经多几年多的发展，这个仓库已经包含了大部分常用模块的声明文件，而且仍然在继续不断完善。当遇到缺少模块声明文件的情况，开发者可以尝试通过 npm install @types/xxx 来安装模块声明文件。
我们尝试执行以下命令安装 express 模块的声明文件：
npm install @types/express --save
成功安装。现在再通过 ts-node 来执行的时候，没有报错。
如果我们使用的第三方模块在 DefinitelyTyped 找不到对应声明文件，也可以尝试使用require()这个终极的解决方法，它会将模块解析成 any 类型，不好的地方就是没有静态类型检查了。
typings 声明文件
编写 .d.ts 文件还是比较繁琐的，比如要完整地给 express 编写声明文件，首先得了解这个模块都有哪些接口，而且 JavaScript 模块普遍接口比较 灵活，同一个方法名可能接受各种各样的参数组合。所以，大多数情况下我们只会定义我们需要用到的接口，下文以 express 模块为例。
为了验证我们编写的声明文件是否有效，首先执行以下命令将之前安装的声明文件全部删除：
rm -rf node_modules/@types
然后新建文件typings/express.d.ts（TypeScript 默认会自动从 typings 目录加载这些 .d.ts 文件）：
declare module 'express' {
/** 定义 express() 函数 */
function express(): express.Application;
namespace express {
/** 定义 Application 接口 */
interface Application {
/** get 方法 */
get(path: string, handler: (req: Request, res: Response) => void): void;
/** listen 方法 */
listen(port: number, callback: () => void): void;
}
/** 定义 Response 接口 */
interface Request { }
/** 定义 Response 接口 */
interface Response {
end(data: string): void;
}
}
export = express;
}
说明：
- 第一行的
declare module 'express'表示定义 express 这个模块，这样在 TypeScript 中就可以直接import 'express'引用 - 最后一行
export = express，并且上面分别定义了一个function express()和namespace express，这种写法是比较特殊的，我一时也没法解释清楚，反正多参照DefinitelyTyped 上其他模块的写法即可。这个问题归根结底是 express 模块通过import * as express from 'express'引入的时候，express本身又是一个函数，这种写法在早期的 Node.js 版本的程序和 NPM 模块中是比较流行的，但是在使用 ES6 module 语法后，就显得非常别扭
TSLint 代码规范检查
在编写 JavaScript 代码时，我们可以通过 ESLint 来进行代码规范检查，编写 TypeScript 代码时也可以使用 TSLint，两者在配置上也有些相似。对于初学者来说，使用 TSLint 可以知道哪些程序的写法是不被推荐的，从而养成更好的 TypeScript 代码风格。
首先我们执行以下命令安装 TSLint：
npm install tslint -g
然后在项目根目录下新建 TSLint 配置文件 tslint.json：
{
"extends": [
"tslint:recommended"
]
}
这个配置文件指定了使用推荐的 TSLint 配置（tslint:recommended）。然后执行以下命令检查：
tslint src/**/*.ts
可以通过修改配置文件 tslint.json 来关闭它：
{
"extends": [
"tslint:recommended"
],
"rules": {
"no-console": [
false
],
"only-arrow-functions": [
false
]
}
}
以上配置允许使用 console.log 和 function，而字符串使用双引号和圆括号前的空格这两条可以使用 tslint 命令来格式化。执行以下命令检查，并允许 ESLint 尝试自动格式化：
tslint --fix src/**/*.ts
发布模块
相比直接使用 JavaScript 编写的 npm 模块，使用 TypeScript 编写的模块需要增加以下几个额外的工作：
- 发布前将 TypeScript 源码编译成 JavaScript
- 需要修改 tsconfig.json 的配置，使得编译时生成模块对应的 .d.ts 文件
- 在 package.json 文件增加 types 属性
真有计划发布TypeScript 编写的模块，可以看文末链接 老雷 的文章。这里不做详述。
单元测试
要执行使用 TypeScript 编写的单元测试程序，可以有两种方法：
- 先通过 tsc 编译成 JavaScript 代码后，再执行
- 直接执行 .ts 源文件
直接执行 .ts 源文件，下文将以 mocha 为例演示。
首先执行以下命令安装所需要的模块：
npm install mocha @types/mocha chai @types/chai ts-node --save-dev
然后新建单元测试文件 src/test.ts：
import { expect } from 'chai';
import { add } from './math';
describe('测试 math', function () {
it('add()', function () {
expect(add(1, 2)).to.equal(3);
});
});
修改文件 package.json 在 scripts 中增加 test 脚本：
{
"scripts": {
"test": "mocha --compilers ts:ts-node/register src/test.ts"
}
}
说明：通过 mocha 命令的 –compilers 选项指定了 .ts 后缀的文件使用 ts-node 的钩子函数来预编译。
然后执行以下命令测试：
npm test
可以看到以下结果：
测试 math
✓ add()
1 passing (8ms)
JavaScript 项目渐进式迁移
要将一个已有的 JavaScript 项目迁移到 TypeScript 之上，往往会遇到以下几个问题：
- 项目代码太多，无法短时间内将源码从 JavaScript 改写为 TypeScript，两者需要共存一段时间
- 依赖的第三方库没有 .d.ts 文件
- 原 JavaScript 代码使用了很多的动态特性，无法简单转换代码
针对以上第一个问题，tsconfig.json 文件中有一个 allowJs 选项，将其设置为 true 后即可支持在 TypeScript 代码中直接 import JavaScript 代码，并且具有一定的静态检查能力。以下是一个简单的例子：
首先新建配置文件 tsconfig.json：
{
"compilerOptions": {
"module": "commonjs",
"moduleResolution": "node",
"target": "es6",
"rootDir": "src",
"outDir": "dist",
"sourceMap": true,
"allowJs": true,
"noImplicitAny": true,
"noImplicitReturns": true,
"noImplicitThis": true
}
}
然后新建 TypeScript 文件 src/main.ts：
import * as utils from './utils';
console.log(utils.add(1, 2));
新建 JavaScript 文件 src/utils.js：
exports.add = function (a, b) {
return a + b;
};
执行 tsc 命令即可看到 dist 目录生成了对应的 dist/utils.js 和 dist/main.js 文件。如果去掉 allowJs 选项，则编译时会报错：
src/main.ts(1,24): error TS6143: Module './utils' was resolved to '/tmp/src/utils.js', but '--allowJs' is not set.
在实际项目中，可以先从一个 JavaScript 文件入手，将其后缀改为 .ts，然后再逐步更改项目下所有文件。
针对缺少 .d.ts 文件的问题，可以参照上文 编写 typings 声明文件 一节，自行编写必要的 .d.ts 文件。
而对于以上第三个问题，可以将变量类型声明为 any，这实际上是“取消”了针对该变量的静态检查，可以像 JavaScript 一样随意赋值。
当然，从 JavaScript 迁移到 TypeScript 还有很多细节，具体可以参考这篇文章：《从 JavaScript 迁移到 TypeScript》
在 Webpack 中使用
Webpack 是当前最流行的前端构建工具之一，要在 Webpack 中使用 TypeScript 可以通过 ts-loader 模块来实现。
首先全局安装 webpack 命令：
npm install webpack -g
然后执行以下命令安装 ts-loader 和 typescript 模块：
npm install ts-loader typescript --save-dev
新建 Webpack 配置文件 webpack.config.js：
module.exports = {
entry: './app.ts',
output: {
filename: 'bundle.js',
},
resolve: {
extensions: [ '.ts', '.tsx', '.js' ],
},
module: {
loaders: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
}
],
},
};
然后新建 TypeScript 配置文件 tsconfig.json：
{
"compilerOptions": {
"module": "commonjs",
"moduleResolution": "node",
"target": "es6",
"noImplicitAny": true,
"noImplicitReturns": true,
"noImplicitThis": true
}
}
现在我们来新建 TypeScript 入口程序文件 app.ts：
function add(a: number, b: number): number {
return a + b;
}
const v = [ 1, 2, 3, 4, 5, 6].reduce(add);
console.log(v);
即可执行 webpack 命令编译代码，其结果如下：
webpack
ts-loader: Using typescript@2.3.4 and /tmp/tsconfig.json
Hash: af9d997c471a89158065
Version: webpack 3.0.0
Time: 868ms
Asset Size Chunks Chunk Names
bundle.js 2.57 kB 0 [emitted] main
[0] ./app.ts 99 bytes {0} [built]
此时可见到生成了目标文件 bundle.js。
推荐一些开源项目，进一步学习TypeScript：
- Visual Studio Code ，微软开源的跨平台代码编辑器
- AngularJS 2，谷歌开源的用于构建跨平台 Web 应用的开发框架
- TSLint，一款 TypeScript 代码规范检查工具
- Ant Design，一套企业级的 UI 设计语言和 React 实现
网友评论