如何正确声明一个 react + ts 组件包?

Question

组件

const MyComponent = () => {
  return <div>hi</div>;
};
export default MyComponent;

package.json

{
  "name": "my-library",
  "type": "module",
  "module": "./dist/main.es.js",
  "types": "./types/index.d.ts",
  "typings": "./types/index.d.ts",
  "exports": {
  ".": {
    "import": "./dist/main.es.js"
  }
},

index.d.ts

declare module "my-library";

使用

import DDD from "my-library";

export default function Demo() {
  return (
    <>
      <DDD />
    </>
  );
}

目前在使用的时候报错

Could not find a declaration file for module 'my-library'. '/my-library/dist/main.es.js' implicitly has an 'any' type.
  There are types at '/demo/node_modules/my-library/types/index.d.ts', but this result could not be resolved when respecting package.json "exports". The 'my-library' library may need to update its package.json or typings.

1 import DDD from "my-library";

如何在 index.d.ts 文件中正确声明这个组件

Answer 1

declare module "my-library" {
  import { FunctionComponent } from 'react';

  const MyComponent: FunctionComponent;

  export default MyComponent;
}

FunctionComponent 是 React 提供的类型，它表示一个函数组件。在这个声明文件中，我们声明 "my-library" 模块有一个默认导出，它是一个函数组件。

然后在你的 package.json 文件中，确保 "types" 和 "typings" 字段指向这个声明文件：

{
  "name": "my-library",
  "type": "module",
  "module": "./dist/main.es.js",
  "types": "./index.d.ts",
  "typings": "./index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/main.es.js"
    }
  }
}

这样，当其他 TypeScript 项目使用 "my-library" 模块时，TypeScript 就会找到这个声明文件，知道这个模块提供了一个默认导出，它是一个函数组件，然后就能进行类型检查了。