Typescript教程

1 . 目录 前言 1.1 简介 1.2 什么是 TypeScript 1.2.1 安装 TypeScript 1.2.2 Hello TypeScript 1.2.3 基础 1.3 原始数据类型 1.3.1 任意值 1.3.2 类型推论 1.3.3 联合类型 1.3.4 对象的类型——接口 1.3.5 数组的类型 1.3.6 函数的类型 1.3.7 类型断言 1.3.8 声明文件 1.3.9 内置对象 1.3.10 进阶 1.4 类型别名 1.4.1 字符串字面量类型 1.4.2 元组 1.4.3 枚举 1.4.4 类 1.4.5 类与接口 1.4.6 泛型 1.4.7 声明合并 1.4.8 扩展阅读 1.4.9 工程 1.5 1 

2 . 代码检查 1.5.1 感谢 1.6 2 

3 .前言 TypeScript 入门教程 从 JavaScript 程序员的角度总结思考，循序渐进的理解 TypeScript。 关于本书 在线阅读（部署在 GitBook 上，可能需要翻墙） 在线阅读（GitHub 版） GitHub 地址 作者：xcatliu 官方 QQ 群：加入 QQ 群 767142358 本书是作者在学习 TypeScript 后整理的学习笔记。 随着对 TypeScript 理解的加深和 TypeScript 社区的发展，本书也会做出相应的更 新，欢迎大家 Star 收藏。 发现文章内容有问题，可以直接在页面下方评论 对项目的建议，可以提交 issue 向作者反馈 欢迎直接提交 pull-request 参与贡献 为什么要写本书 TypeScript 虽然有官方手册及其非官方中文版，但是它每一章都希望能详尽的描述 一个概念，导致前面的章节就会包含很多后面才会学习到的内容，而有些本该一开 始就了解的基础知识却在后面才会涉及。如果是初学者，可能需要阅读多次才能理 解。所以它更适合用来查阅，而不是学习。 与官方手册不同，本书着重于从 JavaScript 程序员的角度总结思考，循序渐进的理 解 TypeScript，希望能给大家一些帮助和启示。 由于一些知识点与官方手册重合度很高，本书会在相应章节推荐直接阅读中文手 册。 关于 TypeScript 3 

4 .前言 TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6 的支持，它 由 Microsoft 开发，代码开源于 GitHub 上。 它的第一个版本发布于 2012 年 10 月，经历了多次更新后，现在已成为前端社区 中不可忽视的力量，不仅在 Microsoft 内部得到广泛运用，而且 Google 的 Angular2 也使用了 TypeScript 作为开发语言。 适合人群 本书适合以下人群 熟悉 JavaScript，至少阅读过一遍《JavaScript 高级程序设计》 了解 ES6，推荐阅读 ECMAScript 6 入门 了解 Node.js，会用 npm 安装及使用一些工具 想了解 TypeScript 或者想对 TypeScript 有更深的理解 本书不适合以下人群 没有系统学习过 JavaScript 已经能够很熟练的运用 TypeScript 评价 《TypeScript 入门教程》全面介绍了 TS 强大的类型系统，完整而简洁，示例 丰富，比官方文档更易读，非常适合作为初学者学习 TS 的第一本书。 —— 阮一峰 目录 前言 简介 什么是 TypeScript 安装 TypeScript Hello TypeScript 基础 原始数据类型 4 

5 .前言 任意值 类型推论 联合类型 对象的类型——接口 数组的类型 函数的类型 类型断言 声明文件 内置对象 进阶 类型别名 字符串字面量类型 元组 枚举 类 类与接口 泛型 声明合并 扩展阅读 工程 代码检查 感谢 版权许可 本书采用「保持署名—非商用」创意共享 4.0 许可证。 只要保持原作者署名和非商用，您可以自由地阅读、分享、修改本书。 详细的法律条文请参见创意共享网站。 相关资料 TypeScript 官网 Handbook（中文版） ECMAScript 6 入门 5 

