无法声明多个自定义命名属性 TypeScript MUI v5 Palette

Question

我正在尝试设置许多自定义属性，以使将来在语义上易于更新。 但是，我在 MUI v5 中拥有多个自定义属性时遇到了问题

Ts 误差

TS2717: Subsequent property declarations must have the same type. Property 'background' must be of type 'TypeBackground', but here has type 'PaletteColor'.

调色板.ts

export const palette = {
  primary: {
    light: '#6D6B8C',
    main: '#6514DD',
    dark: '#6D6B8C',
  },
  secondary: {
    main: '#6D6B8C',
  },
  error: {
    main: '#bd4646',
  },
  background: {
    main: '#fff',
    paper: '#F5F5F5',
  },
  border: {
    main: '#DADAE1',
    primary: '#DADAE1',
  },
  text: {
    primary: '#6D6B8C',
    secondary: '#000',
  },
}


declare module '@mui/material/styles' {
  interface Palette {
    border: Palette['primary']
    background: Palette['primary']
  }

  // allow configuration using `createTheme`
  interface PaletteOptions {
    border?: PaletteOptions['primary']
    background?: PaletteOptions['primary']
  }
}

Answer 1

您正在使用 TypeScript 的一项功能，称为声明合并。 问题是因为接口的非函数成员应该是唯一的。 如果它们不是唯一的，则它们必须属于同一类型（请参阅此处的文档）。

顺便说一句：使用declare module 'foo'来导入和合并现有对象称为模块扩充，这是一种特殊类型的声明合并。 您实际上可以在同一个文件中合并两个具有相同名称的接口。

---

一个可能的解决方案

由于无法通过声明合并来合并两个不同类型的成员，因此一种替代方法可能是简单地声明一个新类型。

/// animal.ts
export interface Animal {
  name: string
  age: number
  birthday: string // goal: represent birthday as a `Date` instead of `string`
}


/// pet.ts
import { Animal } from './animal'

// remove the offending property from `Animal`, while simultaneously
// extending the new `Pet` type to add `birthday` back in as a `Date`
type Pet = Omit<Animal, 'birthday'> & {
  birthday: Date
  ownerId: number
}

// the compiler accepts the augmented definition of `Pet`
const pet: Pet = {
  name: 'fido',
  age: 2,
  birthday: new Date(), // see, not a string!
  ownerId: 1
}

解释

由于declare module增加了额外的噪音，我将省略它以使示例更直观。 考虑以下代码片段：

/// animal.ts - good
export interface Animal {
  name: string
  age: number
}

export interface Animal {
  birthday: string
}

上述代码在 TypeScript 中是完全允许的。 编译器将Animal的两个单独声明合并到一个定义中。

让我们看一个不同的例子。

/// animal.ts - bad
export interface Animal {
  name: string
  age: number
  birthday: string
}

export interface Animal {
  birthday: Date
}

希望问题很明显。 Animal的两个声明都有birthday ，但类型不同。 编译器应该如何知道birthday应该是什么类型？ 它可以做出一些假设，但幸运的是它没有，而是宁愿给出一个错误：

typescript: Subsequent property declarations must have the same type. Property 'birthday' must be of type 'string', but here has type 'Date'.