在单独的定义文件中扩展 TypeScript 2.5.2 Component Props 定义

Question

我已经下载了一个名为 react-bootstrap-table 的带有类型定义的 NPM 包。

https://www.npmjs.com/package/react-bootstrap-table

https://www.npmjs.com/package/@types/react-bootstrap-table

不幸的是，类型已经过时，并且我需要的 BootstrapTable 定义中缺少一个名为 strictSearch 的道具。我当然可以更新 node_modules 中的定义，但我们是一个致力于此项目的团队，我们不会提交 node_modules 文件夹。

我已经阅读了这里的主题，但我还是无法让它工作：

How do I extend a TypeScript class definition in a separate definition file?

我怎样才能让它工作？

如果我添加一个名为 "react-bootstrap-table-ex" 的新文件夹，一切看起来都不错，但当然我没有对应的模块。

Module not found: Error: Can't resolve 'react-bootstrap-table-ex'

如果我将我的文件夹重命名为 react-bootstrap-table，类型只会从我的新 index.d.ts 文件中加载，我无法引用原始定义。然后我尝试手动设置原始定义的路径，但再次发生 Module not found 错误。

Module not found: Error: Can't resolve '../../../node_modules/@types/react-bootstrap-table'

代码：

import { ComponentClass, Props } from "react";
import { BootstrapTableProps, BootstrapTable } from '../../node_modules/@types/react-bootstrap-table';

export interface BootstrapTableExProps extends BootstrapTableProps {
    strictSearch?: boolean;
}

export interface BootstrapTableEx extends ComponentClass<BootstrapTableExProps> {

}

declare const BootstrapTableEx: BootstrapTableEx;

Answer 1

更新：

感谢@niba 我这样解决了，文件Typings\react-bootstrap-table-ex\index.d.ts

import { BootstrapTable } from 'react-bootstrap-table';

declare module "react-bootstrap-table" {
    export interface BootstrapTableProps {
        strictSearch?: boolean;
    }
}

原文：

通过将 index.d.ts 从 node_modules\@types\react-bootstrap-table 复制到 Typings\react-bootstrap-table 并在那里编辑文件来解决。

下面我的tsconfig.json供参考：

{
  "compilerOptions": {
    //baseUrl and paths needed for custom typings
    "baseUrl": ".",
    "paths": {
      "*": [ "./Typings/*" ]
    },
    //We use webpack bundle instead
    "outDir": "./Scripts/NotUsed",

    "sourceMap": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    //"experimentalDecorators": true,
    "module": "commonjs",
    "target": "es5",
    "jsx": "react",
    "lib": [ "es5", "es6", "dom" ]
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

Answer 2

使用Module Augmentation 扩展现有类型。使用以下代码创建 .ts 文件

import { BootstrapTableProps, BootstrapTable } from 'react-bootstrap-table';

declare module "react-bootstrap-table" {
  export interface BootstrapTableExProps extends BootstrapTableProps {
    strictSearch?: boolean;
  }

  export interface BootstrapTableEx extends ComponentClass<BootstrapTableExProps> {

  }
}

新类型将在整个项目中可用。

您可以在此处 https://www.typescriptlang.org/docs/handbook/declaration-merging.html 模块增强部分下找到更多信息。

在单独的定义文件中扩展 TypeScript 2.5.2 Component Props 定义

Extend TypeScript 2.5.2 Component Props definition in a separate definition file

typescript

reactjs

react-bootstrap-table

typescript2.0