TypeScript 1.6

    TypeScript 1.6 引入了新的 .tsx 文件扩展名. 这一扩展名一方面允许 TypeScript 文件中的 JSX 语法, 一方面将 as 运算符作为默认的类型转换方式 (避免 JSX 表达式和 TypeScript 前置类型转换运算符之间的歧义). 比如:

    使用 React

    使用 React 及 JSX 支持, 你需要使用 . 这些类型定义了 JSX 命名空间, 以便 TypeScript 能正确地检查 React 的 JSX 表达式. 比如:

    1. /// <reference path="react.d.ts" />
    3. interface Props {
    4.   name: string;
    5. }
    7. class MyComponent extends React.Component<Props, {}> {
    8.   render() {
    9.     return <span>{this.props.foo}</span>
    10.   }
    11. }
    13. <MyComponent name="bar" />; // 没问题
    14. <MyComponent name={0} />; // 错误, `name` 不是一个字符串

    使用其他 JSX 框架

    JSX 元素的名称和属性是根据 JSX 命名空间来检验的. 请查看 页面了解如何为自己的框架定义 JSX 命名空间.

    TypeScript 支持两种 JSX 模式: preserve (保留) 和 react.

    • preserve 模式将会在输出中保留 JSX 表达式, 使之后的转换步骤可以处理. 并且输出的文件扩展名为 .jsx.
    • react 模式将会生成 React.createElement, 不再需要再通过 JSX 转换即可运行, 输出的文件扩展名为 .js.

    查看 JSX 页面了解更多 JSX 在 TypeScript 中的使用.

    交叉类型 (intersection types)

    TypeScript 1.6 引入了交叉类型作为联合类型 (union types) 逻辑上的补充. 联合类型 A | B 表示一个类型为 A 或 B 的实体, 而交叉类型 A & B 表示一个类型同时为 A 或 B 的实体.

    例子

    1. function extend<T, U>(first: T, second: U): T & U {
    2.     let result = <T & U> {};
    3.     for (let id in first) {
    4.         result[id] = first[id];
    5.     }
    6.     for (let id in second) {
    7.         if (!result.hasOwnProperty(id)) {
    8.             result[id] = second[id];
    9.         }
    10.     }
    11.     return result;
    12. }
    14. var x = extend({ a: "hello" }, { b: 42 });
    15. var s = x.a;
    16. var n = x.b;
    1. type LinkedList<T> = T & { next: LinkedList<T> };
    3. interface Person {
    4.     name: string;
    5. }
    7. var people: LinkedList<Person>;
    8. var s = people.name;
    9. var s = people.next.name;
    10. var s = people.next.next.name;
    11. var s = people.next.next.next.name;
    12. interface A { a: string }
    13. interface B { b: string }
    14. interface C { c: string }
    16. var abc: A & B & C;
    17. abc.a = "hello";
    18. abc.b = "hello";
    19. abc.c = "hello";

    查看 了解更多.

    本地类型声明

    本地的类, 接口, 枚举和类型别名现在可以在函数声明中出现. 本地类型为块级作用域, 与 let 和 const 声明的变量类似. 比如说:

    1. function f() {
    2.     if (true) {
    3.         interface T { x: number }
    4.         let v: T;
    5.         v.x = 5;
    6.     else {
    7.         interface T { x: string }
    8.         let v: T;
    9.         v.x = "hello";
    10.     }
    11. }

    推导出的函数返回值类型可能在函数内部声明的. 调用函数的地方无法引用到这样的本地类型, 但是它当然能从类型结构上匹配. 比如:

    1. interface Point {
    3.     y: number;
    4. }
    6. function getPointFactory(x: number, y: number) {
    7.     class P {
    8.         x = x;
    9.         y = y;
    10.     }
    11.     return P;
    12. }
    14. var PointZero = getPointFactory(0, 0);
    15. var PointOne = getPointFactory(1, 1);
    16. var p1 = new PointZero();
    17. var p2 = new PointZero();
    18. var p3 = new PointOne();

    类表达式

    TypeScript 1.6 增加了对 ES6 类表达式的支持. 在一个类表达式中, 类的名称是可选的, 如果指明, 作用域仅限于类表达式本身. 这和函数表达式可选的名称类似. 在类表达式外无法引用其实例类型, 但是自然也能够从类型结构上匹配. 比如:

    1. let Point = class {
    2.     constructor(public x: number, public y: number) { }
    3.     public length() {
    4.         return Math.sqrt(this.x * this.x + this.y * this.y);
    5.     }
    6. };
    7. var p = new Point(3, 4);  // p has anonymous class type
    8. console.log(p.length());

    继承表达式

    TypeScript 1.6 增加了对类继承任意值为一个构造函数的表达式的支持. 这样一来内建的类型也可以在类的声明中被继承.

    extends 语句过去需要指定一个类型引用, 现在接受一个可选类型参数的表达式. 表达式的类型必须为有至少一个构造函数签名的构造函数, 并且需要和 extends 语句中类型参数数量一致. 匹配的构造函数签名的返回值类型是类实例类型继承的基类型. 如此一来, 这使得普通的类和与类相似的表达式可以在 extends 语句中使用.

    一些例子:

    1. // 继承内建类
    3. class MyArray extends Array<number> { }
    4. class MyError extends Error { }
    6. // 继承表达式类
    8. class ThingA {
    9.     getGreeting() { return "Hello from A"; }
    10. }
    12. class ThingB {
    13.     getGreeting() { return "Hello from B"; }
    14. }
    16. interface Greeter {
    17.     getGreeting(): string;
    18. }
    20. interface GreeterConstructor {
    21.     new (): Greeter;
    22. }
    24. function getGreeterBase(): GreeterConstructor {
    25.     return Math.random() >= 0.5 ? ThingA : ThingB;
    26. }
    28. class Test extends getGreeterBase() {
    29.     sayHello() {
    30.         console.log(this.getGreeting());
    31.     }
    32. }

    TypeScript 1.6 为类和它们的方法增加了 abstract 关键字. 一个抽象类允许没有被实现的方法, 并且不能被构造.

    例子

    1. abstract class Base {
    2.     abstract getThing(): string;
    3.     getOtherThing() { return 'hello'; }
    4. }
    6. let x = new Base(); // 错误, 'Base' 是抽象的
    8. // 错误, 必须也为抽象类, 或者实现 'getThing' 方法
    9. class Derived1 extends Base { }
    11. class Derived2 extends Base {
    12.     getThing() { return 'hello'; }
    13.     foo() {
    14.         super.getThing();// 错误: 不能调用 'super' 的抽象方法
    15.     }
    16. }
    18. var y: Base = new Derived2(); // 同样正确
    19. y.getThing(); // 正确
    20. y.getOtherThing(); // 正确

    泛型别名

    TypeScript 1.6 中, 类型别名支持泛型. 比如:

    1. type Lazy<T> = T | (() => T);
    3. var s: Lazy<string>;
    4. s = "eager";
    5. s = () => "lazy";
    7. interface Tuple<A, B> {
    8.     a: A;
    9.     b: B;
    12. type Pair<T> = Tuple<T, T>;

    更严格的对象字面量赋值检查

    为了能发现多余或者错误拼写的属性, TypeScript 1.6 使用了更严格的对象字面量检查. 确切地说, 在将一个新的对象字面量赋值给一个变量, 或者传递给类型非空的参数时, 如果对象字面量的属性在目标类型中不存在, 则会视为错误.

    1. var x: { foo: number };
    2. x = { foo: 1, baz: 2 };  // 错误, 多余的属性 `baz`
    4. var y: { foo: number, bar?: number };
    5. y = { foo: 1, baz: 2 };  // 错误, 多余或者拼错的属性 `baz`

    一个类型可以通过包含一个索引签名来显示指明未出现在类型中的属性是被允许的.

    ES6 生成器 (generators)

    TypeScript 1.6 添加了对于 ES6 输出的生成器支持.

    1. function *g(): Iterable<string> {
    2.     for (var i = 0; i < 100; i++) {
    3.         yield ""; // string 可以赋值给 string
    4.     }
    5.     yield * otherStringGenerator(); // otherStringGenerator 必须可遍历, 并且元素类型需要可赋值给 string
    6. }

    没有标注类型的生成器函数会有自动推演的类型. 在下面的例子中, 类型会由 yield 语句推演出来:

    1. function *g() {
    2.     for (var i = 0; i < 100; i++) {
    3.         yield ""; // 推导出 string
    4.     }
    5.     yield * otherStringGenerator(); // 推导出 otherStringGenerator 的元素类型
    6. }

    对 async (异步) 函数的试验性支持

    TypeScript 1.6 增加了编译到 ES6 时对 async 函数试验性的支持. 异步函数会执行一个异步的操作, 在等待的同时不会阻塞程序的正常运行. 这是通过与 ES6 兼容的 Promise 实现完成的, 并且会将函数体转换为支持在等待的异步操作完成时继续的形式.

    由 async 标记的函数或方法被称作异步函数. 这个标记告诉了编译器该函数体需要被转换, 关键字 await 则应该被当做一个一元运算符, 而不是标示符. 一个异步函数必须返回类型与 Promise 兼容的值. 返回值类型的推断只能在有一个全局的, 与 ES6 兼容的 Promise 类型时使用.

    例子

    1. var p: Promise<number> = /* ... */;
    2. async function fn(): Promise<number> {
    3.   var i = await p; // 暂停执行直到 'p' 得到结果. 'i' 的类型为 "number"
    4.   return 1 + i;
    5. }
    7. var a = async (): Promise<number> => 1 + await p; // 暂停执行.
    8. var a = async () => 1 + await p; // 暂停执行. 使用 --target ES6 选项编译时返回值类型被推断为 "Promise<number>"
    9. var fe = async function(): Promise<number> {
    10.   var i = await p; // 暂停执行知道 'p' 得到结果. 'i' 的类型为 "number"
    11.   return 1 + i;
    12. }
    14. class C {
    15.   async m(): Promise<number> {
    16.     var i = await p; // 暂停执行知道 'p' 得到结果. 'i' 的类型为 "number"
    17.     return 1 + i;
    18.   }
    20.   async get p(): Promise<number> {
    21.     var i = await p; // 暂停执行知道 'p' 得到结果. 'i' 的类型为 "number"
    22.     return 1 + i;
    23.   }
    24. }

    由于并不算严格意义上的语言变化[2], 每天的新版本可以使用如下命令安装获得:

    1. npm install -g typescript@next

    对模块解析逻辑的调整

    从 1.6 开始, TypeScript 编译器对于 “commonjs” 的模块解析会使用一套不同的规则. 这些规则 尝试模仿 Node 查找模块的过程. 这就意味着 node 模块可以包含它的类型信息, 并且 TypeScript 编译器可以找到这些信息. 不过用户可以通过使用 --moduleResolution 命令行选项覆盖模块解析规则. 支持的值有:

    • ‘classic’ - TypeScript 1.6 以前的编译器使用的模块解析规则
    • ‘node’ - 与 node 相似的模块解析

    合并外围类和接口的声明

    外围类的实例类型可以通过接口声明来扩展. 类构造函数对象不会被修改. 比如说:

    1. declare class Foo {
    2.     public x : number;
    3. }
    5. interface Foo {
    6.     y : string;
    7. }
    9. function bar(foo : Foo)  {
    10.     foo.x = 1; // 没问题, 在类 Foo 中有声明
    11.     foo.y = "1"; // 没问题, 在接口 Foo 中有声明
    12. }

    用户定义的类型收窄函数

    TypeScript 1.6 增加了一个新的在 if 语句中收窄变量类型的方式, 作为对 typeof 和 instanceof 的补充. 用户定义的类型收窄函数的返回值类型标注形式为 x is T, 这里 x 是函数声明中的形参, T 是任何类型. 当一个用户定义的类型收窄函数在 if 语句中被传入某个变量执行时, 该变量的类型会被收窄到 T.

    例子

    tsconfig.json 对 exclude 属性的支持

    一个没有写明 files 属性的 tsconfig.json 文件 (默认会引用所有子目录下的 *.ts 文件) 现在可以包含一个 exclude 属性, 指定需要在编译中排除的文件或者目录列表. exclude 属性必须是一个字符串数组, 其中每一个元素指定对应的一个文件或者文件夹名称对于 tsconfig.json 文件所在位置的相对路径. 举例来说:

    1. {
    2.     "compilerOptions": {
    3.         "out": "test.js"
    4.     },
    5.     "exclude": [
    6.         "node_modules",
    7.         "test.ts",
    8.         "utils/t2.ts"
    9.     ]
    10. }

    exclude 列表不支持通配符. 仅仅可以是文件或者目录的列表.