2

我已经下载了一个名为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文件夹。

我已经阅读了这里的主题，但无论如何我都无法让它工作：

如何在单独的定义文件中扩展 TypeScript 类定义？

我怎样才能让它工作？

如果我添加一个名为“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;
4

2 回答 2

3

用于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在 Module Augmentation 部分下找到更多信息。

于 2017-09-08T12:51:23.977 回答
0

更新：

感谢@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"
  ]
}
于 2017-09-08T12:32:55.420 回答