reactjs - Blir en TypeScript-modulforsterkning automatisk eksportert i et komponentbibliotek?

Jeg laget et komponentbibliotek ved å bruke material-ui og Typescript i bunnen. Jeg har brukt Typescript-modulaugumentasjon for å legge til nye alternativer i temaet, som beskrevet i deres dokumentasjon om tilpassing av tema med Typescript.

// createPalette.d.ts/* eslint-disable @typescript-eslint/no-unused-vars */
import { Palette, PaletteOptions } from "@material-ui/core/styles/createPalette";
declare module "@material-ui/core/styles/createPalette" {
    interface Palette {
        highlight: PaletteColor;
        layout: LayoutPaletteColor;
    }
    interface PaletteOptions {
        highlight: PaletteColorOptions;
        layout?: LayoutPaletteColor;
    }
    interface LayoutPaletteColorOptions {
        paper: string;
        text: string;
    }

    interface SidebarPaletteColorOptions extends LayoutPaletteColorOptions {
        navItemSelectedBg: string;
        navItemSelectedColor: string;
    }
    interface LayoutPaletteColor {
        header: LayoutPaletteColorOptions;
        sidebar: SidebarPaletteColorOptions;
        footer: LayoutPaletteColorOptions;
    }
}

Deretter bygger jeg prosjektet mitt og publiserer det til Github-pakker. Jeg bruker også dette skriptet som kopierer *.d.ts-filene til dist-mappen

"copy-typings": "copyfiles -u 1 \"./src/types/*.d.ts\" dist",

Når jeg installerer pakken i et annet prosjekt og refererer til Headeren, for eksempel, får jeg denne feilen

Kan ikke lese egenskapen 'header' av undefined som peker på linjen der theme.palette.layout.header.paper refereres.

Dette får meg til å tro at min createPalette.d.ts kun er effektiv på komponentbiblioteket selv, men ikke når komponentene brukes i et annet prosjekt.

Hvordan eksportere denne modulutvidelsen? Eller hvordan få dette til å fungere?

Svar #1

Jeg tror jeg har funnet en løsning på problemet ditt.

Kort fortalt

  1. Du bør inkludere dine d.ts-filer eller den inneholdende mappen i package.json
...
files: [
  "dist",
  "src/types" or "src/types/global.d.ts"
]
...
  1. Spesifiser globale typer i din tsconfig.json
"types": ["node", "@YOUR_PACKAGE_NAME/src/types"]

Som standard inkluderer TS globale definisjonsfiler fra @types-mapper. "types"-egenskapen forteller den å inkludere noen bestemte d.ts-filer fra andre mapper. Jeg vet ikke nøyaktig hvordan det fungerer, men dette løste nøyaktig det samme problemet i prosjektet mitt.

Min forklaring er veldig dårlig, men jeg håper du vil få en idé) Håper det hjelper

Relaterte artikler