[ { "path": ".editorconfig", "content": "# EditorConfig is awesome: https://EditorConfig.org\n\n# top-most EditorConfig file\nroot = true\n\n# Unix-style newlines with a newline ending every file\n[*]\nend_of_line = lf\ninsert_final_newline = true\n\n# Matches multiple files with brace expansion notation\n# Set default charset\n[*]\ncharset = utf-8\n\n# 4 space indentation\n# [*]\n# indent_style = space\n# indent_size = 4\n" }, { "path": ".eslintignore", "content": "*.d.ts\n" }, { "path": ".eslintrc.js", "content": "module.exports = {\n extends: ['alloy', 'alloy/react', 'alloy/typescript'],\n env: {\n // Your environments (which contains several predefined global variables)\n //\n // browser: true,\n // mocha: true,\n // jquery: true\n },\n globals: {\n // Your global variables (setting to false means it's not allowed to be reassigned)\n //\n // myGlobal: false\n },\n rules: {\n // Customize your rules\n 'no-undef': 'off',\n 'prefer-arrow-callback': 'off',\n '@typescript-eslint/no-invalid-this': 'off',\n '@typescript-eslint/no-require-imports': 'off',\n '@typescript-eslint/method-signature-style': 'off',\n },\n};\n" }, { "path": ".github/FUNDING.yml", "content": "# These are supported funding model platforms\n\ngithub: xcatliu\npatreon: # Replace with a single Patreon username\nopen_collective: # Replace with a single Open Collective username\nko_fi: # Replace with a single Ko-fi username\ntidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel\ncommunity_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry\nliberapay: # Replace with a single Liberapay username\nissuehunt: # Replace with a single IssueHunt username\notechie: # Replace with a single Otechie username\ncustom: https://github.com/xcatliu/buy-me-a-coffee\n" }, { "path": ".github/workflows/gh-pages.yml", "content": "name: gh-pages\n\non:\n push:\n branches:\n - master\n\njobs:\n build-and-deploy:\n runs-on: ubuntu-22.04\n steps:\n - uses: actions/checkout@v2\n with:\n fetch-depth: 0\n\n - name: Setup deno\n uses: denolib/setup-deno@v2\n with:\n deno-version: v1.34.1\n\n - name: Build gh-pages\n run: |\n curl -fsSL https://deno.land/x/install/install.sh | sh\n export DENO_INSTALL=\"/home/runner/.deno\"\n export PATH=\"$DENO_INSTALL/bin:$PATH\"\n deno --version\n deno install --unstable --allow-read --allow-write --allow-net --allow-run -n pagic https://deno.land/x/pagic@v1.6.3/mod.ts\n pagic build\n\n - name: Deploy gh-pages\n uses: peaceiris/actions-gh-pages@v3\n with:\n github_token: ${{ secrets.GITHUB_TOKEN }}\n publish_dir: ./dist\n cname: ts.xcatliu.com\n" }, { "path": ".gitignore", "content": ".DS_Store\nnode_modules\ndist\n" }, { "path": ".lintmdrc", "content": "{\n \"excludeFiles\": [],\n \"rules\": {\n \"no-trailing-punctuation\": 0,\n \"no-long-code\": 0\n }\n}\n" }, { "path": ".npmrc", "content": "registry=https://registry.npmjs.org/\n" }, { "path": ".prettierignore", "content": "*.md\n*.png\n*.epub\n\nnode_modules\n\nassets\n\n.DS_Store\n.editorconfig\n.eslintignore\n.gitignore\n.lintmdrc\n.prettierignore\n.npmrc\n\npnpm-lock.yaml\n\nexamples\ndist\n" }, { "path": ".prettierrc.js", "content": "// .prettierrc.js\nmodule.exports = {\n // 一行最多 120 字符\n printWidth: 120,\n // 使用 2 个空格缩进\n tabWidth: 2,\n // 不使用缩进符，而使用空格\n useTabs: false,\n // 行尾需要有分号\n semi: true,\n // 使用单引号\n singleQuote: true,\n // 对象的 key 仅在必要时用引号\n quoteProps: 'as-needed',\n // jsx 不使用单引号，而使用双引号\n jsxSingleQuote: false,\n // 末尾需要有逗号\n trailingComma: 'all',\n // 大括号内的首尾需要空格\n bracketSpacing: true,\n // jsx 标签的反尖括号需要换行\n bracketSameLine: false,\n // 箭头函数，只有一个参数的时候，也需要括号\n arrowParens: 'always',\n // 每个文件格式化的范围是文件的全部内容\n rangeStart: 0,\n rangeEnd: Infinity,\n // 不需要写文件开头的 @prettier\n requirePragma: false,\n // 不需要自动在文件开头插入 @prettier\n insertPragma: false,\n // 使用默认的折行标准\n proseWrap: 'preserve',\n // 根据显示样式决定 html 要不要折行\n htmlWhitespaceSensitivity: 'css',\n // vue 文件中的 script 和 style 内不用缩进\n vueIndentScriptAndStyle: false,\n // 换行符使用 lf\n endOfLine: 'lf',\n // 格式化嵌入的内容\n embeddedLanguageFormatting: 'auto',\n // html, vue, jsx 中每个属性占一行\n singleAttributePerLine: false,\n};\n" }, { "path": ".vscode/settings.json", "content": "{\n \"files.eol\": \"\\n\",\n \"editor.tabSize\": 2,\n \"editor.formatOnSave\": true,\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\",\n \"eslint.validate\": [\"javascript\", \"javascriptreact\", \"typescript\", \"typescriptreact\"],\n \"editor.codeActionsOnSave\": {\n // 保存时自动修复 ESLint 错误\n \"source.fixAll.eslint\": true\n },\n \"typescript.tsdk\": \"node_modules/typescript/lib\",\n \"[json]\": {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n },\n \"[jsonc]\": {\n \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n }\n}\n" }, { "path": "README.md", "content": "---\nnext: introduction/README.md\n---\n\n# TypeScript 入门教程\n\n[![Actions Status](https://github.com/xcatliu/typescript-tutorial/workflows/gh-pages/badge.svg)](https://github.com/xcatliu/typescript-tutorial/actions)\n\n从 JavaScript 程序员的角度总结思考，循序渐进的理解 TypeScript。\n\n## 关于本书\n\n- [在线阅读](https://ts.xcatliu.com/)\n- [GitHub 地址][GitHub]\n- 作者：[xcatliu](https://github.com/xcatliu/)\n- 本网站使用 [Pagic](https://github.com/xcatliu/pagic) 构建\n\n本书是作者在学习 [TypeScript] 后整理的学习笔记。\n\n随着对 TypeScript 理解的加深和 TypeScript 社区的发展，本书也会做出相应的更新，欢迎大家 [Star 收藏][GitHub]。\n\n- 发现文章内容有问题，可以直接在页面下方评论\n- 对项目的建议，可以[提交 issue](https://github.com/xcatliu/typescript-tutorial/issues/new) 向作者反馈\n- 欢迎直接提交 pull-request 参与贡献\n\n## 为什么要写本书\n\nTypeScript 虽然有[官方手册][Handbook]及其[非官方中文版][中文手册]，但是它每一章都希望能详尽的描述一个概念，导致前面的章节就会包含很多后面才会学习到的内容，而有些本该一开始就了解的基础知识却在后面才会涉及。如果是初学者，可能需要阅读多次才能理解。所以它更适合用来查阅，而不是学习。\n\n与官方手册不同，本书着重于从 JavaScript 程序员的角度总结思考，循序渐进的理解 TypeScript，希望能给大家一些帮助和启示。\n\n由于一些知识点与官方手册重合度很高，本书会在相应章节推荐直接阅读中文手册。\n\n## 关于 TypeScript\n\n[TypeScript] 是 JavaScript 的一个超集，主要提供了**类型系统**和**对 ES6 的支持**，它由 Microsoft 开发，代码[开源于 GitHub](https://github.com/Microsoft/TypeScript) 上。\n\n它的第一个版本发布于 2012 年 10 月，经历了多次更新后，现在已成为前端社区中不可忽视的力量，不仅在 Microsoft 内部得到广泛运用，而且 Google 开发的 [Angular](https://angular.io/) 从 2.0 开始就使用了 TypeScript 作为开发语言，[Vue](https://vuejs.org/) 3.0 也使用 TypeScript 进行了重构。\n\n## 适合人群\n\n本书适合以下人群\n\n- 熟悉 JavaScript，至少阅读过一遍[《JavaScript 高级程序设计》](https://book.douban.com/subject/10546125/)\n- 了解 ES6，推荐阅读 [ECMAScript 6 入门]\n- 了解 Node.js，会用 npm 安装及使用一些工具\n- 想了解 TypeScript 或者想对 TypeScript 有更深的理解\n\n本书**不适合**以下人群\n\n- 没有系统学习过 JavaScript\n- 已经能够很熟练的运用 TypeScript\n\n## 评价\n\n> 《TypeScript 入门教程》全面介绍了 TypeScript 强大的类型系统，完整而简洁，示例丰富，比官方文档更易读，非常适合作为初学者学习 TypeScript 的第一本书。\n>\n> —— [阮一峰](https://github.com/ruanyf)\n\n## 版权许可\n\n本书采用「保持署名—非商用」创意共享 4.0 许可证。\n\n只要保持原作者署名和非商用，您可以自由地阅读、分享、修改本书。\n\n详细的法律条文请参见[创意共享](http://creativecommons.org/licenses/by-nc/4.0/)网站。\n\n## 相关资料\n\n- [TypeScript 官网][TypeScript]\n- [Handbook]（[中文版][中文手册]）\n- [ECMAScript 6 入门]\n\n[GitHub]: https://github.com/xcatliu/typescript-tutorial\n[TypeScript]: http://www.typescriptlang.org/\n[Handbook]: http://www.typescriptlang.org/docs/handbook/basic-types.html\n[中文手册]: https://zhongsp.gitbook.io/typescript-handbook/\n[ECMAScript 6 入门]: http://es6.ruanyifeng.com/\n" }, { "path": "advanced/README.md", "content": "# 进阶\n\n本部分介绍一些高级的类型与技术，具体内容包括：\n\n- [类型别名](type-aliases.md)\n- [字符串字面量类型](string-literal-types.md)\n- [元组](tuple.md)\n- [枚举](enum.md)\n- [类](class.md)\n- [类与接口](class-and-interfaces.md)\n- [泛型](generics.md)\n- [声明合并](declaration-merging.md)\n- [扩展阅读](further-reading.md)\n" }, { "path": "advanced/class-and-interfaces.md", "content": "# 类与接口\n\n[之前学习过](../basics/type-of-object-interfaces.md)，接口（Interfaces）可以用于对「对象的形状（Shape）」进行描述。\n\n这一章主要介绍接口的另一个用途，对类的一部分行为进行抽象。\n\n## 类实现接口\n\n实现（implements）是面向对象中的一个重要概念。一般来讲，一个类只能继承自另一个类，有时候不同类之间可以有一些共有的特性，这时候就可以把特性提取成接口（interfaces），用 `implements` 关键字来实现。这个特性大大提高了面向对象的灵活性。\n\n举例来说，门是一个类，防盗门是门的子类。如果防盗门有一个报警器的功能，我们可以简单的给防盗门添加一个报警方法。这时候如果有另一个类，车，也有报警器的功能，就可以考虑把报警器提取出来，作为一个接口，防盗门和车都去实现它：\n\n```ts\ninterface Alarm {\n alert(): void;\n}\n\nclass Door {\n}\n\nclass SecurityDoor extends Door implements Alarm {\n alert() {\n console.log('SecurityDoor alert');\n }\n}\n\nclass Car implements Alarm {\n alert() {\n console.log('Car alert');\n }\n}\n```\n\n一个类可以实现多个接口：\n\n```ts\ninterface Alarm {\n alert(): void;\n}\n\ninterface Light {\n lightOn(): void;\n lightOff(): void;\n}\n\nclass Car implements Alarm, Light {\n alert() {\n console.log('Car alert');\n }\n lightOn() {\n console.log('Car light on');\n }\n lightOff() {\n console.log('Car light off');\n }\n}\n```\n\n上例中，`Car` 实现了 `Alarm` 和 `Light` 接口，既能报警，也能开关车灯。\n\n## 接口继承接口\n\n接口与接口之间可以是继承关系：\n\n```ts\ninterface Alarm {\n alert(): void;\n}\n\ninterface LightableAlarm extends Alarm {\n lightOn(): void;\n lightOff(): void;\n}\n```\n\n这很好理解，`LightableAlarm` 继承了 `Alarm`，除了拥有 `alert` 方法之外，还拥有两个新方法 `lightOn` 和 `lightOff`。\n\n## 接口继承类\n\n常见的面向对象语言中，接口是不能继承类的，但是在 TypeScript 中却是可以的：\n\n```ts\nclass Point {\n x: number;\n y: number;\n constructor(x: number, y: number) {\n this.x = x;\n this.y = y;\n }\n}\n\ninterface Point3d extends Point {\n z: number;\n}\n\nlet point3d: Point3d = {x: 1, y: 2, z: 3};\n```\n\n为什么 TypeScript 会支持接口继承类呢？\n\n实际上，当我们在声明 `class Point` 时，除了会创建一个名为 `Point` 的类之外，同时也创建了一个名为 `Point` 的类型（实例的类型）。\n\n所以我们既可以将 `Point` 当做一个类来用（使用 `new Point` 创建它的实例）：\n\n```ts\nclass Point {\n x: number;\n y: number;\n constructor(x: number, y: number) {\n this.x = x;\n this.y = y;\n }\n}\n\nconst p = new Point(1, 2);\n```\n\n也可以将 `Point` 当做一个类型来用（使用 `: Point` 表示参数的类型）：\n\n```ts\nclass Point {\n x: number;\n y: number;\n constructor(x: number, y: number) {\n this.x = x;\n this.y = y;\n }\n}\n\nfunction printPoint(p: Point) {\n console.log(p.x, p.y);\n}\n\nprintPoint(new Point(1, 2));\n```\n\n这个例子实际上可以等价于：\n\n```ts\nclass Point {\n x: number;\n y: number;\n constructor(x: number, y: number) {\n this.x = x;\n this.y = y;\n }\n}\n\ninterface PointInstanceType {\n x: number;\n y: number;\n}\n\nfunction printPoint(p: PointInstanceType) {\n console.log(p.x, p.y);\n}\n\nprintPoint(new Point(1, 2));\n```\n\n上例中我们新声明的 `PointInstanceType` 类型，与声明 `class Point` 时创建的 `Point` 类型是等价的。\n\n所以回到 `Point3d` 的例子中，我们就能很容易的理解为什么 TypeScript 会支持接口继承类了：\n\n```ts\nclass Point {\n x: number;\n y: number;\n constructor(x: number, y: number) {\n this.x = x;\n this.y = y;\n }\n}\n\ninterface PointInstanceType {\n x: number;\n y: number;\n}\n\n// 等价于 interface Point3d extends PointInstanceType\ninterface Point3d extends Point {\n z: number;\n}\n\nlet point3d: Point3d = {x: 1, y: 2, z: 3};\n```\n\n当我们声明 `interface Point3d extends Point` 时，`Point3d` 继承的实际上是类 `Point` 的实例的类型。\n\n换句话说，可以理解为定义了一个接口 `Point3d` 继承另一个接口 `PointInstanceType`。\n\n所以「接口继承类」和「接口继承接口」没有什么本质的区别。\n\n值得注意的是，`PointInstanceType` 相比于 `Point`，缺少了 `constructor` 方法，这是因为声明 `Point` 类时创建的 `Point` 类型是不包含构造函数的。另外，除了构造函数是不包含的，静态属性或静态方法也是不包含的（实例的类型当然不应该包括构造函数、静态属性或静态方法）。\n\n换句话说，声明 `Point` 类时创建的 `Point` 类型只包含其中的实例属性和实例方法：\n\n```ts\nclass Point {\n /** 静态属性，坐标系原点 */\n static origin = new Point(0, 0);\n /** 静态方法，计算与原点距离 */\n static distanceToOrigin(p: Point) {\n return Math.sqrt(p.x * p.x + p.y * p.y);\n }\n /** 实例属性，x 轴的值 */\n x: number;\n /** 实例属性，y 轴的值 */\n y: number;\n /** 构造函数 */\n constructor(x: number, y: number) {\n this.x = x;\n this.y = y;\n }\n /** 实例方法，打印此点 */\n printPoint() {\n console.log(this.x, this.y);\n }\n}\n\ninterface PointInstanceType {\n x: number;\n y: number;\n printPoint(): void;\n}\n\nlet p1: Point;\nlet p2: PointInstanceType;\n```\n\n上例中最后的类型 `Point` 和类型 `PointInstanceType` 是等价的。\n\n同样的，在接口继承类的时候，也只会继承它的实例属性和实例方法。\n\n## 参考\n\n- [Interfaces](http://www.typescriptlang.org/docs/handbook/interfaces.html)（[中文版](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Interfaces.html)）\n" }, { "path": "advanced/class.md", "content": "# 类\n\n传统方法中，JavaScript 通过构造函数实现类的概念，通过原型链实现继承。而在 ES6 中，我们终于迎来了 `class`。\n\nTypeScript 除了实现了所有 ES6 中的类的功能以外，还添加了一些新的用法。\n\n这一节主要介绍类的用法，下一节再介绍如何定义类的类型。\n\n## 类的概念\n\n虽然 JavaScript 中有类的概念，但是可能大多数 JavaScript 程序员并不是非常熟悉类，这里对类相关的概念做一个简单的介绍。\n\n- 类（Class）：定义了一件事物的抽象特点，包含它的属性和方法\n- 对象（Object）：类的实例，通过 `new` 生成\n- 面向对象（OOP）的三大特性：封装、继承、多态\n- 封装（Encapsulation）：将对数据的操作细节隐藏起来，只暴露对外的接口。外界调用端不需要（也不可能）知道细节，就能通过对外提供的接口来访问该对象，同时也保证了外界无法任意更改对象内部的数据\n- 继承（Inheritance）：子类继承父类，子类除了拥有父类的所有特性外，还有一些更具体的特性\n- 多态（Polymorphism）：由继承而产生了相关的不同的类，对同一个方法可以有不同的响应。比如 `Cat` 和 `Dog` 都继承自 `Animal`，但是分别实现了自己的 `eat` 方法。此时针对某一个实例，我们无需了解它是 `Cat` 还是 `Dog`，就可以直接调用 `eat` 方法，程序会自动判断出来应该如何执行 `eat`\n- 存取器（getter & setter）：用以改变属性的读取和赋值行为\n- 修饰符（Modifiers）：修饰符是一些关键字，用于限定成员或类型的性质。比如 `public` 表示公有属性或方法\n- 抽象类（Abstract Class）：抽象类是供其他类继承的基类，抽象类不允许被实例化。抽象类中的抽象方法必须在子类中被实现\n- 接口（Interfaces）：不同类之间公有的属性或方法，可以抽象成一个接口。接口可以被类实现（implements）。一个类只能继承自另一个类，但是可以实现多个接口\n\n## ES6 中类的用法\n\n下面我们先回顾一下 ES6 中类的用法，更详细的介绍可以参考 [ECMAScript 6 入门 - Class]。\n\n### 属性和方法\n\n使用 `class` 定义类，使用 `constructor` 定义构造函数。\n\n通过 `new` 生成新实例的时候，会自动调用构造函数。\n\n```js\nclass Animal {\n name;\n constructor(name) {\n this.name = name;\n }\n sayHi() {\n return `My name is ${this.name}`;\n }\n}\n\nlet a = new Animal('Jack');\nconsole.log(a.sayHi()); // My name is Jack\n```\n\n### 类的继承\n\n使用 `extends` 关键字实现继承，子类中使用 `super` 关键字来调用父类的构造函数和方法。\n\n```js\nclass Cat extends Animal {\n constructor(name) {\n super(name); // 调用父类的 constructor(name)\n console.log(this.name);\n }\n sayHi() {\n return 'Meow, ' + super.sayHi(); // 调用父类的 sayHi()\n }\n}\n\nlet c = new Cat('Tom'); // Tom\nconsole.log(c.sayHi()); // Meow, My name is Tom\n```\n\n### 存取器\n\n使用 getter 和 setter 可以改变属性的赋值和读取行为：\n\n```js\nclass Animal {\n constructor(name) {\n this.name = name;\n }\n get name() {\n return 'Jack';\n }\n set name(value) {\n console.log('setter: ' + value);\n }\n}\n\nlet a = new Animal('Kitty'); // setter: Kitty\na.name = 'Tom'; // setter: Tom\nconsole.log(a.name); // Jack\n```\n\n### 静态方法\n\n使用 `static` 修饰符修饰的方法称为静态方法，它们不需要实例化，而是直接通过类来调用：\n\n```js\nclass Animal {\n static isAnimal(a) {\n return a instanceof Animal;\n }\n}\n\nlet a = new Animal('Jack');\nAnimal.isAnimal(a); // true\na.isAnimal(a); // TypeError: a.isAnimal is not a function\n```\n\n## ES7 中类的用法\n\nES7 中有一些关于类的提案，TypeScript 也实现了它们，这里做一个简单的介绍。\n\n### 实例属性\n\nES6 中实例的属性只能通过构造函数中的 `this.xxx` 来定义，ES7 提案中可以直接在类里面定义：\n\n```js\nclass Animal {\n name = 'Jack';\n\n constructor() {\n // ...\n }\n}\n\nlet a = new Animal();\nconsole.log(a.name); // Jack\n```\n\n### 静态属性\n\nES7 提案中，可以使用 `static` 定义一个静态属性：\n\n```js\nclass Animal {\n static num = 42;\n\n constructor() {\n // ...\n }\n}\n\nconsole.log(Animal.num); // 42\n```\n\n## TypeScript 中类的用法\n\n### public private 和 protected\n\nTypeScript 可以使用三种访问修饰符（Access Modifiers），分别是 `public`、`private` 和 `protected`。\n\n- `public` 修饰的属性或方法是公有的，可以在任何地方被访问到，默认所有的属性和方法都是 `public` 的\n- `private` 修饰的属性或方法是私有的，不能在声明它的类的外部访问\n- `protected` 修饰的属性或方法是受保护的，它和 `private` 类似，区别是它在子类中也是允许被访问的\n\n下面举一些例子：\n\n```ts\nclass Animal {\n public name;\n public constructor(name) {\n this.name = name;\n }\n}\n\nlet a = new Animal('Jack');\nconsole.log(a.name); // Jack\na.name = 'Tom';\nconsole.log(a.name); // Tom\n```\n\n上面的例子中，`name` 被设置为了 `public`，所以直接访问实例的 `name` 属性是允许的。\n\n很多时候，我们希望有的属性是无法直接存取的，这时候就可以用 `private` 了：\n\n```ts\nclass Animal {\n private name;\n public constructor(name) {\n this.name = name;\n }\n}\n\nlet a = new Animal('Jack');\nconsole.log(a.name);\na.name = 'Tom';\n\n// index.ts(9,13): error TS2341: Property 'name' is private and only accessible within class 'Animal'.\n// index.ts(10,1): error TS2341: Property 'name' is private and only accessible within class 'Animal'.\n```\n\n需要注意的是，TypeScript 编译之后的代码中，并没有限制 `private` 属性在外部的可访问性。\n\n上面的例子编译后的代码是：\n\n```js\nvar Animal = (function () {\n function Animal(name) {\n this.name = name;\n }\n return Animal;\n})();\nvar a = new Animal('Jack');\nconsole.log(a.name);\na.name = 'Tom';\n```\n\n使用 `private` 修饰的属性或方法，在子类中也是不允许访问的：\n\n```ts\nclass Animal {\n private name;\n public constructor(name) {\n this.name = name;\n }\n}\n\nclass Cat extends Animal {\n constructor(name) {\n super(name);\n console.log(this.name);\n }\n}\n\n// index.ts(11,17): error TS2341: Property 'name' is private and only accessible within class 'Animal'.\n```\n\n而如果是用 `protected` 修饰，则允许在子类中访问：\n\n```ts\nclass Animal {\n protected name;\n public constructor(name) {\n this.name = name;\n }\n}\n\nclass Cat extends Animal {\n constructor(name) {\n super(name);\n console.log(this.name);\n }\n}\n```\n\n当构造函数修饰为 `private` 时，该类不允许被继承或者实例化：\n\n```ts\nclass Animal {\n public name;\n private constructor(name) {\n this.name = name;\n }\n}\nclass Cat extends Animal {\n constructor(name) {\n super(name);\n }\n}\n\nlet a = new Animal('Jack');\n\n// index.ts(7,19): TS2675: Cannot extend a class 'Animal'. Class constructor is marked as private.\n// index.ts(13,9): TS2673: Constructor of class 'Animal' is private and only accessible within the class declaration.\n```\n\n当构造函数修饰为 `protected` 时，该类只允许被继承：\n\n```ts\nclass Animal {\n public name;\n protected constructor(name) {\n this.name = name;\n }\n}\nclass Cat extends Animal {\n constructor(name) {\n super(name);\n }\n}\n\nlet a = new Animal('Jack');\n\n// index.ts(13,9): TS2674: Constructor of class 'Animal' is protected and only accessible within the class declaration.\n```\n\n### 参数属性\n\n修饰符和`readonly`还可以使用在构造函数参数中，等同于类中定义该属性同时给该属性赋值，使代码更简洁。\n\n```ts\nclass Animal {\n // public name: string;\n public constructor(public name) {\n // this.name = name;\n }\n}\n```\n\n### readonly\n\n只读属性关键字，只允许出现在属性声明或索引签名或构造函数中。\n\n```ts\nclass Animal {\n readonly name;\n public constructor(name) {\n this.name = name;\n }\n}\n\nlet a = new Animal('Jack');\nconsole.log(a.name); // Jack\na.name = 'Tom';\n\n// index.ts(10,3): TS2540: Cannot assign to 'name' because it is a read-only property.\n```\n\n注意如果 `readonly` 和其他访问修饰符同时存在的话，需要写在其后面。\n\n```ts\nclass Animal {\n // public readonly name;\n public constructor(public readonly name) {\n // this.name = name;\n }\n}\n```\n\n### 抽象类\n\n`abstract` 用于定义抽象类和其中的抽象方法。\n\n什么是抽象类？\n\n首先，抽象类是不允许被实例化的：\n\n```ts\nabstract class Animal {\n public name;\n public constructor(name) {\n this.name = name;\n }\n public abstract sayHi();\n}\n\nlet a = new Animal('Jack');\n\n// index.ts(9,11): error TS2511: Cannot create an instance of the abstract class 'Animal'.\n```\n\n上面的例子中，我们定义了一个抽象类 `Animal`，并且定义了一个抽象方法 `sayHi`。在实例化抽象类的时候报错了。\n\n其次，抽象类中的抽象方法必须被子类实现：\n\n```ts\nabstract class Animal {\n public name;\n public constructor(name) {\n this.name = name;\n }\n public abstract sayHi();\n}\n\nclass Cat extends Animal {\n public eat() {\n console.log(`${this.name} is eating.`);\n }\n}\n\nlet cat = new Cat('Tom');\n\n// index.ts(9,7): error TS2515: Non-abstract class 'Cat' does not implement inherited abstract member 'sayHi' from class 'Animal'.\n```\n\n上面的例子中，我们定义了一个类 `Cat` 继承了抽象类 `Animal`，但是没有实现抽象方法 `sayHi`，所以编译报错了。\n\n下面是一个正确使用抽象类的例子：\n\n```ts\nabstract class Animal {\n public name;\n public constructor(name) {\n this.name = name;\n }\n public abstract sayHi();\n}\n\nclass Cat extends Animal {\n public sayHi() {\n console.log(`Meow, My name is ${this.name}`);\n }\n}\n\nlet cat = new Cat('Tom');\n```\n\n上面的例子中，我们实现了抽象方法 `sayHi`，编译通过了。\n\n需要注意的是，即使是抽象方法，TypeScript 的编译结果中，仍然会存在这个类，上面的代码的编译结果是：\n\n```js\nvar __extends =\n (this && this.__extends) ||\n function (d, b) {\n for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];\n function __() {\n this.constructor = d;\n }\n d.prototype = b === null ? Object.create(b) : ((__.prototype = b.prototype), new __());\n };\nvar Animal = (function () {\n function Animal(name) {\n this.name = name;\n }\n return Animal;\n})();\nvar Cat = (function (_super) {\n __extends(Cat, _super);\n function Cat() {\n _super.apply(this, arguments);\n }\n Cat.prototype.sayHi = function () {\n console.log('Meow, My name is ' + this.name);\n };\n return Cat;\n})(Animal);\nvar cat = new Cat('Tom');\n```\n\n## 类的类型\n\n给类加上 TypeScript 的类型很简单，与接口类似：\n\n```ts\nclass Animal {\n name: string;\n constructor(name: string) {\n this.name = name;\n }\n sayHi(): string {\n return `My name is ${this.name}`;\n }\n}\n\nlet a: Animal = new Animal('Jack');\nconsole.log(a.sayHi()); // My name is Jack\n```\n\n## 参考\n\n- [Classes](http://www.typescriptlang.org/docs/handbook/classes.html)（[中文版](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Classes.html)）\n- [ECMAScript 6 入门 - Class]\n\n[ecmascript 6 入门 - class]: http://es6.ruanyifeng.com/#docs/class\n" }, { "path": "advanced/declaration-merging.md", "content": "# 声明合并\n\n如果定义了两个相同名字的函数、接口或类，那么它们会合并成一个类型：\n\n## 函数的合并\n\n[之前学习过](../basics/type-of-function.md#重载)，我们可以使用重载定义多个函数类型：\n\n```ts\nfunction reverse(x: number): number;\nfunction reverse(x: string): string;\nfunction reverse(x: number | string): number | string {\n if (typeof x === 'number') {\n return Number(x.toString().split('').reverse().join(''));\n } else if (typeof x === 'string') {\n return x.split('').reverse().join('');\n }\n}\n```\n\n## 接口的合并\n\n接口中的属性在合并时会简单的合并到一个接口中：\n\n```ts\ninterface Alarm {\n price: number;\n}\ninterface Alarm {\n weight: number;\n}\n```\n\n相当于：\n\n```ts\ninterface Alarm {\n price: number;\n weight: number;\n}\n```\n\n注意，**合并的属性的类型必须是唯一的**：\n\n```ts\ninterface Alarm {\n price: number;\n}\ninterface Alarm {\n price: number; // 虽然重复了，但是类型都是 `number`，所以不会报错\n weight: number;\n}\n```\n\n```ts\ninterface Alarm {\n price: number;\n}\ninterface Alarm {\n price: string; // 类型不一致，会报错\n weight: number;\n}\n\n// index.ts(5,3): error TS2403: Subsequent variable declarations must have the same type. Variable 'price' must be of type 'number', but here has type 'string'.\n```\n\n接口中方法的合并，与函数的合并一样：\n\n```ts\ninterface Alarm {\n price: number;\n alert(s: string): string;\n}\ninterface Alarm {\n weight: number;\n alert(s: string, n: number): string;\n}\n```\n\n相当于：\n\n```ts\ninterface Alarm {\n price: number;\n weight: number;\n alert(s: string): string;\n alert(s: string, n: number): string;\n}\n```\n\n## 类的合并\n\n类的合并与接口的合并规则一致。\n\n## 参考\n\n- [Declaration Merging](http://www.typescriptlang.org/docs/handbook/declaration-merging.html)（[中文版](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Declaration%20Merging.html)）\n" }, { "path": "advanced/decorator.md", "content": "# 装饰器\n\n写在前面：本章只介绍 TypeScript 5.0+ 的装饰器用法，对于 5.0 以下的版本，请参考 [TypeScript 官方文档](https://www.typescriptlang.org/docs/handbook/decorators.html)\n\n## 什么是装饰器\n\n首先，什么是装饰器呢？[维基百科](https://en.wikipedia.org/wiki/Decorator_pattern)是这么说的：\n\n> In [object-oriented programming](https://en.wikipedia.org/wiki/Object-oriented_programming), the **decorator pattern** is a [design pattern](https://en.wikipedia.org/wiki/Design_pattern_(computer_science)) that allows behavior to be added to an individual [object](https://en.wikipedia.org/wiki/Object_(computer_science)), dynamically, without affecting the behavior of other instances of the same [class](https://en.wikipedia.org/wiki/Class_(computer_science)).\n\n本人的蹩足翻译：在 OOP (面向对象编程)中，装饰器模式是一种允许动态地往一个对象上添加自定义行为，而又不影响该对象所属的类的其他实例的一种设计模式。\n\n> 什么是 OOP 和类？[前面的章节](https://ts.xcatliu.com/advanced/class.html)做过介绍。\n\n这句话未免过于拗口了，我们不妨换个角度去切入。\n\n## 装饰器的使用场景\n\n要知道，一切设计模式的诞生，都是为了解决某个问题。在 JavaScript 的世界中，装饰器通常出现于以下场景：\n\n1. 提供一种易读且容易实现的方式，修改类或者类的方法，避免出现大量重复的代码。\n \n 下面以修改类的方法为例。\n \n 首先，假设我们有一个 `Animal` 类：\n \n ```ts\n class Animal {\n type: string\n constructor(type: string) {\n \t this.type = type\n }\n \n greet() {\n console.log(`Hello, I'm a(n) ${this.type}!`)\n }\n }\n \n const xcat = new Animal('cat')\n xcat.greet() // Hello, I'm a(n) cat!\n ```\n \n 该类有一个 greet 方法，和调用方打招呼。\n \n 假如说，我还希望根据不同的 `type`，往 console 打印不同动物的叫声呢？\n \n 聪明的你或许想到了，这不就是**类的继承**吗！在子类的 `greet()` 方法中，实现不同的逻辑，再调用 `super.greet()` 即可。\n \n ```ts\n class Xcat extends Animal {\n constructor() {\n super('cat')\n }\n \n greet() {\n console.log('meow~ meow~')\n super.greet()\n }\n }\n \n const xcat = new Xcat()\n xcat.greet() // meow~ meow~\n // Hello, I'm a(n) cat!\n ```\n \n 用装饰器实现，也不妨为一种思路，比如在 `Animal` 类中，为 `greet()` 方法添加「打印不同动物叫声的」行为:\n \n ```ts\n class Animal {\n type: string\n constructor(type: string) {\n \t this.type = type\n }\n \n @yelling\n greet() {\n console.log(`Hello, I'm a(n) ${this.type}!`)\n }\n }\n \n const typeToYellingMap = {\n cat: 'meow~ meow~'\n }\n \n function yelling(originalMethod: any, context: ClassMethodDecoratorContext) {\n return function(...args: any[]) {\n console.log(typeToYellingMap[this.type])\n originalMethod.call(this, ...args)\n }\n }\n \n const xcat = new Animal('cat')\n xcat.greet() // meow~ meow~\n // Hello, I'm a(n) cat!\n ```\n \n 在 `Animal.greet()` 方法上出现的 `@yelling` ，就是 TypeScript 中装饰器的写法，即 @ + 函数名的组合。\n \n 上述示例对装饰器的应用属于**方法装饰器**，此类装饰器本身接收两个参数，一是被装饰的方法，二是方法装饰器的上下文。方法装饰器应返回一个函数，此函数在运行时真正被执行。在上述例子中，我们在装饰器返回的函数中做了两件事情：\n \n 1. 打印相应类别的动物的叫声。\n 2. 调用 `originalMethod.call(this, …args)` ，确保原方法（即装饰器所装饰的方法）能够正确地被执行。\n2. 结合「**依赖注入**」这一设计模式，优化模块与 class 的依赖关系。\n \n 什么是依赖注入呢？引用同事 [zio](https://github.com/ziofat) 的原话：\n \n > **依赖注入其实是将一个模块所依赖的部分作为参数传入，而不是由模块自己去构造。**\n \n 可见，依赖注入解决了实际工程项目中，类、模块间依赖关系层级复杂的问题，将构造单例的行为交由实现依赖注入的框架去处理。\n \n 举个例子：\n\n ```ts\n @injectable\n class Dog implements IAnimal {\n sayHi() {\n console.log('woof woof woof')\n }\n }\n \n @injectable\n class Cat implements IAnimal {\n sayHi() {\n console.log('meow meow meow')\n }\n }\n \n class AnimalService {\n constructor(\n @inject dog: Dog\n @inject cat: Cat\n ) {\n this._dog = dog\n this._cat = cat\n }\n \n sayHiByDog() {\n this._dog.sayHi()\n }\n \n sayHiByCat() {\n this._cat.sayHi()\n }\n }\n ```\n \n 在上述代码中，`@injectable` 将一个类标记为「可被注入的」，在面向业务的类（即 `AnimalService`）中，使用 `@inject` 注入此类的单例，实现了「依赖倒置」。注意到这里的 `implements IAnimal` 用法，也是实战中依赖注入运用的精妙之处 —— 关心接口，而非具体实现。\n \n3. 实现「AOP」，即 Aspect-oriented programming，面向切面编程。\n \n 所谓的「切面」，可以理解成，在复杂的各个业务维度中，只关注一个维度的事务。\n \n 例如，使用装饰器，实现对类的某个方法的执行时间记录：\n \n ```ts\n class MyService {\n @recordExecution\n myFn() {\n // do something...\n }\n }\n \n function recordExecution(originalMethod: any, context: ClassMethodDecoratorContext) {\n return function(...args: any[]) {\n console.time('mark execution')\n originalMethod.call(this, ...args)\n console.timeEnd('mark execution')\n }\n }\n ```\n \n\n## 装饰器的类别\n\n通过以上例子，相信读者已经对装饰器有一定了解，且认识到了装饰器在一些场景的强大之处。在此引用[阮一峰 es6 教程](https://es6.ruanyifeng.com/#docs/decorator#%E7%AE%80%E4%BB%8B%EF%BC%88%E6%96%B0%E8%AF%AD%E6%B3%95%EF%BC%89)稍做总结：\n\n> 装饰器是一种函数，写成`@ + 函数名`，可以用来装饰四种类型的值。\n> \n> - 类\n> - 类的属性\n> - 类的方法\n> - 属性存取器（accessor, getter, setter）\n\n> 装饰器的执行步骤如下。\n> \n> 1. 计算各个装饰器的值，按照从左到右，从上到下的顺序。\n> 2. 调用方法装饰器。\n> 3. 调用类装饰器。\n\n不管是哪种类型的装饰器，它们的函数签名都可以认为是一致的，即均接收 `value`, `context` 两个参数，前者指被装饰的对象，后者指一个存储了上下文信息的对象。\n\n## context 与 metadata 二三讲\n\n四种装饰器的 context，均包含以下信息：\n\n- kind\n \n 描述被装饰的 value 的类型，可取 `class`, `method`, `field`, `getter`, `setter`, `accessor` 这些值。\n \n- name\n \n 描述被装饰的 value 的名字。\n \n- addInitializer\n \n 一个方法，接收一个回调函数，使得开发者可以侵入 value 的初始化过程作修改。\n \n 对 `class` 来说，这个回调函数会在类定义最终确认后调用，即相当于在初始化过程的最后一步。\n \n 对其他的 value 来说，如果是被 `static` 所修饰的，则会在类定义期间被调用，且早于其他静态属性的赋值过程；否则，会在类初始化期间被调用，且早于 value 自身的初始化。\n \n 以下是 `@bound` 类方法装饰器的例子，该装饰器自动为方法绑定 `this`：\n \n ```ts\n const bound = (value, context: ClassMemberDecoratorContext) {\n if (context.private) throw new TypeError(\"Not supported on private methods.\");\n context.addInitializer(function () {\n this[context.name] = this[context.name].bind(this);\n });\n }\n ```\n \n- metadata\n \n 和装饰器类似，[metadata](https://github.com/tc39/proposal-decorator-metadata) 也是处于 stage 3 阶段的一个提案。装饰器只能访问到类原型链、类实例的相关数据，而 metadata 给了开发者更大的自由，让程序于运行时访问到编译时决定的元数据。\n \n 举个例子：\n \n ```ts\n function meta(key, value) {\n return (_, context) => {\n context.metadata[key] = value;\n };\n }\n \n @meta('a', 'x')\n class C {\n @meta('b', 'y')\n m() {}\n }\n \n C[Symbol.metadata].a; // 'x'\n C[Symbol.metadata].b; // 'y'\n ```\n \n 在上述程序中，我们通过访问类的 `Symbol.metadata` ，读取到了 meta 装饰器所写入的元数据。对元数据的访问，有且仅有这一种形式。\n \n 注意一点，metadata 是作用在类上的，即使它的位置在类方法上。想实现细粒度的元数据存储，可以考虑手动维护若干 `WeakMap`。\n \n\n除了类装饰器以外，其他3种装饰器的 context 还拥有以下 3 个字段：\n\n- static\n \n 布尔值，描述 value 是否为 static 所修饰。\n \n- private\n \n 布尔值，描述 value 是否为 private 所修饰。\n \n- access\n \n 一个对象，可在运行时访问 value 相关数据。\n \n 以类方法装饰器为例，用 `access.get` 可在运行时读取方法值，`access.has` 可在运行时查询对象上是否有某方法，举个例子：\n \n ```ts\n const typeToYellingMap = {\n cat: 'meow~ meow~',\n }\n \n let yellingMethodContext: ClassMethodDecoratorContext\n \n class Animal {\n type: string\n constructor(type: string) {\n this.type = type\n }\n \n @yelling\n greet() {\n console.log(`Hello, I'm a(n) ${this.type}!`)\n }\n \n accessor y = 1\n }\n \n function yelling(originalMethod: any, context: ClassMethodDecoratorContext) {\n yellingMethodContext = context\n return function (this: any, ...args: any[]) {\n console.log(typeToYellingMap[this.type as keyof typeof typeToYellingMap])\n originalMethod.call(this, ...args)\n }\n }\n \n const xcat = new Animal('cat')\n xcat.greet() // meow~ meow~\n // Hello, I'm a(n) cat!\n yellingMethodContext.access.get(xcat).call(xcat) // meow~ meow~\n // Hello, I'm a(n) cat!\n console.log(yellingMethodContext.access.has(xcat)) // true\n ```\n \n `getter` 类别的装饰器，其 `context.access` 同样拥有 `has`, `get` 两个方法。\n \n 对于 `setter` 类别的装饰器，则是 `has` 与 `set` 方法。\n \n `filed` 与 `accessor` 类别的装饰器，拥有 `has`, `get`, `set` 全部三个方法。\n" }, { "path": "advanced/enum.md", "content": "# 枚举\n\n枚举（Enum）类型用于取值被限定在一定范围内的场景，比如一周只能有七天，颜色限定为红绿蓝等。\n\n## 简单的例子\n\n枚举使用 `enum` 关键字来定义：\n\n```ts\nenum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};\n```\n\n枚举成员会被赋值为从 `0` 开始递增的数字，同时也会对枚举值到枚举名进行反向映射：\n\n```ts\nenum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};\n\nconsole.log(Days[\"Sun\"] === 0); // true\nconsole.log(Days[\"Mon\"] === 1); // true\nconsole.log(Days[\"Tue\"] === 2); // true\nconsole.log(Days[\"Sat\"] === 6); // true\n\nconsole.log(Days[0] === \"Sun\"); // true\nconsole.log(Days[1] === \"Mon\"); // true\nconsole.log(Days[2] === \"Tue\"); // true\nconsole.log(Days[6] === \"Sat\"); // true\n```\n\n事实上，上面的例子会被编译为：\n\n```js\nvar Days;\n(function (Days) {\n Days[Days[\"Sun\"] = 0] = \"Sun\";\n Days[Days[\"Mon\"] = 1] = \"Mon\";\n Days[Days[\"Tue\"] = 2] = \"Tue\";\n Days[Days[\"Wed\"] = 3] = \"Wed\";\n Days[Days[\"Thu\"] = 4] = \"Thu\";\n Days[Days[\"Fri\"] = 5] = \"Fri\";\n Days[Days[\"Sat\"] = 6] = \"Sat\";\n})(Days || (Days = {}));\n```\n\n## 手动赋值\n\n我们也可以给枚举项手动赋值：\n\n```ts\nenum Days {Sun = 7, Mon = 1, Tue, Wed, Thu, Fri, Sat};\n\nconsole.log(Days[\"Sun\"] === 7); // true\nconsole.log(Days[\"Mon\"] === 1); // true\nconsole.log(Days[\"Tue\"] === 2); // true\nconsole.log(Days[\"Sat\"] === 6); // true\n```\n\n上面的例子中，未手动赋值的枚举项会接着上一个枚举项递增。\n\n如果未手动赋值的枚举项与手动赋值的重复了，TypeScript 是不会察觉到这一点的：\n\n```ts\nenum Days {Sun = 3, Mon = 1, Tue, Wed, Thu, Fri, Sat};\n\nconsole.log(Days[\"Sun\"] === 3); // true\nconsole.log(Days[\"Wed\"] === 3); // true\nconsole.log(Days[3] === \"Sun\"); // false\nconsole.log(Days[3] === \"Wed\"); // true\n```\n\n上面的例子中，递增到 `3` 的时候与前面的 `Sun` 的取值重复了，但是 TypeScript 并没有报错，导致 `Days[3]` 的值先是 `\"Sun\"`，而后又被 `\"Wed\"` 覆盖了。编译的结果是：\n\n```js\nvar Days;\n(function (Days) {\n Days[Days[\"Sun\"] = 3] = \"Sun\";\n Days[Days[\"Mon\"] = 1] = \"Mon\";\n Days[Days[\"Tue\"] = 2] = \"Tue\";\n Days[Days[\"Wed\"] = 3] = \"Wed\";\n Days[Days[\"Thu\"] = 4] = \"Thu\";\n Days[Days[\"Fri\"] = 5] = \"Fri\";\n Days[Days[\"Sat\"] = 6] = \"Sat\";\n})(Days || (Days = {}));\n```\n\n所以使用的时候需要注意，最好不要出现这种覆盖的情况。\n\n手动赋值的枚举项可以不是数字，此时需要使用类型断言来让 tsc 无视类型检查 (编译出的 js 仍然是可用的)：\n\n```ts\nenum Days {Sun = 7, Mon, Tue, Wed, Thu, Fri, Sat = \"S\"};\n```\n\n```js\nvar Days;\n(function (Days) {\n Days[Days[\"Sun\"] = 7] = \"Sun\";\n Days[Days[\"Mon\"] = 8] = \"Mon\";\n Days[Days[\"Tue\"] = 9] = \"Tue\";\n Days[Days[\"Wed\"] = 10] = \"Wed\";\n Days[Days[\"Thu\"] = 11] = \"Thu\";\n Days[Days[\"Fri\"] = 12] = \"Fri\";\n Days[Days[\"Sat\"] = \"S\"] = \"Sat\";\n})(Days || (Days = {}));\n```\n\n当然，手动赋值的枚举项也可以为小数或负数，此时后续未手动赋值的项的递增步长仍为 `1`：\n\n```ts\nenum Days {Sun = 7, Mon = 1.5, Tue, Wed, Thu, Fri, Sat};\n\nconsole.log(Days[\"Sun\"] === 7); // true\nconsole.log(Days[\"Mon\"] === 1.5); // true\nconsole.log(Days[\"Tue\"] === 2.5); // true\nconsole.log(Days[\"Sat\"] === 6.5); // true\n```\n\n## 常数项和计算所得项\n\n枚举项有两种类型：常数项（constant member）和计算所得项（computed member）。\n\n前面我们所举的例子都是常数项，一个典型的计算所得项的例子：\n\n```ts\nenum Color {Red, Green, Blue = \"blue\".length};\n```\n\n上面的例子中，`\"blue\".length` 就是一个计算所得项。\n\n上面的例子不会报错，但是**如果紧接在计算所得项后面的是未手动赋值的项，那么它就会因为无法获得初始值而报错**：\n\n```ts\nenum Color {Red = \"red\".length, Green, Blue};\n\n// index.ts(1,33): error TS1061: Enum member must have initializer.\n// index.ts(1,40): error TS1061: Enum member must have initializer.\n```\n\n下面是常数项和计算所得项的完整定义，部分引用自[中文手册 - 枚举]：\n\n当满足以下条件时，枚举成员被当作是常数：\n\n- 不具有初始化函数并且之前的枚举成员是常数。在这种情况下，当前枚举成员的值为上一个枚举成员的值加 `1`。但第一个枚举元素是个例外。如果它没有初始化方法，那么它的初始值为 `0`。\n- 枚举成员使用常数枚举表达式初始化。常数枚举表达式是 TypeScript 表达式的子集，它可以在编译阶段求值。当一个表达式满足下面条件之一时，它就是一个常数枚举表达式：\n - 数字字面量\n - 引用之前定义的常数枚举成员（可以是在不同的枚举类型中定义的）如果这个成员是在同一个枚举类型中定义的，可以使用非限定名来引用\n - 带括号的常数枚举表达式\n - `+`, `-`, `~` 一元运算符应用于常数枚举表达式\n - `+`, `-`, `*`, `/`, `%`, `<<`, `>>`, `>>>`, `&`, `|`, `^` 二元运算符，常数枚举表达式做为其一个操作对象。若常数枚举表达式求值后为 NaN 或 Infinity，则会在编译阶段报错\n\n所有其它情况的枚举成员被当作是需要计算得出的值。\n\n## 常数枚举\n\n常数枚举是使用 `const enum` 定义的枚举类型：\n\n```ts\nconst enum Directions {\n Up,\n Down,\n Left,\n Right\n}\n\nlet directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];\n```\n\n常数枚举与普通枚举的区别是，它会在编译阶段被删除，并且不能包含计算成员。\n\n上例的编译结果是：\n\n```js\nvar directions = [0 /* Up */, 1 /* Down */, 2 /* Left */, 3 /* Right */];\n```\n\n假如包含了计算成员，则会在编译阶段报错：\n\n```ts\nconst enum Color {Red, Green, Blue = \"blue\".length};\n\n// index.ts(1,38): error TS2474: In 'const' enum declarations member initializer must be constant expression.\n```\n\n## 外部枚举\n\n外部枚举（Ambient Enums）是使用 `declare enum` 定义的枚举类型：\n\n```ts\ndeclare enum Directions {\n Up,\n Down,\n Left,\n Right\n}\n\nlet directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];\n```\n\n之前提到过，`declare` 定义的类型只会用于编译时的检查，编译结果中会被删除。\n\n上例的编译结果是：\n\n```js\nvar directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];\n```\n\n外部枚举与声明语句一样，常出现在声明文件中。\n\n同时使用 `declare` 和 `const` 也是可以的：\n\n```ts\ndeclare const enum Directions {\n Up,\n Down,\n Left,\n Right\n}\n\nlet directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];\n```\n\n编译结果：\n\n```js\nvar directions = [0 /* Up */, 1 /* Down */, 2 /* Left */, 3 /* Right */];\n```\n\n> TypeScript 的枚举类型的概念[来源于 C#][C# Enum]。\n\n## 参考\n\n- [Enums](http://www.typescriptlang.org/docs/handbook/enums.html)（[中文版][中文手册 - 枚举]）\n- [C# Enum][]\n\n[中文手册 - 枚举]: https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Enums.html\n[C# Enum]: https://msdn.microsoft.com/zh-cn/library/sbbt4032.aspx\n" }, { "path": "advanced/further-reading.md", "content": "# 扩展阅读\n\n此处记录了[官方手册](http://www.typescriptlang.org/docs/handbook/basic-types.html)（[中文版](https://zhongsp.gitbooks.io/typescript-handbook/content/)）中包含，但是本书未涉及的概念。\n\n我认为它们是一些不重要或者不属于 TypeScript 的概念，所以这里只给出一个简单的释义，详细内容可以点击链接深入理解。\n\n- [Never](http://www.typescriptlang.org/docs/handbook/basic-types.html#never)（[中文版](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Basic%20Types.html#never)）：永远不存在值的类型，一般用于错误处理函数\n- [Variable Declarations](http://www.typescriptlang.org/docs/handbook/variable-declarations.html)（[中文版](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Variable%20Declarations.html)）：使用 `let` 和 `const` 替代 `var`，这是 [ES6 的知识](http://es6.ruanyifeng.com/#docs/let)\n- [`this`](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Functions.html#this)：箭头函数的运用，这是 [ES6 的知识](http://es6.ruanyifeng.com/#docs/function)\n- [Using Class Types in Generics](http://www.typescriptlang.org/docs/handbook/generics.html#using-class-types-in-generics)（[中文版](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Generics.html#在泛型里使用类类型)）：创建工厂函数时，需要引用构造函数的类类型\n- [Best common type](http://www.typescriptlang.org/docs/handbook/type-inference.html#best-common-type)（[中文版](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Type%20Inference.html#最佳通用类型)）：数组的类型推论\n- [Contextual Type](http://www.typescriptlang.org/docs/handbook/type-inference.html#contextual-type)（[中文版](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Type%20Inference.html#上下文类型)）：函数输入的类型推论\n- [Type Compatibility](http://www.typescriptlang.org/docs/handbook/type-compatibility.html)（[中文版](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Type%20Compatibility.html)）：允许不严格符合类型，只需要在一定规则下兼容即可\n- [Advanced Types](http://www.typescriptlang.org/docs/handbook/advanced-types.html#intersection-types)（[中文版](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Advanced%20Types.html#交叉类型（intersection-types）)）：使用 `&` 将多种类型的共有部分叠加成一种类型\n- [Type Guards and Differentiating Types](http://www.typescriptlang.org/docs/handbook/advanced-types.html#type-guards-and-differentiating-types)（[中文版](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Advanced%20Types.html#类型保护与区分类型（type-guards-and-differentiating-types）)）：联合类型在一些情况下被识别为特定的类型\n- [Discriminated Unions](http://www.typescriptlang.org/docs/handbook/advanced-types.html#discriminated-unions)（[中文版](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Advanced%20Types.html#可辨识联合（discriminated-unions）)）：使用 `|` 联合多个接口的时候，通过一个共有的属性形成可辨识联合\n- [Polymorphic `this` types](http://www.typescriptlang.org/docs/handbook/advanced-types.html#polymorphic-this-types)（[中文版](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Advanced%20Types.html#多态的this类型)）：父类的某个方法返回 `this`，当子类继承父类后，子类的实例调用此方法，返回的 `this` 能够被 TypeScript 正确的识别为子类的实例。\n- [Symbols](http://www.typescriptlang.org/docs/handbook/symbols.html)（[中文版](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Symbols.html)）：新原生类型，这是 [ES6 的知识](http://es6.ruanyifeng.com/#docs/symbol)\n- [Iterators and Generators](http://www.typescriptlang.org/docs/handbook/iterators-and-generators.html)（[中文版](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Iterators%20and%20Generators.html)）：迭代器，这是 [ES6 的知识](http://es6.ruanyifeng.com/#docs/iterator)\n- [Namespaces](http://www.typescriptlang.org/docs/handbook/namespaces.html)（[中文版](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Namespaces.html)）：避免全局污染，现在已被 [ES6 Module](http://es6.ruanyifeng.com/#docs/module) 替代\n- [Mixins](http://www.typescriptlang.org/docs/handbook/mixins.html)（[中文版](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Mixins.html)）：一种编程模式，与 TypeScript 没有直接关系，可以参考 [ES6 中 Mixin 模式的实现](http://es6.ruanyifeng.com/#docs/class#Mixin模式的实现)\n" }, { "path": "advanced/generics.md", "content": "# 泛型\n\n泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。\n\n## 简单的例子\n\n首先，我们来实现一个函数 `createArray`，它可以创建一个指定长度的数组，同时将每一项都填充一个默认值：\n\n```ts\nfunction createArray(length: number, value: any): Array {\n let result = [];\n for (let i = 0; i < length; i++) {\n result[i] = value;\n }\n return result;\n}\n\ncreateArray(3, 'x'); // ['x', 'x', 'x']\n```\n\n上例中，我们使用了[之前提到过的数组泛型](../basics/type-of-array.md#数组泛型)来定义返回值的类型。\n\n这段代码编译不会报错，但是一个显而易见的缺陷是，它并没有准确的定义返回值的类型：\n\n`Array` 允许数组的每一项都为任意类型。但是我们预期的是，数组中每一项都应该是输入的 `value` 的类型。\n\n这时候，泛型就派上用场了：\n\n```ts\nfunction createArray(length: number, value: T): Array {\n   let result: T[] = [];\n for (let i = 0; i < length; i++) {\n result[i] = value;\n }\n return result;\n}\n\ncreateArray(3, 'x'); // ['x', 'x', 'x']\n```\n\n上例中，我们在函数名后添加了 ``，其中 `T` 用来指代任意输入的类型，在后面的输入 `value: T` 和输出 `Array` 中即可使用了。\n\n接着在调用的时候，可以指定它具体的类型为 `string`。当然，也可以不手动指定，而让类型推论自动推算出来：\n\n```ts\nfunction createArray(length: number, value: T): Array {\n let result: T[] = [];\n for (let i = 0; i < length; i++) {\n result[i] = value;\n }\n return result;\n}\n\ncreateArray(3, 'x'); // ['x', 'x', 'x']\n```\n\n## 多个类型参数\n\n定义泛型的时候，可以一次定义多个类型参数：\n\n```ts\nfunction swap(tuple: [T, U]): [U, T] {\n return [tuple[1], tuple[0]];\n}\n\nswap([7, 'seven']); // ['seven', 7]\n```\n\n上例中，我们定义了一个 `swap` 函数，用来交换输入的元组。\n\n## 泛型约束\n\n在函数内部使用泛型变量的时候，由于事先不知道它是哪种类型，所以不能随意的操作它的属性或方法：\n\n```ts\nfunction loggingIdentity(arg: T): T {\n console.log(arg.length);\n return arg;\n}\n\n// index.ts(2,19): error TS2339: Property 'length' does not exist on type 'T'.\n```\n\n上例中，泛型 `T` 不一定包含属性 `length`，所以编译的时候报错了。\n\n这时，我们可以对泛型进行约束，只允许这个函数传入那些包含 `length` 属性的变量。这就是泛型约束：\n\n```ts\ninterface Lengthwise {\n length: number;\n}\n\nfunction loggingIdentity(arg: T): T {\n console.log(arg.length);\n return arg;\n}\n```\n\n上例中，我们使用了 `extends` 约束了泛型 `T` 必须符合接口 `Lengthwise` 的形状，也就是必须包含 `length` 属性。\n\n此时如果调用 `loggingIdentity` 的时候，传入的 `arg` 不包含 `length`，那么在编译阶段就会报错了：\n\n```ts\ninterface Lengthwise {\n length: number;\n}\n\nfunction loggingIdentity(arg: T): T {\n console.log(arg.length);\n return arg;\n}\n\nloggingIdentity(7);\n\n// index.ts(10,17): error TS2345: Argument of type '7' is not assignable to parameter of type 'Lengthwise'.\n```\n\n多个类型参数之间也可以互相约束：\n\n```ts\nfunction copyFields(target: T, source: U): T {\n for (let id in source) {\n target[id] = (source)[id];\n }\n return target;\n}\n\nlet x = { a: 1, b: 2, c: 3, d: 4 };\n\ncopyFields(x, { b: 10, d: 20 });\n```\n\n上例中，我们使用了两个类型参数，其中要求 `T` 继承 `U`，这样就保证了 `U` 上不会出现 `T` 中不存在的字段。\n\n## 泛型接口\n\n[之前学习过](../basics/type-of-function.md#接口中函数的定义)，可以使用接口的方式来定义一个函数需要符合的形状：\n\n```ts\ninterface SearchFunc {\n (source: string, subString: string): boolean;\n}\n\nlet mySearch: SearchFunc;\nmySearch = function(source: string, subString: string) {\n return source.search(subString) !== -1;\n}\n```\n\n当然也可以使用含有泛型的接口来定义函数的形状：\n\n```ts\ninterface CreateArrayFunc {\n (length: number, value: T): Array;\n}\n\nlet createArray: CreateArrayFunc;\ncreateArray = function(length: number, value: T): Array {\n let result: T[] = [];\n for (let i = 0; i < length; i++) {\n result[i] = value;\n }\n return result;\n}\n\ncreateArray(3, 'x'); // ['x', 'x', 'x']\n```\n\n进一步，我们可以把泛型参数提前到接口名上：\n\n```ts\ninterface CreateArrayFunc {\n (length: number, value: T): Array;\n}\n\nlet createArray: CreateArrayFunc;\ncreateArray = function(length: number, value: T): Array {\n let result: T[] = [];\n for (let i = 0; i < length; i++) {\n result[i] = value;\n }\n return result;\n}\n\ncreateArray(3, 'x'); // ['x', 'x', 'x']\n```\n\n注意，此时在使用泛型接口的时候，需要定义泛型的类型。\n\n## 泛型类\n\n与泛型接口类似，泛型也可以用于类的类型定义中：\n\n```ts\nclass GenericNumber {\n zeroValue: T;\n add: (x: T, y: T) => T;\n}\n\nlet myGenericNumber = new GenericNumber();\nmyGenericNumber.zeroValue = 0;\nmyGenericNumber.add = function(x, y) { return x + y; };\n```\n\n## 泛型参数的默认类型\n\n在 TypeScript 2.3 以后，我们可以为泛型中的类型参数指定默认类型。当使用泛型时没有在代码中直接指定类型参数，从实际值参数中也无法推测出时，这个默认类型就会起作用。\n\n```ts\nfunction createArray(length: number, value: T): Array {\n let result: T[] = [];\n for (let i = 0; i < length; i++) {\n result[i] = value;\n }\n return result;\n}\n```\n\n## 参考\n\n- [Generics](http://www.typescriptlang.org/docs/handbook/generics.html)（[中文版](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/generics.html)）\n- [Generic parameter defaults](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-3.html#generic-parameter-defaults)\n" }, { "path": "advanced/string-literal-types.md", "content": "# 字符串字面量类型\n\n字符串字面量类型用来约束取值只能是某几个字符串中的一个。\n\n## 简单的例子\n\n```ts\ntype EventNames = 'click' | 'scroll' | 'mousemove';\nfunction handleEvent(ele: Element, event: EventNames) {\n // do something\n}\n\nhandleEvent(document.getElementById('hello'), 'scroll'); // 没问题\nhandleEvent(document.getElementById('world'), 'dblclick'); // 报错，event 不能为 'dblclick'\n\n// index.ts(7,47): error TS2345: Argument of type '\"dblclick\"' is not assignable to parameter of type 'EventNames'.\n```\n\n上例中，我们使用 `type` 定了一个字符串字面量类型 `EventNames`，它只能取三种字符串中的一种。\n\n注意，**类型别名与字符串字面量类型都是使用 `type` 进行定义。**\n\n## 参考\n\n- [Advanced Types # Type Aliases](http://www.typescriptlang.org/docs/handbook/advanced-types.html#string-literal-types)（[中文版](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Advanced%20Types.html#字符串字面量类型)）\n" }, { "path": "advanced/tuple.md", "content": "# 元组\n\n数组合并了相同类型的对象，而元组（Tuple）合并了不同类型的对象。\n\n元组起源于函数编程语言（如 F#），这些语言中会频繁使用元组。\n\n## 简单的例子\n\n定义一对值分别为 `string` 和 `number` 的元组：\n\n```ts\nlet tom: [string, number] = ['Tom', 25];\n```\n\n当赋值或访问一个已知索引的元素时，会得到正确的类型：\n\n```ts\nlet tom: [string, number];\ntom[0] = 'Tom';\ntom[1] = 25;\n\ntom[0].slice(1);\ntom[1].toFixed(2);\n```\n\n也可以只赋值其中一项：\n\n```ts\nlet tom: [string, number];\ntom[0] = 'Tom';\n```\n\n但是当直接对元组类型的变量进行初始化或者赋值的时候，需要提供所有元组类型中指定的项。\n\n```ts\nlet tom: [string, number];\ntom = ['Tom', 25];\n```\n\n```ts\nlet tom: [string, number];\ntom = ['Tom'];\n\n// Property '1' is missing in type '[string]' but required in type '[string, number]'.\n```\n\n## 越界的元素\n\n当添加越界的元素时，它的类型会被限制为元组中每个类型的联合类型：\n\n```ts\nlet tom: [string, number];\ntom = ['Tom', 25];\ntom.push('male');\ntom.push(true);\n\n// Argument of type 'true' is not assignable to parameter of type 'string | number'.\n```\n\n## 参考\n\n- [Basic Types # Tuple](http://www.typescriptlang.org/docs/handbook/basic-types.html#tuple)（[中文版](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Basic%20Types.html#元组-tuple)）\n" }, { "path": "advanced/type-aliases.md", "content": "# 类型别名\n\n类型别名用来给一个类型起个新名字。\n\n## 简单的例子\n\n```ts\ntype Name = string;\ntype NameResolver = () => string;\ntype NameOrResolver = Name | NameResolver;\nfunction getName(n: NameOrResolver): Name {\n if (typeof n === 'string') {\n return n;\n } else {\n return n();\n }\n}\n```\n\n上例中，我们使用 `type` 创建类型别名。\n\n类型别名常用于联合类型。\n\n## 参考\n\n- [Advanced Types # Type Aliases](http://www.typescriptlang.org/docs/handbook/advanced-types.html#type-aliases)（[中文版](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Advanced%20Types.html#类型别名)）\n" }, { "path": "basics/README.md", "content": "# 基础\n\n本部分介绍了 TypeScript 中的常用类型和一些基本概念，旨在让大家对 TypeScript 有个初步的理解。具体内容包括：\n\n- [原始数据类型](primitive-data-types.md)\n- [任意值](any.md)\n- [类型推论](type-inference.md)\n- [联合类型](union-types.md)\n- [对象的类型——接口](type-of-object-interfaces.md)\n- [数组的类型](type-of-array.md)\n- [函数的类型](type-of-function.md)\n- [类型断言](type-assertion.md)\n- [声明文件](declaration-files.md)\n- [内置对象](built-in-objects.md)\n" }, { "path": "basics/any.md", "content": "# 任意值\n\n任意值（Any）用来表示允许赋值为任意类型。\n\n## 什么是任意值类型\n\n如果是一个普通类型，在赋值过程中改变类型是不被允许的：\n\n```ts\nlet myFavoriteNumber: string = 'seven';\nmyFavoriteNumber = 7;\n\n// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.\n```\n\n但如果是 `any` 类型，则允许被赋值为任意类型。\n\n```ts\nlet myFavoriteNumber: any = 'seven';\nmyFavoriteNumber = 7;\n```\n\n## 任意值的属性和方法\n\n在任意值上访问任何属性都是允许的：\n\n```ts\nlet anyThing: any = 'hello';\nconsole.log(anyThing.myName);\nconsole.log(anyThing.myName.firstName);\n```\n\n也允许调用任何方法：\n\n```ts\nlet anyThing: any = 'Tom';\nanyThing.setName('Jerry');\nanyThing.setName('Jerry').sayHello();\nanyThing.myName.setFirstName('Cat');\n```\n\n可以认为，**声明一个变量为任意值之后，对它的任何操作，返回的内容的类型都是任意值**。\n\n## 未声明类型的变量\n\n**变量如果在声明的时候，未指定其类型，那么它会被识别为任意值类型**：\n\n```ts\nlet something;\nsomething = 'seven';\nsomething = 7;\n\nsomething.setName('Tom');\n```\n\n等价于\n\n```ts\nlet something: any;\nsomething = 'seven';\nsomething = 7;\n\nsomething.setName('Tom');\n```\n\n## 参考\n\n- [Basic Types # Any](http://www.typescriptlang.org/docs/handbook/basic-types.html#any)（[中文版](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Basic%20Types.html#任意值)）\n" }, { "path": "basics/built-in-objects.md", "content": "# 内置对象\n\nJavaScript 中有很多[内置对象][]，它们可以直接在 TypeScript 中当做定义好了的类型。\n\n内置对象是指根据标准在全局作用域（Global）上存在的对象。这里的标准是指 ECMAScript 和其他环境（比如 DOM）的标准。\n\n## ECMAScript 的内置对象\n\nECMAScript 标准提供的内置对象有：\n\n`Boolean`、`Error`、`Date`、`RegExp` 等。\n\n我们可以在 TypeScript 中将变量定义为这些类型：\n\n```ts\nlet b: Boolean = new Boolean(1);\nlet e: Error = new Error('Error occurred');\nlet d: Date = new Date();\nlet r: RegExp = /[a-z]/;\n```\n\n更多的内置对象，可以查看 [MDN 的文档][内置对象]。\n\n而他们的定义文件，则在 [TypeScript 核心库的定义文件][]中。\n\n## DOM 和 BOM 的内置对象\n\nDOM 和 BOM 提供的内置对象有：\n\n`Document`、`HTMLElement`、`Event`、`NodeList` 等。\n\nTypeScript 中会经常用到这些类型：\n\n```ts\nlet body: HTMLElement = document.body;\nlet allDiv: NodeList = document.querySelectorAll('div');\ndocument.addEventListener('click', function(e: MouseEvent) {\n // Do something\n});\n```\n\n它们的定义文件同样在 [TypeScript 核心库的定义文件][]中。\n\n## TypeScript 核心库的定义文件\n\n[TypeScript 核心库的定义文件][]中定义了所有浏览器环境需要用到的类型，并且是预置在 TypeScript 中的。\n\n当你在使用一些常用的方法的时候，TypeScript 实际上已经帮你做了很多类型判断的工作了，比如：\n\n```ts\nMath.pow(10, '2');\n\n// index.ts(1,14): error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.\n```\n\n上面的例子中，`Math.pow` 必须接受两个 `number` 类型的参数。事实上 `Math.pow` 的类型定义如下：\n\n```ts\ninterface Math {\n /**\n * Returns the value of a base expression taken to a specified power.\n * @param x The base value of the expression.\n * @param y The exponent value of the expression.\n */\n pow(x: number, y: number): number;\n}\n```\n\n再举一个 DOM 中的例子：\n\n```ts\ndocument.addEventListener('click', function(e) {\n console.log(e.targetCurrent);\n});\n\n// index.ts(2,17): error TS2339: Property 'targetCurrent' does not exist on type 'MouseEvent'.\n```\n\n上面的例子中，`addEventListener` 方法是在 TypeScript 核心库中定义的：\n\n```ts\ninterface Document extends Node, GlobalEventHandlers, NodeSelector, DocumentEvent {\n addEventListener(type: string, listener: (ev: MouseEvent) => any, useCapture?: boolean): void;\n}\n```\n\n所以 `e` 被推断成了 `MouseEvent`，而 `MouseEvent` 是没有 `targetCurrent` 属性的，所以报错了。\n\n注意，TypeScript 核心库的定义中不包含 Node.js 部分。\n\n## 用 TypeScript 写 Node.js\n\nNode.js 不是内置对象的一部分，如果想用 TypeScript 写 Node.js，则需要引入第三方声明文件：\n\n```bash\nnpm install @types/node --save-dev\n```\n\n## 参考\n\n- [内置对象][]\n- [TypeScript 核心库的定义文件][]\n\n[内置对象]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects\n[TypeScript 核心库的定义文件]: https://github.com/Microsoft/TypeScript/tree/master/src/lib\n" }, { "path": "basics/declaration-files.md", "content": "# 声明文件\n\n当使用第三方库时，我们需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能。\n\n## 新语法索引\n\n由于本章涉及大量新语法，故在本章开头列出新语法的索引，方便大家在使用这些新语法时能快速查找到对应的讲解：\n\n- [`declare var`](#declare-var) 声明全局变量\n- [`declare function`](#declare-function) 声明全局方法\n- [`declare class`](#declare-class) 声明全局类\n- [`declare enum`](#declare-enum) 声明全局枚举类型\n- [`declare namespace`](#declare-namespace) 声明（含有子属性的）全局对象\n- [`interface` 和 `type`](#interface-和-type) 声明全局类型\n- [`export`](#export) 导出变量\n- [`export namespace`](#export-namespace) 导出（含有子属性的）对象\n- [`export default`](#export-default) ES6 默认导出\n- [`export =`](#export-1) commonjs 导出模块\n- [`export as namespace`](#export-as-namespace) UMD 库声明全局变量\n- [`declare global`](#declare-global) 扩展全局变量\n- [`declare module`](#declare-module) 扩展模块\n- [`/// `](#san-xie-xian-zhi-ling) 三斜线指令\n\n## 什么是声明语句\n\n假如我们想使用第三方库 jQuery，一种常见的方式是在 html 中通过 `\n // \n // \n // `\n // }}\n // />\n // ),\n gitalk: {\n clientID: '29aa4941759fc887ed4f',\n clientSecret: '33e355efdf3a1959624506a5d88311145208471b',\n repo: 'typescript-tutorial',\n owner: 'xcatliu',\n admin: ['xcatliu'],\n pagerDirection: 'first',\n },\n ga: {\n id: 'UA-45256157-14',\n },\n port: 8001,\n};\n" }, { "path": "pandoc-list.txt", "content": "README.md\nintroduction/README.md\nintroduction/what-is-typescript.md\nintroduction/get-typescript.md\nintroduction/hello-typescript.md\nbasics/README.md\nbasics/primitive-data-types.md\nbasics/any.md\nbasics/type-inference.md\nbasics/union-types.md\nbasics/type-of-object-interfaces.md\nbasics/type-of-array.md\nbasics/type-of-function.md\nbasics/type-assertion.md\nbasics/declaration-files.md\nbasics/built-in-objects.md\nadvanced/README.md\nadvanced/type-aliases.md\nadvanced/string-literal-types.md\nadvanced/tuple.md\nadvanced/enum.md\nadvanced/class.md\nadvanced/class-and-interfaces.md\nadvanced/generics.md\nadvanced/declaration-merging.md\nadvanced/further-reading.md\nengineering/README.md\nengineering/lint.md\nengineering/compiler-options.md\nthanks/README.md\n" }, { "path": "pandoc-metadata.txt", "content": "---\ntitle: TypeScript 入门教程\nauthor: xcatliu\ndescription: 从 JavaScript 程序员的角度总结思考，循序渐进的理解 TypeScript\nlanguage: zh-CN\ncover-image: pandoc-cover.jpg\n...\n" }, { "path": "thanks/README.md", "content": "# 感谢\n\n- 感谢[创造和维护 TypeScript 的人们](https://github.com/Microsoft/TypeScript/graphs/contributors)，给我们带来了如此优秀的工具\n- 感谢 [@zhongsp](https://github.com/zhongsp/) 对[官方手册的翻译](https://zhongsp.gitbooks.io/typescript-handbook/content/index.html)，本书参考了大量他的翻译，能一直坚持跟进非常不容易\n- 感谢 [@阮一峰](http://www.ruanyifeng.com/home.html) 老师的 [ECMAScript 6 入门](http://es6.ruanyifeng.com/)，本书引用了多处 ES6 的知识\n\n最后，感谢你阅读完本书，希望你会有所收获。\n\n## 下一步\n\n- 在 [GitHub](https://github.com/xcatliu/typescript-tutorial) 上关注本书\n- 阅读[官方手册](http://www.typescriptlang.org/docs/handbook/basic-types.html)（[中文版](https://zhongsp.gitbooks.io/typescript-handbook/content/)）巩固知识\n- 阅读 [Project Configuration](http://www.typescriptlang.org/docs/handbook/tsconfig-json.html)（[中文版](https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/tsconfig.json.html)） 学习如何配置 TypeScript 工程\n- 查看[官方示例](http://www.typescriptlang.org/samples/index.html)，学习真实项目\n" } ]