6 .前言 下一章：简介 6 

7 .简介 简介 本部分介绍了在学习 TypeScript 之前需要了解的知识，具体内容包括： 什么是 TypeScript 安装 TypeScript Hello TypeScript 上一章：前言 下一章：什么是 TypeScript 7 

8 .什么是 TypeScript 什么是 TypeScript 首先，我对 TypeScript 的理解如下： TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6 的支持，它 由 Microsoft 开发，代码开源于 GitHub 上。 其次引用官网的定义： TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open source. 翻译成中文即是： TypeScript 是 JavaScript 的类型的超集，它可以编译成纯 JavaScript。编译出 来的 JavaScript 可以运行在任何浏览器上。TypeScript 编译工具可以运行在任 何服务器和任何系统上。TypeScript 是开源的。 为什么选择 TypeScript TypeScript 官网列举了一些优势，不过我更愿意自己总结一下： TypeScript 增加了代码的可读性和可维护性 类型系统实际上是最好的文档，大部分的函数看看类型的定义就可以知道如何 使用了 可以在编译阶段就发现大部分错误，这总比在运行时候出错好 增强了编辑器和 IDE 的功能，包括代码补全、接口提示、跳转到定义、重构等 TypeScript 非常包容 TypeScript 是 JavaScript 的超集， .js 文件可以直接重命名为 .ts 即可 即使不显式的定义类型，也能够自动做出类型推论 可以定义从简单到复杂的几乎一切类型 即使 TypeScript 编译报错，也可以生成 JavaScript 文件 兼容第三方库，即使第三方库不是用 TypeScript 写的，也可以编写单独的类型 8 

9 .什么是 TypeScript 文件供 TypeScript 读取 TypeScript 拥有活跃的社区 大部分第三方库都有提供给 TypeScript 的类型定义文件 Google 开发的 Angular2 就是使用 TypeScript 编写的 TypeScript 拥抱了 ES6 规范，也支持部分 ESNext 草案的规范 TypeScript 的缺点 任何事物都是有两面性的，我认为 TypeScript 的弊端在于： 有一定的学习成本，需要理解接口（Interfaces）、泛型（Generics）、类 （Classes）、枚举类型（Enums）等前端工程师可能不是很熟悉的概念 短期可能会增加一些开发成本，毕竟要多写一些类型的定义，不过对于一个需 要长期维护的项目，TypeScript 能够减少其维护成本 集成到构建流程需要一些工作量 可能和一些库结合的不是很完美 大家可以根据自己团队和项目的情况判断是否需要使用 TypeScript。 上一章：简介 下一章：安装 TypeScript 9 

10 .安装 TypeScript 安装 TypeScript TypeScript 的命令行工具安装方法如下： npm install -g typescript 以上命令会在全局环境下安装 tsc 命令，安装完成之后，我们就可以在任何地方 执行 tsc 命令了。 编译一个 TypeScript 文件很简单： tsc hello.ts 我们约定使用 TypeScript 编写的文件以 .ts 为后缀，用 TypeScript 编写 React 时，以 .tsx 为后缀。 编辑器 TypeScript 最大的优势便是增强了编辑器和 IDE 的功能，包括代码补全、接口提 示、跳转到定义、重构等。 主流的编辑器都支持 TypeScript，这里我推荐使用 Visual Studio Code。 它是一款开源，跨终端的轻量级编辑器，内置了 TypeScript 支持。 另外它本身也是用 TypeScript 编写的。 下载安装：https://code.visualstudio.com/ 获取其他编辑器或 IDE 对 TypeScript 的支持： Sublime Text Atom WebStorm Vim Emacs Eclipse 10 

11 .安装 TypeScript Visual Studio 2015 Visual Studio 2013 上一章：什么是 TypeScript 下一章：Hello TypeScript 11 

