Question

我正在用TypeScript构建React组件库，并希望允许用户为我的库提供类型定义。就是我希望他们能够使用以下命令导入我的代码：

import { MyComponent } from 'my-component-lib';

代替

const { MyComponent } = require('my-component-lib');

第一个将包含正确的键入，而第二个将仅是any。使用节点样式导入，代码中的所有内容都可以正常工作，并且可以像这样使用组件：

...
// node-style import
const { MyComponent } = require('my-component-lib');
// the same in both examples
export class App extends React.Component {
    ...
    render() {
        return (<MyComponent myprop="..." myflag/>)
    }
    ...
}
...

此代码将生成并按预期运行（显然在另一个文件中还有更多挂载）。
有趣的是，使用TypeScript样式的导入，即：

// TypeScript-style import
import { MyComponent } from 'my-component-lib';
// the same in both examples
export class App extends React.Component { ... }

...导致错误

JSX element type 'MyComponent' is not a constructor function for JSX elements.
Type 'MyComponent' is missing the following properties from type 'ElementClass': context, forceUpdate, props, state, refs  TS2605

但是，我的类型定义（dist/components/MyComponent.d.ts）包含：

export declare class MyComponent extends React.Component<MyProps, MyState> { ... }

我仅用tsc命令来构建我的图书馆。
我在调用代码的同级目录中具有该库，并且正在使用调用代码目录中的npm i `cd ../lib && pwd`进行安装。以下是相关的tsconfigs：

图书馆tsconfig.json：

{
    "compilerOptions": {
        "lib": ["dom", "es6"],
        "declaration": true,
        "declarationDir": "./dist",
        "outDir": "./dist",
        "strict": true,
        "allowSyntheticDefaultImports": true,
        "sourceMap": true,
        "strictNullChecks": true,
        "moduleResolution": "node",
        "jsx": "react",
        "target": "es6"
    },
    "include": [
        "src/"
    ],
    "exclude": ["node_modules"]
}

呼叫代码tsconfig.json：

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

任何帮助将不胜感激。我也只是想知道会发生什么！

捆绑打字稿React组件库

0 个答案: