Расширение определения TypeScript 2.5.2 Component Props в отдельном файле определения

Я скачал пакет NPM под названием react-bootstrap-table с определениями типов.

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", все будет выглядеть хорошо, но, конечно, у меня нет соответствующего модуля для этого.

Модуль не найден: ошибка: не удается разрешить «реагировать-загрузочную таблицу-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;

reactjs typescript typescript2.0 react-bootstrap-table
person Ogglas    schedule 08.09.2017    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Используйте 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 в разделе «Дополнение модуля».

person niba    schedule 08.09.2017

arrow_upward
0
arrow_downward

Обновление:

Благодаря @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"
  ]
}
person Ogglas    schedule 08.09.2017