TypeScript -- 如何处理第三方库的类型

原文地址

我们使用开发TypeScript项目的时候或多或少都要用到第三方库。一般常用的第三方库都有对应的类型文件，或者可以添加类型包。但是如果这个第三方库没有对应的类型文件可以用就会稍有麻烦。今天就来探讨一下这些都是怎么处理的。

第一种：第三方库是TypeScript开发的

这是最好的情况，自带类型。使用TypeScript开发的库在发到npm之前就编译为JS了，这样可以直接在浏览器和node环境下运行。同时，在内部使用呢的类型也一起打包发布到npm了。这些类型在index.d.ts文件，最终在node_modules下的项目目录里。

比如，react-content-loader是用TypeScript开发的，最终它的类型文件在node_modules/react-content-loader目录下。

这样的开发方式还有一个好处，那就是这些类型会和代码的变动同步。因为类型都是从实际的代码中编译得来的。

可惜并不是所有项目都是TypeScript开发的。遇到这样的库很多的好处都没有了，比如智能提示。。。那么应该怎么办呢。

第二种：第三方库有@types类型文件

很多第三方库不是用TypeScript开发的。这种情况可以使用DefinitelyTyped的方式类实现。有一个github库：DefnitelyTyped。这里就是用来存储类型文件的。所以第三方JS库的类型文件可以放在这里。比如React，可以用@types/react。styled-component可以用@types/styled-component。

这些类型都是社区维护的，也就是说使用这些库的人在维护这些库的类型。虽然不是完全的不可控，还是有人会review这些类型文件。但是，难免的是这些类型不能和库一起演进，进而出现类型和库不匹配的情况。毕竟库本身并不支持类型。

第三种：第三方库没有类型文件，也不是TypeScript开发的

TypeScript新建自己的类型非常简单。TypeScript默认的从node_modules目录的@types子目录，还有index.d.ts文件获取类型。也就是说你可以在你项目的任意位置建一个index.d.ts文件，添加类型。也可以在types目录下维护类型。

在index.d.ts文件里，你可以定义你项目里的所有类型。记得把类型定义在特定的模块或者namespace下。比如：

declare module 'babel-plugin-relay/macro' {
  export { graphql as default } from 'react-relay';
}

因为这个库要这么用：

import graphql from 'babel-plugin-relay/macro';

monkeypatch

有时候在DefinitelyType，也就是@types/some-lib的类型是错的。要搞定这个错误就只能用monkeypatch了。其实这样也不是一个好主意，最好是给DefinitlyType提一个pr。但是这样没那么快生效。所以只能走monkeypatch。

开头也是一样，新建一个index.d.ts文件来存放某个库的类型。在这个文件里声明你要处理的模块或者namespace。然后在这个模块里新的类型。然后，你要覆盖掉错误的类型，你要先import以前的类型。比如现在有@testing-library/react-hooks。

// inside types/testing-library__react-hooks/index.d.ts
import "@testing-library/react-hooks"

declare module "@testing-library/react-hooks" {
  interface RenderHookResult {
    // This function is not included in the typings as of 3.2.1
    wait(
      callback: (...args: any[]) => any,
      options?: { timeout?: number; suppressErrors?: boolean },
    ): Promise<void>
  }
}

现在@testing-library/react-hooks不仅包含了原始的类型，也包含了新方法的类型定义。

最后

第三方类型非常重要，本文也说明了我们项目里的类型是如何处理的。一个稳定，与时俱进的类型是选择第三方库的重要指标，因为准确的类型可以极大的帮助开发。如果一个库没有类型定义，TypeScript也一样提供了一种机制来处理。