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

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

Play

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

Typescript: making interface parameters optional when passing to a function

interface

options

typescript