TypeScript 可选参数详解

在本教程中,你将学习如何使用 TypeScript 中的函数的可选参数。

在 JavaScript 中,即使函数指定了参数,也可以在调用它的时候不传入任何参数,因为 JavaScript 默认支持可选参数。而在 TypeScript 中,编译器会检查每个函数的调用情况,并在以下情况中抛出错误提示:

因为编译器会彻查传递给函数的参数,我们可以使用可选参数告诉编译器参数是可选的,在不存在的情况下不发出错误提示。

要使函数的参数是可选的,可以在参数名后面添加 ? 符号,如下所示:

function multiply(a: number, b: number, c?: number): number {
  if (typeof c !== 'undefined') {
    return a * b * c;
  }
  return a * b;
}

它是这样工作的:

  • 首先,在 c 参数后面添加 ? 符号;
  • 然后,通过表达式 typeof c !== 'undefined' 检查 c 参数是否传递给了函数。

注意:如果你用表达式 if(c) 来检查参数是否被初始化,你会发现空字符串和 0 也被视为 undefined,这种判断是有问题的。

可选参数必须出现在参数列表中必选参数的后面。例如,如果你把 b 设置为可选参数,而 c 是必须参数,TypeScript 编译器会抛出一个错误提示:

function multiply(a: number, b?: number, c: number): number {
  if (typeof c !== 'undefined') {
    return a * b * c;
  }
  return a * b;
}

错误提示:

error TS1016: A required parameter cannot follow an optional parameter.

小结

  • 使用 parameter?: type 语法把参数设置为可选的;
  • 使用 typeof(parameter) !== 'undefined' 表达式来检查可选参数是否初始化了。

教程来源于Github,感谢cody1991大佬的无私奉献,致敬!

技术教程推荐

Swift核心技术与实战 -〔张杰〕

技术面试官识人手册 -〔熊燚(四火)〕

讲好故事 -〔涵柏〕

HarmonyOS快速入门与实战 -〔QCon+案例研习社〕

业务开发算法50讲 -〔黄清昊〕

Spring Cloud 微服务项目实战 -〔姚秋辰(姚半仙)〕

网络排查案例课 -〔杨胜辉〕

B端产品经理入门课 -〔董小圣〕

结构思考力 · 透过结构看问题解决 -〔李忠秋〕