阅读 16

TypeScript 中的命名参数、可选参数、默认参数

对于一些功能比较复杂的函数,需要将很多配置项作为参数传入,这时候传统的位置参数表就不太方便了,因为对于配置项参数,我们往往会设置默认值,希望使用者无需按顺序传入所有参数,而只要指明哪几个参数需要特别配置。

比如一个简单的字符串格式化函数,除了必需的传入值 value 外,有三个配置项:

  • indent :缩进

  • caseMode :大小写

  • callback :转换完成后的回调

前端代码中应该如何定义呢?


我们先看看用 JavaScript 的情况。

如果我们按照最原始的定义方法:

function transform(value, indent, caseMode, callback) {
  ...
}
复制代码

那么使用者就必须记住所有配置参数的位置,要是只想设置 caseMode ,需要写成如下尴尬的形式:

transform('someStr', undefined, 'upper')
复制代码

事实上很多 JavaScript 内置函数就是采用的这种方式,使用者很难记住所有的位置参数,因此[1, 2, 3].map(parseInt) 才会成为“经典”面试题。

很多现代编程语言,比如 Dart 或 Python ,增加了“命名参数”这一特性,解决了参数与参数名对应的问题:

transform('someStr', caseMode: 'upper')
复制代码

JavaScript 没有命名参数这一特性,早期实践中往往通过“配置对象参数“的方式,达到类似的效果:

function transform(value, cfg) {
  ...
  if(cfg.caseMode) ...
}
复制代码

对象参数的缺点是源码中 cfg 的配置项不够直观,默认值设置比较麻烦,类型检查约束性不够。

现在配合上 ES6 的解构赋值和函数默认值,直观性和默认值可以解决了:

function transform(value, {
  indent = 2,
  caseMode = 'upper',
  callback,
} = {}) {
  ...
}
复制代码

不过约束性还是不够,不能实现“必选参数”、“可选参数”的功能。


这时候就要 TypeScript 上场了。

除了类型检查外,TypeScript 可以对必选参数进行空值检查,然后再通过?: 手动设置可选参数:

function transform(value: string, {
  indent = 2,
  caseMode = 'upper',
  callback,
}:{
  indent?: number,
  caseMode?: string,
  callback?: (rst: string) => void,
} = {}) {
  ...
}
复制代码

这就是 TypeScript 中比较完整的一个列子,实现了命名参数、可选参数,参数默认值的功能,使用时:

transform('someStr', { caseMode: 'upper' })
复制代码

在以上的定义中,“命名参数”用上了 {}: {}={} 的结构进行定义,格式上要分成两段,另外由于本质上是个对象参数,外面还是不能忘了大括号的,写法略有些冗长,但是 TypeScript 的团队 表示 由于保留位置限制、表达式解析等种种原因,目前不会加入真正的“命名参数”特性,因此目前只能这样写。

关注下面的标签,发现更多相似文章
评论