时间戳

首页 > 解决方案 > 在 Typescript 中使用模块扩充将接口更改为类型

javascript - 在 Typescript 中使用模块扩充将接口更改为类型

问题描述

使用 TS 扩充模块时是否可以更改interface为？type我想用我自己的一些属性来增强 Material-UI 中的主题。我创建了createPalette.d.ts文件：

import '@material-ui/core/styles/createPalette';

declare module '@material-ui/core/styles/createPalette' {
  export interface PaletteOptions {
    neutral?: {
      moderate: string;
      dark: string;
    };
  }
  export interface Palette {
    neutral: {
      moderate: string;
      dark: string;
    };
  }
}

PaletteOptions和接口的内容Palette几乎相同，所以我想通过提取neutral为外部类型来简化它，并提出如下内容：

import '@material-ui/core/styles/createPalette';

type CustomPalette = {
  neutral: {
    moderate: string;
    dark: string;
  };
};

declare module '@material-ui/core/styles/createPalette' {
  export interface PaletteOptions extends Partial<CustomPalette> {}
  export interface Palette extends CustomPalette {}
}

它可以工作，但是PaletteOptions现在Palette被认为是“空的”，并且由于no-empty-interfaces规则而出现错误。在点击自动修复 ESLint 后将其更改为类型：

import '@material-ui/core/styles/createPalette';

type CustomPalette = {
  neutral: {
    moderate: string;
    dark: string;
  };
};

declare module '@material-ui/core/styles/createPalette' {
  export type PaletteOptions = Partial<CustomPalette>;
  export type Palette = CustomPalette;
}

没有 ESLint 错误，但现在模块扩充不起作用，因为 Material-UI 类型声明PaletteOptions和Palette作为接口，TS 忽略了我的声明。我现在有什么选择？有什么办法可以诱使 TS 接受PaletteOptions并Palette成为类型，还是我应该eslint-ignore遵循该规则？

标签： javascripttypescriptmaterial-ui

解决方案

似乎该规则假设您没有进行扩充，并且禁用它是安全的，因为您需要另一个界面来扩充现有界面。

推荐阅读