typescript - 您如何使用扩展运算符覆盖 typescript 中的属性

Question

考虑这个例子

interface additonalProperties {
  backgroundColor: string,
  color: string,
  [key: string]: string
}

class StyleObjectMaker implements StyleObjectMaker {
  constructor(className: string, additonalProperties: additonalProperties = {}) {
    this.key = `button`
    this.className = `button${className ? '-' + className : ''}`
    this.property = {
      backgroundColor: colors[className] || colors.default,
      color: colors.default,
      ...additonalProperties
    }
  }
}

在上面的ts提示

'backgroundColor' is specified more than once, so this usage will be overwritten

同样对于

  color

知道我该如何解决吗？即我如何允许覆盖
这是我的 tsconfig 的样子

{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "outDir": "dist/ts-out",
    "sourceMap": true,
    "strict": true,
    "target": "es2017",
    "resolveJsonModule": true,
    "typeRoots": ["./node_modules/@types"]
  },
  "compileOnSave": true,
  "include": ["src", "index.ts"]
}

Answer 1

Typescript 指出这两行是无用的:

  backgroundColor: colors[className] || colors.default,
  color: colors.default,

您正在手动设置这些属性，但随后您立即将其分散并清除它们。这可能不是你想要做的。如果您希望这两个值胜过 additionalProperties 中的内容，然后切换顺序:

this.property = {
  ...additonalProperties
  backgroundColor: colors[className] || colors.default,
  color: colors.default,
}

如果顺序正确，但 additionalProperties 不会总是有 color和 backgroundColor ，然后将它们标记为可选:

interface additonalProperties {
  backgroundColor?: string,
  color?: string,
  [key: string]: string
}

或者，如果它按照您想要的方式运行(即，属性总是被覆盖，这是有意的)，然后删除无用的代码行。