使用 typescript 注释 javascript 的小技巧

[pikou1995]

都已经用 ts 了，为什么还要保留 js 文件呢？实际上因为各种原因，把 js 文件改写成 ts 文件不太现实。这个时候为了享受 ts 的便利，于是我想到了这样的技巧。

这个方法需要编辑器支持 ts。 看看 ts 的官网，很可能你的编辑器已经支持了，我用的是 vscode。

TypeScript's editor integration supports JavaScript, so it's quite likely you're already using TypeScript under the hood.

背景

比如我最近参与的开源项目 mikecrittenden/shortkeys，是一个 Chrome 浏览器的扩展插件。项目是 js 开发的，里面使用了 Chrome 的 API。写的时候没有任何代码提示，查找文档很繁琐，而且参数很容易写错。

我们以 tabs.executeScript 为例，编辑器里面看起来是这样的：

查阅文档：

然后第二个参数 details 又是什么？太长我就不截图了，有兴趣可以点开看看。

技巧

使用开源类型包

我感觉很抓狂，感觉去搜搜 npm，结果真的有 @types/chrome。非常感谢 DefinitelyTyped 项目，维护了很多开源工具的类型，@types/ 开头的 npm 包都是这个项目发布的。

然后赶紧安装这个包，但是因为是 js 项目，vscode 没有主动加载 @types/chrome。使用 ts 的 Triple-Slash Directives 可以解决。

这样就舒服了，而且看其他人写的代码也更容易看懂，不用频繁去网站查阅文档。

使用自定义类型

这个项目还有个问题，因为多浏览器插件开发兼容的问题，没有使用 chrome 变量，而是使用 browser 变量，如果写 browser.tabs.executeScript是不会触发提示的，这时候就要自己定义了。

// browser.d.ts
declare const browser: typeof chrome;

其他 js 文件引入类型文件

ts 和 js 混合的项目

ts 项目很可能已经把所有的 ts 文件自动加载(include)了，除非你设置了 exclude。此时上面的例子就不需要每个 js 头都引入 /// <reference ... 了。

总结

但这始终是临时的做法，要想更好的使用ts带来的便利，最好还是全部用 ts 写吧。