12 .Hello TypeScript Hello TypeScript 我们从一个简单的例子开始。 将以下代码复制到 hello.ts 中： function sayHello(person: string) { return 'Hello, ' + person; } let user = 'Tom'; console.log(sayHello(user)); 然后执行 tsc hello.ts 这时候会生成一个编译好的文件 hello.js ： function sayHello(person) { return 'Hello, ' + person; } var user = 'Tom'; console.log(sayHello(user)); TypeScript 中，使用 : 指定变量的类型， : 的前后有没有空格都可以。 上述例子中，我们用 : 指定 person 参数类型为 string 。但是编译为 js 之 后，并没有什么检查的代码被插入进来。 TypeScript 只会进行静态检查，如果发现有错误，编译的时候就会报错。 let 是 ES6 中的关键字，和 var 类似，用于定义一个局部变量，可以参 阅 let 和 const 命令。 下面尝试把这段代码编译一下： 12 

13 .Hello TypeScript function sayHello(person: string) { return 'Hello, ' + person; } let user = [0, 1, 2]; console.log(sayHello(user)); 编辑器中会提示错误，编译的时候也会出错： index.ts(6,22): error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'. 但是还是生成了 js 文件： function sayHello(person) { return 'Hello, ' + person; } var user = [0, 1, 2]; console.log(sayHello(user)); TypeScript 编译的时候即使报错了，还是会生成编译结果，我们仍然可以使用这个 编译之后的文件。 如果要在报错的时候终止 js 文件的生成，可以在 tsconfig.json 中配置 noEmitOnError 即可。关于 tsconfig.json ，请参阅官方手册（中文版）。 上一章：安装 TypeScript 下一章：基础 13 

14 .基础 基础 本部分介绍了 TypeScript 中的常用类型和一些基本概念，旨在让大家对 TypeScript 有个初步的理解。具体内容包括： 原始数据类型 任意值 类型推论 联合类型 对象的类型——接口 数组的类型 函数的类型 类型断言 声明文件 内置对象 上一章：Hello TypeScript 下一章：原始数据类型 14 

15 .原始数据类型 原始数据类型 JavaScript 的类型分为两种：原始数据类型（Primitive data types）和对象类型 （Object types）。 原始数据类型包括：布尔值、数值、字符串、 null 、 undefined 以及 ES6 中 的新类型 Symbol 。 本节主要介绍前五种原始数据类型在 TypeScript 中的应用。 布尔值 布尔值是最基础的数据类型，在 TypeScript 中，使用 boolean 定义布尔值类 型： let isDone: boolean = false; // 编译通过 // 后面约定，未强调编译错误的代码片段，默认为编译通过 注意，使用构造函数 Boolean 创造的对象不是布尔值： let createdByNewBoolean: boolean = new Boolean(1); // index.ts(1,5): error TS2322: Type 'Boolean' is not assignable to type 'boolean'. // 后面约定，注释中标出了编译报错的代码片段，表示编译未通过 事实上 new Boolean() 返回的是一个 Boolean 对象： let createdByNewBoolean: Boolean = new Boolean(1); 直接调用 Boolean 也可以返回一个 boolean 类型： 15 

16 .原始数据类型 let createdByBoolean: boolean = Boolean(1); 在 TypeScript 中， boolean 是 JavaScript 中的基本类型，而 Boolean 是 JavaScript 中的构造函数。其他基本类型（除了 null 和 undefined ）一样， 不再赘述。 数值 使用 number 定义数值类型： let decLiteral: number = 6; let hexLiteral: number = 0xf00d; // ES6 中的二进制表示法 let binaryLiteral: number = 0b1010; // ES6 中的八进制表示法 let octalLiteral: number = 0o744; let notANumber: number = NaN; let infinityNumber: number = Infinity; 编译结果： var decLiteral = 6; var hexLiteral = 0xf00d; // ES6 中的二进制表示法 var binaryLiteral = 10; // ES6 中的八进制表示法 var octalLiteral = 484; var notANumber = NaN; var infinityNumber = Infinity; 其中 0b1010 和 0o744 是 ES6 中的二进制和八进制表示法，它们会被编译为 十进制数字。 字符串 16 

