TypeScript 3.0

工程引用

TypeScript 3.0 引入了一个叫做工程引用的新概念。工程引用允许TypeScript工程依赖于其它TypeScript工程 - 特别要提的是允许tsconfig.json文件引用其它tsconfig.json文件。当指明了这些依赖后，就可以方便地将代码分割成单独的小工程，有助于TypeScript（以及周边的工具）了解构建顺序和输出结构。

TypeScript 3.0 还引入了一种新的tsc模式，即--build标记，它与工程引用同时运用可以加速构建TypeScript。

相关详情请阅读工程引用手册。

剩余参数和展开表达式里的元组

TypeScript 3.0 增加了支持以元组类型与函数参数列表进行交互的能力。 如下：

有了这些特性后，便有可能将转换函数和它们参数列表的高阶函数变为强类型的。

带元组类型的剩余参数

当剩余参数里有元组类型时，元组类型被扩展为离散参数序列。 例如，如下两个声明是等价的：

  1. declare function foo(...args: [number, string, boolean]): void;
  1. declare function foo(args_0: number, args_1: string, args_2: boolean): void;

带有元组类型的展开表达式

在函数调用中，若最后一个参数是元组类型的展开表达式，那么这个展开表达式相当于元组元素类型的离散参数序列。

因此，下面的调用都是等价的：

  1. const args: [number, string, boolean] = [42, "hello", true];
  2. foo(42, "hello", true);
  3. foo(args[0], args[1], args[2]);
  4. foo(...args);

泛型剩余参数

剩余参数允许带有泛型类型，这个泛型类型被限制为是一个数组类型，类型推断系统能够推断这类泛型剩余参数里的元组类型。这样就可以进行高阶捕获和展开部分参数列表:

例子

  1. declare function bind<T, U extends any[], V>(f: (x: T, ...args: U) => V, x: T): (...args: U) => V;
  3. declare function f3(x: number, y: string, z: boolean): void;
  5. const f2 = bind(f3, 42);  // (y: string, z: boolean) => void
  6. const f1 = bind(f2, "hello");  // (z: boolean) => void
  7. const f0 = bind(f1, true);  // () => void
  9. f3(42, "hello", true);
  10. f2("hello", true);
  11. f1(true);
  12. f0();

上例的f2声明，类型推断可以推断出number，[string, boolean]和void做为T，U和V。

注意，如果元组类型是从参数序列中推断出来的，之后又扩展成参数列表，就像U那样，原来的参数名称会被用在扩展中（然而，这个名字没有语义上的意义且是察觉不到的）。

元组类型里的可选元素

元组类型现在允许在其元素类型上使用?后缀，表示这个元素是可选的：

例子

  1. let t: [number, string?, boolean?];
  2. t = [42, "hello", true];
  3. t = [42, "hello"];
  4. t = [42];

在--strictNullChecks模式下，?修饰符会自动地在元素类型中包含undefined，类似于可选参数。

在元组类型的一个元素类型上使用?后缀修饰符来把它标记为可忽略的元素，且它右侧所有元素也同时带有了?修饰符。

当剩余参数推断为元组类型时，源码中的可选参数在推断出的类型里成为了可选元组元素。

带有可选元素的元组类型的length属性是表示可能长度的数字字面量类型的联合类型。 例如，[number, string?, boolean?]元组类型的length属性的类型是1 | 2 | 3。

元组类型里的剩余元素

元组类型里最后一个元素可以是剩余元素，形式为...X，这里X是数组类型。 剩余元素代表元组类型是开放的，可以有零个或多个额外的元素。 例如，[number, ...string[]]表示带有一个number元素和任意数量string类型元素的元组类型。

例子

  1. function tuple<T extends any[]>(...args: T): T {
  2.     return args;
  3. }
  5. const numbers: number[] = getArrayOfNumbers();
  6. const t1 = tuple("foo", 1, true);  // [string, number, boolean]
  7. const t2 = tuple("bar", ...numbers);  // [string, ...number[]]

