为 React 组件添加 TypeScript typing 文件

ithinco

现在社区里有非常多 React 组件，而如果你在用 TypeScript 配合 React 开发，你可能会时不时感到失望，因为许多 React 组件都没有类型定义文件。不过不要紧，写 TypeScript 类型定义文件很简单，既然别人开发的组件让你节省了不少时间，也许你应该花点时间，为它们写个类型定义文件。

对我来说，我选择给 react-selectize 组件写类型定义文件。

下面我会解释怎么给开源 React 组件写类型定义文件，好让你也可以为某个项目做贡献。最后，我还会说一下在自己项目中添加类型定义文件和给开源项目添加的区别。

package.json 文件

添加类型定义文件最简单的方法是在 package.json 文件中加入：

{
  // ....
  "typings": "./dist/index.d.ts"

如上所示，我会假设这个包在部署时，会有个包含 index.d.ts 文件的文件夹。

如果 package.json 文件中没有对应的 typing 键，TypeScript 就会在包目录的根目录下寻找 index.d.ts 文件。

类型定义文件

现在回到 d.ts 文件本身。React 组件的类型定义方式如下：

import * as React from 'react';
declare class SimpleSelect extends React.Component<SimpleSelectProps, any> { 
// ...

首先解释下 declare 关键字的作用。d.ts 文件中不能有任何实现代码，只能包含类型定义，因此里面不能有类，但我们必须声明存在一个类，也就是上面的语句的含义了。

SimpleSelect 类扩展自 React.Component，我们用 TypeScript 的原型来声明 SimpleSelect 组件 props 的类型 SimpleSelectProps 及其 state 类型 any。

作为组件使用者，我们并不关心组件的 state，而只会用到该组件的接口即 props，因此我们声明 state 的类型是 any。

现在我们有了表示该组件所有可能性的接口的 SimpleSelectProps，如果组件文档里面给出了各属性的接受类型，那么恭喜你，否则就要去看源码了。

export interface SimpleSelectProps {
  autofocus?: boolean;
  cancelKeyboardEventOnSelection?: boolean;
  className?: string;
  createFromSearch?(items: OptionValue[], search: string): OptionValue;
  defaultValue?: OptionValue;
  delimiters?: [any];
  disabled?: boolean;
  // ...

如果某个属性并非必须，需要在属性名后加上 ? 号表示其为可选项。

就 react-selectize 这个组件来说，它有两个组件 SimpleSelect 和 MultipleSelect，因此没有 export default 语句，但如果只有一个组件的话，文件里就会用 export default。

declare class SimpleSelect extends React.Component<SimpleSelectProps, any> {
// ...
export default SimpleSelect;

就是这么简单。

为自己的项目添加类型定义文件

如果你只想给自己项目中在用的组件添加一些类型定义，不能或者不想修改原包，你可以在项目任何地方添加一个 .d.ts 文件，只要不是在被 tsconfig.json 排除的位置。

在下面的文件里，我们可以创建一个 react-selectize 包名相同的模块。

如果你想像下面一样使用组件：

import { SimpleSelect } from 'react-selectize';

就可以创建一个同名模块：

declare module 'react-selectize' {
  // type definitions goes here