Question

我已经下载了一个名为react-bootstrap-table的NPM包，其中包含类型定义。

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

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

不幸的是，类型已过时，我需要的strictSearch定义中缺少名为BootstrapTable的道具。我当然可以更新node_modules中的定义，但我们是一个从事这个项目的团队，我们没有提交node_modules文件夹。

我已经阅读了这里的帖子，但无论如何我都无法使用它：

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

我怎样才能让它发挥作用？

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

找不到模块：错误：无法解析'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

使用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下找到更多信息。

Answer 2

<强>更新

感谢@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"
  ]
}

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

2 个答案: