reactjs - Åsidosätt TypeScript-typer i V2.2.2 hämtad från NPM @Types


Jag använder komponenten react-router-bootstrap och definitioner från DefinitelyTyped. Mitt problem är att de nedladdade definitionerna inte matchar komponenten. Jag har skapat en pull request som kommer att lösa detta, men eftersom jag inte vet när det kommer att patchas måste jag åsidosätta det. Jag kan inte bara redigera typdefinitionsfilen som ligger i node_modules\@types lokalt eftersom vi är ett team som arbetar med detta projekt och node_modules-mappen inte är incheckad.

Hur kan jag skriva över typdefinitioner? Jag vill bara skriva över LinkContainer.d-filen eftersom de andra filerna fungerar.

Pull-begäran:

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

Jag försökte skapa en fil med namnet LinkContainer.d.ts i min typings-mapp som var korrekt, men den plockas inte upp. I samma mapp har jag en global.d.ts med gränssnitt som plockas upp utan problem.

/// <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;

Svar #1

Lösning baserad på detta exempel:

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

Lägg till en mapp som heter typings i rotmappen.

Redigera tsconfig.json:

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

Lägg till en mapp i typings-mappen kallad react-router-bootstrap (namnet bör vara identiskt med modulen) och inuti den en fil kallad index.d.ts.

I filen index.d.ts lägg till dina egna typningar eller referenser:

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

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

När modulen importeras nu laddades de anpassade typerna: import { LinkContainer } från 'react-router-bootstrap';