Typescript：传递给函数时使接口参数可选

Question

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

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。有什么好的办法吗？

Answer 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 })

玩