17 .原始数据类型 使用 string 定义字符串类型： let myName: string = 'Tom'; let myAge: number = 25; // 模板字符串 let sentence: string = `Hello, my name is ${myName}. I'll be ${myAge + 1} years old next month.`; 编译结果： var myName = 'Tom'; var myAge = 25; // 模板字符串 var sentence = "Hello, my name is " + myName + ".\nI'll be " + ( myAge + 1) + " years old next month."; 其中 ` 用来定义 ES6 中的模板字符串， ${expr} 用来在模板字符串中嵌入表 达式。 空值 JavaScript 没有空值（Void）的概念，在 TypeScript 中，可以用 void 表示没有 任何返回值的函数： function alertName(): void { alert('My name is Tom'); } 声明一个 void 类型的变量没有什么用，因为你只能将它赋值为 undefined 和 null ： let unusable: void = undefined; Null 和 Undefined 17 

18 .原始数据类型 在 TypeScript 中，可以使用 null 和 undefined 来定义这两个原始数据类 型： let u: undefined = undefined; let n: null = null; undefined 类型的变量只能被赋值为 undefined ， null 类型的变量只能被 赋值为 null 。 与 void 的区别是， undefined 和 null 是所有类型的子类型。也就是说 undefined 类型的变量，可以赋值给 number 类型的变量： // 这样不会报错 let num: number = undefined; // 这样也不会报错 let u: undefined; let num: number = u; 而 void 类型的变量不能赋值给 number 类型的变量： let u: void; let num: number = u; // index.ts(2,5): error TS2322: Type 'void' is not assignable to type 'number'. 参考 Basic Types（中文版） Primitive data types ES6 中的新类型 Symbol ES6 中的二进制和八进制表示法 ES6 中的模板字符串 18 

19 .原始数据类型 上一章：基础 下一章：任意值 19 

20 .任意值 任意值 任意值（Any）用来表示允许赋值为任意类型。 什么是任意值类型 如果是一个普通类型，在赋值过程中改变类型是不被允许的： let myFavoriteNumber: string = 'seven'; myFavoriteNumber = 7; // index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'. 但如果是 any 类型，则允许被赋值为任意类型。 let myFavoriteNumber: any = 'seven'; myFavoriteNumber = 7; 任意值的属性和方法 在任意值上访问任何属性都是允许的： let anyThing: any = 'hello'; console.log(anyThing.myName); console.log(anyThing.myName.firstName); 也允许调用任何方法： let anyThing: any = 'Tom'; anyThing.setName('Jerry'); anyThing.setName('Jerry').sayHello(); anyThing.myName.setFirstName('Cat'); 20 

21 .任意值 可以认为，声明一个变量为任意值之后，对它的任何操作，返回的内容的类型都是 任意值。 未声明类型的变量 变量如果在声明的时候，未指定其类型，那么它会被识别为任意值类型： let something; something = 'seven'; something = 7; something.setName('Tom'); 等价于 let something: any; something = 'seven'; something = 7; something.setName('Tom'); 参考 Basic Types # Any（中文版） 上一章：原始数据类型 下一章：类型推论 21 

22 .类型推论 类型推论 如果没有明确的指定类型，那么 TypeScript 会依照类型推论（Type Inference）的 规则推断出一个类型。 什么是类型推论 以下代码虽然没有指定类型，但是会在编译的时候报错： let myFavoriteNumber = 'seven'; myFavoriteNumber = 7; // index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'. 事实上，它等价于： let myFavoriteNumber: string = 'seven'; myFavoriteNumber = 7; // index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'. TypeScript 会在没有明确的指定类型的时候推测出一个类型，这就是类型推论。 如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成 any 类型而完全 不被类型检查： let myFavoriteNumber; myFavoriteNumber = 'seven'; myFavoriteNumber = 7; 参考 22 

