• Typescript 3.0
    • 项目引用
    • 剩余参数和展开表达式里的元组
      • 带元组类型的剩余参数
      • 带有元组类型的展开表达式
      • 泛型剩余参数
        • 例子
      • 元组类型里的可选元素
        • 例子
      • 元组类型里的剩余元素
        • 例子
    • 新的unknown类型
      • 例子
    • 在JSX里支持defaultProps
      • 说明
        • defaultProps的确切类型
        • @types/React的改动
    • /// <reference lib="…" />指令
      • 例子

    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;
    2. declare function f3(x: number, y: string, z: boolean): void;
    3. const f2 = bind(f3, 42); // (y: string, z: boolean) => void
    4. const f1 = bind(f2, "hello"); // (z: boolean) => void
    5. const f0 = bind(f1, true); // () => void
    6. f3(42, "hello", true);
    7. f2("hello", true);
    8. f1(true);
    9. f0();

    上例的f2声明,类型推断可以推断出number[string, boolean]void做为TUV

    注意,如果元组类型是从参数序列中推断出来的,之后又扩展成参数列表,就像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. }
    4. const numbers: number[] = getArrayOfNumbers();
    5. const t1 = tuple("foo", 1, true); // [string, number, boolean]
    6. const t2 = tuple("bar", ...numbers); // [string, ...number[]]

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

    新的unknown类型

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

    例子

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

    在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. }
    4. export class Greet extends React.Component<Props> {
    5. render() {
    6. const { name } = this.props;
    7. return <div>Hello ${name.toUpperCase()}!</div>;
    8. }
    9. static defaultProps = { name: "world"};
    10. }
    11. // Type-checks! No type assertions needed!
    12. let el = <Greet />

    说明

    defaultProps的确切类型

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

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

    对于无状态的函数式组件(SFCs),使用ES2015默认的初始化器:

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

    @types/React的改动

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

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

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

    内置的lib文件的引用和tsconfig.json里的编译器选项"lib"相同(例如,使用lib="es2015"而不是lib="lib.es2015.d.ts"等)。

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

    例子

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

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