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

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

接口选项{
视口高度：编号
视口宽度：编号
// ...
}
常量默认值：选项={
视口高度：600，
视口宽度：600，
// ...
}
函数createGenerator（选项：选项）{
选项={…默认值，…选项}
返回函数generate（）{
//简化
返回{
值：Math.min（options.viewportWidth，options.viewportHeight），
}
}
}

问题如下：如果我保留

Options

接口所需的所有属性，那么我就不能像

createGenerator（{viewportWidth:50}）

那样只设置所需的选项，而默认情况下保留其余的选项

如果我将它们设置为可选的，那么所有选项（如

options.viewportWidth

的类型都是

number | undefined

），这会导致错误

类型为'number | undefined'的参数在我尝试使用它们时无法分配给类型为'number'的参数

我可以定义两个接口，比如
选项
和
填充选项
，但这不是干巴巴的。有什么好办法吗？
您可以使用
Partial
使类型的所有成员都是可选的。但是，您需要为最终参数使用不同的变量，因为TS只会采用指定的类型，并抱怨属性可能
未定义

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


接口选项{
视口高度：编号
视口宽度：编号
// ...
}
常量默认值：选项={
视口高度：600，
视口宽度：600，
// ...
}
函数createGenerator（_选项：部分）{
常量选项={…默认值，{u选项}
返回函数generate（）{
//简化
返回{
值：Math.min（options.viewportWidth，options.viewportHeight），
}
}
}
createGenerator（{viewportWidth:50}）

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

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


接口选项{
视口高度：编号
视口宽度：编号
// ...
}
常量默认值：选项={
视口高度：600，
视口宽度：600，
// ...
}
函数createGenerator（_选项：部分）{
常量选项={…默认值，{u选项}
返回函数generate（）{
//简化
返回{
值：Math.min（options.viewportWidth，options.viewportHeight），
}
}
}
createGenerator（{viewportWidth:50}）