Override TypeScript types in V2.2.2 downloaded from NPM @Types

Question

I'm using the component react-router-bootstrap and definitions from DefinitelyTyped. My problem is that the definitions downloaded does not match the component. I have created a pull request that will solve this but since I do not know when it will be patched I have to override it. I cannot just edit the type definitions file located in node_modules\@types locally because we are a team working on this project and the node_modules folder is not checked in.

How can I override type definitions? I only wan't to override LinkContainer.d file since the others files work.

Pull request:

https://github.com/DefinitelyTyped/DefinitelyTyped/pull/16600

I tried to create a file named LinkContainer.d.ts in my typings folder that was correct but it does not get picked up. In the same folder I have a global.d.ts with interfaces that gets picked up fine.

/// <reference types="react-router-bootstrap" />
import { ComponentClass } from "react";
import { NavLinkProps } from "react-router-dom";

type LinkContainer = ComponentClass<NavLinkProps>;
declare const LinkContainer: LinkContainer;

export default LinkContainer;

Answer 1

Solution based on this example:

https://github.com/Microsoft/TypeScript/issues/11137#issuecomment-251755605

Add a folder called typings in root folder.

Edit tsconfig.json:

{
  "compilerOptions": {
    //baseUrl and paths needed for custom typings
    "baseUrl": ".",
    "paths": {
      "*": [ "./typings/*" ]
    },
    ...

Add a folder in the typings-folder called react-router-bootstrap (name should be identical to module) and inside that a file called index.d.ts.

In the file index.d.ts add your custom typnings or references:

import { ComponentClass } from "react";
import { NavLinkProps } from "react-router-dom";

type LinkContainer = ComponentClass<NavLinkProps>;
export const LinkContainer: LinkContainer;

When importing the module now the custom types were loaded: import { LinkContainer } from 'react-router-bootstrap';