这个带有剩余元素的元组类型的length属性类型是number。

新的unknown类型

TypeScript 3.0引入了一个顶级的unknown类型。 对照于any，unknown是类型安全的。 任何值都可以赋给unknown，但是当没有类型断言或基于控制流的类型细化时unknown不可以赋值给其它类型，除了它自己和any外。 同样地，在unknown没有被断言或细化到一个确切类型之前，是不允许在其上进行任何操作的。

例子

  1. // In an intersection everything absorbs unknown
  3. type T00 = unknown & null;  // null
  4. type T01 = unknown & undefined;  // undefined
  5. type T02 = unknown & null & undefined;  // null & undefined (which becomes never)
  6. type T03 = unknown & string;  // string
  7. type T04 = unknown & string[];  // string[]
  8. type T05 = unknown & unknown;  // unknown
  9. type T06 = unknown & any;  // any
  11. // In a union an unknown absorbs everything
  13. type T10 = unknown | null;  // unknown
  14. type T11 = unknown | undefined;  // unknown
  15. type T12 = unknown | null | undefined;  // unknown
  16. type T13 = unknown | string;  // unknown
  17. type T14 = unknown | string[];  // unknown
  18. type T15 = unknown | unknown;  // unknown
  19. type T16 = unknown | any;  // any
  21. // Type variable and unknown in union and intersection
  23. type T20<T> = T & {};  // T & {}
  24. type T21<T> = T | {};  // T | {}
  25. type T22<T> = T & unknown;  // T
  26. type T23<T> = T | unknown;  // unknown
  28. // unknown in conditional types
  30. type T30<T> = unknown extends T ? true : false;  // Deferred
  31. type T31<T> = T extends unknown ? true : false;  // Deferred (so it distributes)
  32. type T32<T> = never extends T ? true : false;  // true
  33. type T33<T> = T extends never ? true : false;  // Deferred
  35. // keyof unknown
  37. type T40 = keyof any;  // string | number | symbol
  38. type T41 = keyof unknown;  // never
  40. // Only equality operators are allowed with unknown
  42. function f10(x: unknown) {
  43.     x == 5;
  44.     x !== 10;
  45.     x >= 0;  // Error
  46.     x + 1;  // Error
  47.     x * 2;  // Error
  48.     -x;  // Error
  49.     +x;  // Error
  50. }
  52. // No property accesses, element accesses, or function calls
  54. function f11(x: unknown) {
  55.     x.foo;  // Error
  56.     x[5];  // Error
  57.     x();  // Error
  58.     new x();  // Error
  59. }
  61. // typeof, instanceof, and user defined type predicates
  63. declare function isFunction(x: unknown): x is Function;
  65. function f20(x: unknown) {
  66.     if (typeof x === "string" || typeof x === "number") {
  67.         x;  // string | number
  68.     }
  69.     if (x instanceof Error) {
  70.         x;  // Error
  71.     }
  72.     if (isFunction(x)) {
  73.         x;  // Function
  74.     }
  75. }
  77. // Homomorphic mapped type over unknown
  79. type T50<T> = { [P in keyof T]: number };
  80. type T51 = T50<any>;  // { [x: string]: number }
  81. type T52 = T50<unknown>;  // {}
  83. // Anything is assignable to unknown
  85. function f21<T>(pAny: any, pNever: never, pT: T) {
  86.     let x: unknown;
  87.     x = 123;
  88.     x = "hello";
  89.     x = [1, 2, 3];
  90.     x = new Error();
  91.     x = x;
  92.     x = pAny;
  93.     x = pNever;
  94.     x = pT;
  95. }
  97. // unknown assignable only to itself and any
  99. function f22(x: unknown) {
  100.     let v1: any = x;
  101.     let v2: unknown = x;
  102.     let v3: object = x;  // Error
  103.     let v4: string = x;  // Error
  104.     let v5: string[] = x;  // Error
  105.     let v6: {} = x;  // Error
  106.     let v7: {} | null | undefined = x;  // Error
  107. }
  109. // Type parameter 'T extends unknown' not related to object
  111. function f23<T extends unknown>(x: T) {
  112.     let y: object = x;  // Error
  113. }
  115. // Anything but primitive assignable to { [x: string]: unknown }
  117. function f24(x: { [x: string]: unknown }) {
  118.     x = {};
  119.     x = { a: 5 };
  120.     x = [1, 2, 3];
  121.     x = 123;  // Error
  122. }
  124. // Locals of type unknown always considered initialized
  126. function f25() {
  127.     let x: unknown;
  128.     let y = x;
  129. }
  131. // Spread of unknown causes result to be unknown
  133. function f26(x: {}, y: unknown, z: any) {
  134.     let o1 = { a: 42, ...x };  // { a: number }
  135.     let o2 = { a: 42, ...x, ...y };  // unknown
  136.     let o3 = { a: 42, ...x, ...y, ...z };  // any
  137. }
  139. // Functions with unknown return type don't need return expressions
  141. function f27(): unknown {
  142. }
  144. // Rest type cannot be created from unknown
  146. function f28(x: unknown) {
  147.     let { ...a } = x;  // Error
  148. }
  150. // Class properties of type unknown don't need definite assignment
  152. class C1 {
  153.     a: string;  // Error
  154.     b: unknown;
  155.     c: any;
  156. }

