Question

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

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

Play

打字稿：传递给函数时，将接口参数设置为可选

1 个答案: