TypeScript 3.3

改进调用联合类型时的行为

在 TypeScript 之前的版本中,将可调用类型联合后仅在它们具有相同的参数列表时才能被调用。

type Fruit = "apple" | "orange";
type Color = "red" | "orange";

type FruitEater = (fruit: Fruit) => number; // eats and ranks the fruit
type ColorConsumer = (color: Color) => string; // consumes and describes the colors

declare let f: FruitEater | ColorConsumer;

// Cannot invoke an expression whose type lacks a call signature.
//   Type 'FruitEater | ColorConsumer' has no compatible call signatures.ts(2349)
f("orange");

然而,上例中,FruitEaterColorConsumer应该都可以使用"orange",并返回numberstring

在 TypeScript 3.3 里,这个错误不存在了。

type Fruit = "apple" | "orange";
type Color = "red" | "orange";

type FruitEater = (fruit: Fruit) => number; // eats and ranks the fruit
type ColorConsumer = (color: Color) => string; // consumes and describes the colors

declare let f: FruitEater | ColorConsumer;

f("orange"); // It works! Returns a 'number | string'.

f("apple"); // error - Argument of type '"apple"' is not assignable to parameter of type '"orange"'.

f("red"); // error - Argument of type '"red"' is not assignable to parameter of type '"orange"'.

TypeScript 3.3,这些签名的参数被连结在一起构成了一个新的签名。

在上例中,fruitcolor连结在一起形成新的参数类型Fruit & Color
Fruit & Color("apple" | "orange") & ("red" | "orange")是一样的,都相当于("apple" & "red") | ("apple" & "orange") | ("orange" & "red") | ("orange" & "orange")
那些不可能交叉的会规约成never类型,只剩下"orange" & "orange",就是"orange"

警告

这个新行为仅在满足如下情形时生效:

  • 联合类型中最多有一个类型具有多个重载,
  • 联合类型中最多有一个类型有泛型签名。

这意味着,像map这种操作number[] | string[]的方法,还是不能调用,因为map是泛型函数。

另一方面,像forEach就可以调用,因为它不是泛型函数,但在noImplicitAny模式可能有些问题。

interface Dog {
  kind: "dog";
  dogProp: any;
}
interface Cat {
  kind: "cat";
  catProp: any;
}

const catOrDogArray: Dog[] | Cat[] = [];

catOrDogArray.forEach(animal => {
  //                ~~~~~~ error!
  // Parameter 'animal' implicitly has an 'any' type.
});

添加显式的类型信息可以解决。

interface Dog {
  kind: "dog";
  dogProp: any;
}
interface Cat {
  kind: "cat";
  catProp: any;
}

const catOrDogArray: Dog[] | Cat[] = [];
catOrDogArray.forEach((animal: Dog | Cat) => {
  if (animal.kind === "dog") {
    animal.dogProp;
    // ...
  } else if (animal.kind === "cat") {
    animal.catProp;
    // ...
  }
});

在合复合工程中增量地检测文件的变化 --build --watch

TypeScript 3.0 引入了一个新特性来按结构进行构建,称做“复合工程”。
目的是让用户能够把大型工程拆分成小的部分从而快速构建并保留项目结构。
正是因为支持了复合工程,TypeScript 可以使用--build模式仅重新编译部分工程和依赖。
可以把它当做工作内部构建的一种优化。

TypeScript 2.7 还引入了--watch构建模式,它使用了新的增量"builder"API。
背后的想法都是仅重新检查和生成改动过的文件或者是依赖项可能影响类型检查的文件。
可以把它们当成工程内部构建的优化。

在 3.3 之前,使用--build --watch构建复合工程不会真正地使用增量文件检测机制。
--build --watch模式下,一个工程里的一处改动会导致整个工程重新构建,而非仅检查那些真正受到影响的文件。

在 TypeScript 3.3 里,--build模式的--watch标记也会使用增量文件检测。
因此--build --watch模式下构建非常快。
我们的测试结果显示,这个功能会减少 50%到 75%的构建时间,相比于原先的--build --watch
具体数字在这这个pull request里,我们相信大多数复合工程用户会看到明显效果。

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 画漫画的程序员 GitHub仓库,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界