跳至主要內容

函数

刘春龙原创...大约 3 分钟WEB前端TypeScript教程文档

函数是 JavaScript 应用程序的基础。在 TypeScript 里函数仍然是主要的定义行为的地方

在 JavaScript 中,常见函数定义形式

function add(x, y) {
  return x + y;
}

let add = function (x, y) {
  return x + y;
};

在 TypeScript 定义函数

让我们为上面那个函数添加类型

function add(x: number, y: number): number {
  return x + y;
}

let add = function (x: number, y: number): number {
  return x + y;
};

返回值类型

我们可以给每个参数添加类型之后再为函数本身添加返回值类型,返回值类型是函数类型的必要部分,有返回值的可以添加返回值类型,如果函数没有返回任何值,你也必须指定返回值类型为 void 而不能留空。这样就得到了完整的函数类型写法,如下

有返回值的标注返回值类型

const add = (x: number, y: number): number => {
  return x + y;
};

无返回值的标注void

const add = (x: number, y: number): void => {
  console.log(x + y);
};

提示

返回值一般会自行推断

函数参数

TypeScript 里的每个函数参数都是必须的。 这不是指不能传递 nullundefined作为参数,而是说编译器检查用户是否为每个参数都传入了值。 编译器还会假设只有这些参数会被传递进函数。 简短地说,传递给一个函数的参数个数必须与函数期望的参数个数一致。

函数定义之后,输入多余的(或者少于要求的)参数,是不被允许的

const add = (x: number, y: number): void => {
  console.log(x + y);
};
add(1, 2);
add(1); //报错
add(1, 2, 3); //报错

可选参数

JavaScript 里,每个参数都是可选的,可传可不传。 没传参的时候,它的值就是 undefined。 在 TypeScript 里我们可以在参数名旁使用 ? 实现可选参数的功能。 比如,我们想让参数 y 是可选的

function add(x: number, y?: number): number {
  //指定返回值类型为number类型
  if (y) {
    return x + y;
  } else {
    return x;
  }
}
console.log(add(1)); //  1
console.log(add(1, 2)); //3

提示

可选参数必须跟在必须参数后面,可选参数后面不允许再出现必需参数了。 如果上例我们想让 x 是可选的,那么就必须调整它们的位置,把参数 x 放在后面。

参数默认值

在 TypeScript 里,我们也可以为参数提供一个默认值,当用户没有传递这个参数或传递的值是undefined时。 它们叫做有默认初始化值的参数。 让我们修改上例,把参数 y 的默认值设置为 100。需要注意的是,在所有必须参数后面的带默认初始化的参数都是可选的,可选参数与末尾的默认参数共享参数类型

function add(x: number, y = 100): number {
  //指定返回值类型为number类型
  return x + y;
}
console.log(add(1)); //  101
console.log(add(1, 2)); //3

提示

虽然默认参数算作可选参数,与普通可选参数不同的是,带默认值的参数不需要放在必须参数的后面。

剩余参数

ES6 中,可以使用 ...rest 的方式获取函数中的剩余参数(rest 参数),这里使用的不多,只需了解即可

let func4 = (x: number, y: number, ...args: any): void => {
  console.log(args); // [ 3, 4, 5, 6 ]
  console.log(...args); // 3 4 5 6
};
func4(1, 2, 3, 4, 5, 6);
上次编辑于:
贡献者: 刘春龙
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.15.7