TypeScript 3.4 发布

2019年4月1日09:51:30 发表评论

TypeScript 3.4 发布了,此版本主要更新内容如下:

TypeScript 3.4 发布

 

使用 --incremental flag 加快后续构建

TypeScript 3.4 引入了一个名为--incremental的新 flag,它会提醒 TypeScript 保存上一次编译中有关项目图的信息。这样下次 TypeScript 调用--incremental时,它将使用该信息以最低的成本来进行类型检查。

关于此特性,我们此前已经具体报导过,查看:引入--incrementalflag 以更快地构建后续版本

 

泛型函数的高阶类型推导

此版本在推导方面有一些改进,其中一大亮点是涉及从其它泛型函数推导类型的函数。

考虑以下片段:

  1. function compose<A, B, C>(f: (arg: A) => B, g: (arg: B) => C): (arg: A) => C {
  2.     return x => g(f(x));
  3. }

compose 接受其它两个函数:

  • f 接受类型 A 的一些参数并返回类型 B 的值
  • g 接受类型 f 返回的类型 B 的参数,并返回类型 C 的值

之后 compose 返回一个以 f 为参数的 g 函数,在调用此函数时,TypeScript 将尝试通过称为类型参数推导的方式计算出 A、B 和 C 的类型,这通常很有效:

  1. interface Person {
  2.     name: string;
  3.     age: number;
  4. }
  5. function getDisplayName(p: Person) {
  6.     return p.name.toLowerCase();
  7. }
  8. function getLength(s: string) {
  9.     return s.length;
  10. }
  11. // has type '(p: Person) => number'
  12. const getDisplayNameLength = compose(
  13.     getDisplayName,
  14.     getLength,
  15. );
  16. // works and returns the type 'number'
  17. getDisplayNameLength({ name: "Person McPersonface", age: 42 });

但是当传递其它泛型函数时,像 compose 这样的泛型函数无法生效,比如:

  1. interface Box<T> {
  2.     value: T;
  3. }
  4. function makeArray<T>(x: T): T[] {
  5.     return [x];
  6. }
  7. function makeBox<U>(value: U): Box<U> {
  8.     return { value };
  9. }
  10. // has type '(arg: {}) => Box<{}[]>'
  11. const makeBoxedArray = compose(
  12.     makeArray,
  13.     makeBox,
  14. )
  15. makeBoxedArray("hello!").value[0].toUpperCase();
  16. //                                ~~~~~~~~~~~
  17. // error: Property 'toUpperCase' does not exist on type '{}'.

这其中会出现推导出错。现在 TypeScript 3.4 在推导返回类型为函数的泛型函数的参数类型时,将根据需要将泛型函数参数中的类型参数传播到生成的函数类型中。也就是说,现在不生成:

  1. (arg: {}) => Box<{}[]>

而是生成:

  1. <T>(arg: T) => Box<T[]>

 

ReadonlyArray 和 readonly 元组的改进

TypeScript 3.4 中使用只读数组类型变得更加容易。

ReadonlyArray 类型描述了只能读取的数组,任何引用 ReadonlyArray 的变量都不能增或删,也不能在替换数组元素。

TypeScript 3.4 为 ReadonlyArray 引入了一种新的数组类型只读修饰符 readonly,简化了对数组只读的限定:

  1. function foo(arr: readonly string[]) {
  2.     arr.slice();        // okay
  3.     arr.push("hello!"); // error!
  4. }

此外,可以使用 readonly 关键字为任何元组类型添加前缀,使其成为只读元组,就像上边说的可以使用数组简写语法一样:

  1. function foo(pair: readonly [string, string]) {
  2.     console.log(pair[0]);   // okay
  3.     pair[1] = "hello!";     // error
  4. }

 

const 断言

TypeScript 3.4 引入了一个名为 const 断言的文字值结构,它的语法是一个类型断言,用 const 代替类型。

  1. // Type '10'
  2. let x = 10 as const;
  3. // Type 'readonly [10, 20]'
  4. let y = [10, 20] as const;
  5. // Type '{ readonly text: "hello" }'
  6. let z = { text: "hello" } as const;

此功能意味着一般情况下可以省略原本仅用于提示编译器不可变性的类型:

  1. // Works with no types referenced or declared.
  2. // We only needed a single const assertion.
  3. function getShapes() {
  4.     let result = [
  5.         { kind: "circle", radius: 100, },
  6.         { kind: "square", sideLength: 50, },
  7.     ] as const;
  8.     return result;
  9. }
  10. for (const shape of getShapes()) {
  11.     // Narrows perfectly!
  12.     if (shape.kind === "circle") {
  13.         console.log("Circle radius", shape.radius);
  14.     }
  15.     else {
  16.         console.log("Square side length", shape.sideLength);
  17.     }
  18. }

 

globalThis 类型检查

在全局范围内访问或声明值有时会非常困难,TypeScript 3.4 支持 ECMAScript 新全局变量 globalThis 类型检查。globalThis 提供了一种访问全局范围的标准方法,可以在不同的环境中使用。

  1. // in a global file:
  2. var abc = 100;
  3. // Refers to 'abc' from above.
  4. globalThis.abc = 200;

用 let 和 const 声明的全局变量不会出现在 globalThis 上:

  1. let answer = 42;
  2. // error! Property 'answer' does not exist on 'typeof globalThis'.
  3. globalThis.answer = 333333;

 

将参数转换为析构对象

有时参数列表会显得笨重,比如以下例子,调用者很容易混淆给定的参数顺序。:

  1. function updateOptions(
  2.     hue?: number,
  3.     saturation?: number,
  4.     brightness?: number,
  5.     positionX?: number,
  6.     positionY?: number,
  7.     positionZ?: number,) {
  8.     // ....
  9. }

常见的 JavaScript 模式是使用“选项对象”,以便明确命名每个选项,并且顺序无关紧要。这模拟了其它语言称为“命名参数”的功能:

  1. interface Options {
  2.     hue?: number,
  3.     saturation?: number,
  4.     brightness?: number,
  5.     positionX?: number,
  6.     positionY?: number,
  7.     positionZ?: number,
  8. }
  9. function updateOptions(options: Options = {}) {
  10.     // ....
  11. }

TypeScript 3.4 中实现了一种重构,将现有函数转换为使用这种“命名参数”模式:

TypeScript 3.4 发布

在存在多个参数的情况下,TypeScript 会提供重构以将参数列表转换为单个析构对象。

更多更具体的更新内容查看发布公告

此外官方还透露了下一个版本 3.5 的一些关键亮点,可能会包括 JavaScript 项目的 .d.ts 文件,以及一些编辑器生产力功能。

©里维斯社,本站推荐使用的主机:阿里云腾讯云;本站推荐使用的WP主题:WordPress主题

晨会游戏

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: