标签: module-augmentation

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 …

考虑外部 (npm) 模块extmod在其声明文件中公开以下接口：

interface Options {
  somevar?: string;
  suboptions?: {
    somesubvar?: string;
  };
}

如何通过模块增强somesubvar2在内部添加属性？suboptions

我在文件中尝试了以下操作extmod.d.ts：

declare module 'extmod' {
  interface Options {
    suboptions?: {
      somesubvar2?: string;
    };
  }
}

但它会引发以下错误：

error TS2687: All declarations of 'suboptions' must have identical modifiers.

error TS2717: Subsequent property declarations must have the same type.  Property 'suboptions' must be of type '<SNIP>', but here has type '{ somesubvar2: string; }'.

我一直在阅读 Stackoverflow 上的 MUI 文档、博客和其他帖子，但尽管如此，我仍无法让我的 vscode intellisense/typescript 来检测我的更改。

它们是非常简单的更改，与许多其他示例显示的非常相似，但什么也没有。

需要一些帮助。

• 多用户文档
• 资源

// theme.ts
export const getDesignTokens = (mode: PaletteMode) => ({
  palette: {
    mode,
    ...(mode === "light"
      ? {
          // palette values for light mode
          primary: {
            light: "#FF7988",
            main: "#FE5366",
            dark: "#E04052",
          },
          text: {
            primary: "#212121",
            secondary: "#616161",
          },
          background: {
            default: "#ffffff",
          },
          border: {
            light: "#EFEFEF",
            main: "#D9D9D9",
            dark: "#979797",
          },
        }
      : {
          // future dark values
        }),
...

// theme.d.ts
declare module "@mui/material/styles" …