TypeScript 3.9 升级初体验

背景

下午我正在写技术分享的PPT， 突然看到一篇推送：

TypeScript 3.9 版本已经正式发布, ... , 收到来自微软团队的反馈意见，他们表示 TypeScript 3.9 的平均编译时长由 26 秒缩短至 10 秒左右。

编译性能提升巨大， 这么d 厉害？

必须马上安排！！!

然后， 我掉坑里了。

虽然过程艰险， 但是也找到了解决办法。

正文

本来以为很简单， 就是几行命令的事：

 yarn add typescript ts-loader 

安装完毕， 控制台报了错：

我就知道！每次升级都不会顺利...

作为踩坑达人， 本皮小蛋表示， 问题不大。

施展CV大法之后， 很快就找到了有同样问题的帖子：

就这？改个配置就能解决， 真好。

然后， 就加了这个配置： noEmit: true;

重新编译， 还是报错...

本皮表示有点烦， 这个问题，应该和typescript没有关系.

猜测是ts-loader的锅。

于是， 我就去扒了一下ts-loader的源码， 果然有所发现：

https://github.com/TypeStrong/ts-loader/blame/1b84fed767c0fbb41f3da8c8700fc21d69fda3d3/src/index.ts#line=185

应该就是这个outputText 为空导致的。

可是为什么这个输出为空呢， 报错提示中:

正常情况, .d.ts 这个文件不应该被编译, 里面只有一些声明和types定义。

怀着试一试的心情， 皮小蛋把这个文件改了名字：

以及修改了对应的文件名：

随便改动一个文件，再次编译，对比升级之前：

多少还是有点变化的。

经过尝试， 发现有两种办法是可以解决这个报错的：

• 1. 修改.d.ts后缀
• 1. 把这份.d.ts文件挪到外面去(不推荐)

但是改后缀这种方式，总归不太优雅， 就想着有没有更好的方式。

于是， 就是官方文档中找到了个奇怪的东东：

/// <reference path="..." />

文档描述：

The /// directive is the most common of this group. It serves as a declaration of dependency between files.

Triple-slash references instruct the compiler to include additional files in the compilation process.

They also serve as a method to order the output when using --out or --outFile. Files are emitted to the output file location in the same order as the input after preprocessing pass.

地址：https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html

这种写法， 很微软， 而且官方并没有提供一种可以 import 的方式， 这就比较尴尬了。。。

在这里没什么卵用。而且要这么用的话， 目测也需要把types 和 interface 分成两个文件.

接受不了， 还是该文件名吧..

结尾

经验证， 升级3.9 确实会有一些提升。

如果遇到和我类似的报错， 可以改文件后缀来解决。

如果你有更好的方式， 可以给我留言， 欢迎一起讨论。

以上。