Блог

Я создал библиотеку компонентов, используя material-ui и Typescript под капотом. Я использовал расширение модуля Typescript для добавления новых опций в тему, как описано в их настройке темы с документацией 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;
    }
}
 

Затем я создаю свой проект и публикую его в пакетах Github. Я также использую этот скрипт, который копирует *.d.ts файлы в dist папку

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

Например, когда я устанавливаю пакет в другом проекте и ссылаюсь на заголовок, я получаю эту ошибку

Cannot read property 'header' of undefined который указывает на строку, на которую theme.palette.layout.header.paper ссылается.

Это заставляет меня поверить, что my createPalette.d.ts эффективен только для самой библиотеки компонентов, но не тогда, когда компоненты используются в другом проекте.

Как экспортировать это расширение модуля? Или как заставить это работать?