在JSX里支持defaultProps

TypeScript 2.9和之前的版本不支持在JSX组件里使用React的defaultProps声明。 用户通常不得不将属性声明为可选的，然后在render里使用非null的断言，或者在导出之前对组件的类型使用类型断言。

TypeScript 3.0在JSX命名空间里支持一个新的类型别名LibraryManagedAttributes。 这个助手类型定义了在检查JSX表达式之前在组件Props上的一个类型转换；因此我们可以进行定制：如何处理提供的props与推断props之间的冲突，推断如何映射，如何处理可选性以及不同位置的推断如何结合在一起。

我们可以利用它来处理React的defaultProps以及propTypes。

  1. export interface Props {
  2.     name: string;
  3. }
  5. export class Greet extends React.Component<Props> {
  6.     render() {
  7.         const { name } = this.props;
  8.         return <div>Hello {name.toUpperCase()}!</div>;
  9.     }
  10.     static defaultProps = { name: "world"};
  11. }
  13. // Type-checks! No type assertions needed!
  14. let el = <Greet />

说明

defaultProps的确切类型

默认类型是从defaultProps属性的类型推断而来。如果添加了显式的类型注释，比如static defaultProps: Partial<Props>;，编译器无法识别哪个属性具有默认值（因为defaultProps类型包含了Props的所有属性）。

使用static defaultProps: Pick<Props, "name">;做为显式的类型注释，或者不添加类型注释。

对于函数组件（之前叫做SFC），使用ES2015默认的初始化器：

  1. function Greet({ name = "world" }: Props) {
  2.     return <div>Hello {name.toUpperCase()}!</div>;
  3. }

@types/React的改动

仍需要在@types/React里JSX命名空间上添加LibraryManagedAttributes定义。

/// <reference lib="..." />指令

TypeScript增加了一个新的三斜线指令（/// <reference lib="name" />），允许一个文件显式地包含一个已知的内置_lib_文件。

内置的_lib_文件的引用和_tsconfig.json_里的编译器选项"lib"相同（例如，使用lib="es2015"而不是lib="lib.es2015.d.ts"等）。

当你写的声明文件依赖于内置类型时，例如DOM APIs或内置的JS运行时构造函数如Symbol或Iterable，推荐使用三斜线引用指令。之前，这个.d.ts文件不得不添加重覆的类型声明。

例子

在某个文件里使用 /// <reference lib="es2017.string" />等同于指定--lib es2017.string编译选项。

  1. /// <reference lib="es2017.string" />
  3. "foo".padStart(4);