Extend TypeScript 2.5.2 Component Props definition in a separate definition file

Question

I have downloaded a NPM package called react-bootstrap-table with type definitions.

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

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

Unfortunately the types are outdated and a prop called strictSearch is missing from BootstrapTable definitions that I need. I can of course update the definitions in node_modules but we are a team working on this project and we are not committing the node_modules folder.

I have read the thread here but I can't get it working anyway:

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

How can I get it working?

If I add a new folder called for example "react-bootstrap-table-ex" everything looks good but of course I have no corresponding module for that.

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

If I rename my folder to react-bootstrap-table the types are only loaded from my new index.d.ts file and I cant reference the original definitions. I then tried to set the path for the original definitions manually but again the Module not found error occurs.

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

Code:

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

Use Module Augmentation to extend existing typings. Create .ts file with the following code

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> {

  }
}

New typings will be available in the entire project.

You can find more info here https://www.typescriptlang.org/docs/handbook/declaration-merging.html under Module Augmentation section.

Answer 2

Update:

Thanks to @niba I solved it like this, file Typings\react-bootstrap-table-ex\index.d.ts

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

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

Original:

Solved it by copying index.d.ts from node_modules\@types\react-bootstrap-table into Typings\react-bootstrap-table and edit the file there.

My tsconfig.json below for reference:

{
  "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"
  ]
}