如何使用扩展运算符覆盖打字稿中的属性

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,
}

如果顺序正确，但 extraProperties 并不总是具有color和backgroundColor，则将它们标记为可选：

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

或者，如果它的行为符合您想要的方式（即属性总是被覆盖，这是故意的），则删除无用的代码行。

Answer 2

不知道有没有这方面的配置。但是，您可以解构additionalProperties以排除color和backgroundColor：

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

如果您希望这些 props 只是默认值，您可以使用 Object.assign。

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