23 .类型推论 Type Inference（中文版） 上一章：任意值 下一章：联合类型 23 

24 .联合类型 联合类型 联合类型（Union Types）表示取值可以为多种类型中的一种。 简单的例子 let myFavoriteNumber: string | number; myFavoriteNumber = 'seven'; myFavoriteNumber = 7; let myFavoriteNumber: string | number; myFavoriteNumber = true; // index.ts(2,1): error TS2322: Type 'boolean' is not assignable to type 'string | number'. // Type 'boolean' is not assignable to type 'number'. 联合类型使用 | 分隔每个类型。 这里的 let myFavoriteNumber: string | number 的含义是，允许 myFavoriteNumber 的类型是 string 或者 number ，但是不能是其他类型。 访问联合类型的属性或方法 当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此 联合类型的所有类型里共有的属性或方法： 24 

25 .联合类型 function getLength(something: string | number): number { return something.length; } // index.ts(2,22): error TS2339: Property 'length' does not exis t on type 'string | number'. // Property 'length' does not exist on type 'number'. 上例中， length 不是 string 和 number 的共有属性，所以会报错。 访问 string 和 number 的共有属性是没问题的： function getString(something: string | number): string { return something.toString(); } 联合类型的变量在被赋值的时候，会根据类型推论的规则推断出一个类型： let myFavoriteNumber: string | number; myFavoriteNumber = 'seven'; console.log(myFavoriteNumber.length); // 5 myFavoriteNumber = 7; console.log(myFavoriteNumber.length); // 编译时报错 // index.ts(5,30): error TS2339: Property 'length' does not exis t on type 'number'. 上例中，第二行的 myFavoriteNumber 被推断成了 string ，访问它的 length 属性不会报错。 而第四行的 myFavoriteNumber 被推断成了 number ，访问它的 length 属 性时就报错了。 参考 Advanced Types # Union Types（中文版） 25 

26 .联合类型 上一章：类型推论 下一章：对象的类型——接口 26 

27 .对象的类型——接口 对象的类型——接口 在 TypeScript 中，我们使用接口（Interfaces）来定义对象的类型。 什么是接口 在面向对象语言中，接口（Interfaces）是一个很重要的概念，它是对行为的抽象， 而具体如何行动需要由类（classes）去实现（implements）。 TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽 象以外，也常用于对「对象的形状（Shape）」进行描述。 简单的例子 interface Person { name: string; age: number; } let tom: Person = { name: 'Tom', age: 25 }; 上面的例子中，我们定义了一个接口 Person ，接着定义了一个变量 tom ，它 的类型是 Person 。这样，我们就约束了 tom 的形状必须和接口 Person 一 致。 接口一般首字母大写。有的编程语言中会建议接口的名称加上 I 前缀。 定义的变量比接口少了一些属性是不允许的： 27 

28 .对象的类型——接口 interface Person { name: string; age: number; } let tom: Person = { name: 'Tom' }; // index.ts(6,5): error TS2322: Type '{ name: string; }' is not assignable to type 'Person'. // Property 'age' is missing in type '{ name: string; }'. 多一些属性也是不允许的： interface Person { name: string; age: number; } let tom: Person = { name: 'Tom', age: 25, gender: 'male' }; // index.ts(9,5): error TS2322: Type '{ name: string; age: numbe r; gender: string; }' is not assignable to type 'Person'. // Object literal may only specify known properties, and 'gend er' does not exist in type 'Person'. 可见，赋值的时候，变量的形状必须和接口的形状保持一致。 可选属性 有时我们希望不要完全匹配一个形状，那么可以用可选属性： 28 

29 .对象的类型——接口 interface Person { name: string; age?: number; } let tom: Person = { name: 'Tom' }; interface Person { name: string; age?: number; } let tom: Person = { name: 'Tom', age: 25 }; 可选属性的含义是该属性可以不存在。 这时仍然不允许添加未定义的属性： 29