打字稿：传递给函数时使接口参数可选答案

【问题标题】：Typescript: making interface parameters optional when passing to a function打字稿：传递给函数时使接口参数可选
【发布时间】：2019-08-12 11:28:39
【问题描述】：

我有一个打字稿函数，它接受一个选项对象作为参数。我有一个定义选项的界面。我还有一个常量，其中包含每个选项的默认值。它看起来像这样：

interface Options {
  viewportHeight: number
  viewportWidth: number
  // ...
}

const defaults: Options = {
  viewportHeight: 600,
  viewportWidth: 600,
// ...
}

function createGenerator(options: Options) {
  options = { ...defaults, ...options }

  return function generate() {
    // Simplfied
    return {
      value: Math.min(options.viewportWidth, options.viewportHeight),
    }
  }
}

问题如下：如果我保留Options 接口要求的所有属性，那么我不能执行createGenerator({ viewportWidth: 50 }) 之类的操作来仅设置我需要的选项并默认保留其余选项

如果我确实将它们设为可选，那么像options.viewportWidth 这样的所有选项都具有number | undefined 的类型，这会在我尝试使用它们时导致错误Argument of type 'number | undefined' is not assignable to parameter of type 'number'。

我可以定义两个接口，例如 Options 和 FilledOptions，但这不是 DRY。有什么好办法吗？

【问题讨论】：

标签： typescript interface options

【解决方案1】：

您可以使用Partial 使一个类型的所有成员成为可选的。但是，您需要为最终参数使用不同的变量，因为 TS 只会采用分配的类型并抱怨属性可能是 undefined

interface Options {
  viewportHeight: number
  viewportWidth: number
  // ...
}

const defaults: Options = {
  viewportHeight: 600,
  viewportWidth: 600,
// ...
}

function createGenerator(_options: Partial<Options>) {
  const options = { ...defaults, ..._options }

  return function generate() {
    // Simplfied
    return {
      value: Math.min(options.viewportWidth, options.viewportHeight),
    }
  }
}

createGenerator({ viewportWidth: 50 })

Play

【讨论】：