TypeScript 使用三个点号表示的 Rest 参数语法和 spread syntax

简介: TypeScript 使用三个点号表示的 Rest 参数语法和 spread syntax

除了使用可选参数或重载来创建可以接受各种固定参数计数的函数之外,我们还可以使用剩余参数定义具有无限数量参数的函数。rest 参数出现在所有其他参数之后,并使用 … 语法:


看个例子:

function multiply(n: number, ...m: number[]) {
  return m.map((x) => n * x);
}
function multiplyArray(n: number, m: number[]) {
  return m.map((x) => n * x);
}
const a = multiply(10, 1, 2, 3, 4);
console.log(a);
const b = multiply(10, [1,2,3,4]);
console.log(b);
const c = multiplyArray(10, [1,2,3,4]);
console.log(c);

image.png

如果需求是允许传入多个数组,该怎么写?


type JerryArray = number[];
function multiply(n: number, ...m: JerryArray[]) {
  return m.map( (stillArray) => stillArray.map((x) => n * x ));
}
const b = multiply(10, [1,2,3,4], [5,6,7,8]);
console.log(b);

image.png


注意:rest parameter 的类型,必须为数组类型。


在 TypeScript 中,这些参数上的类型注解是隐式的 any[] 而不是 any,并且给出的任何类型注解都必须是 Array 或 T[] 的形式,或者是元组类型。

1



如果把三个点去掉,语法错误,因为数组的 push 方法,输入参数不能是数组:


image.png


而应该是 number 的序列:

image.png



把 push 的输入参数从数组,改成 4,5,6,7这种 number 序列就能够正常工作了:


image.png


spread 操作符的结果不能直接赋给一个变量,必须用数组包一层。


6image.png

相关文章
|
5月前
|
XML JavaScript 前端开发
TypeScript 中的“as”语法是什么?
TypeScript 中的“as”语法是什么?
|
5月前
|
JavaScript
详细介绍 TypeScript 中常用的循环语句,包括它们的语法、用法以及一些注意事项
详细介绍 TypeScript 中常用的循环语句,包括它们的语法、用法以及一些注意事项
152 1
|
5月前
|
JavaScript 前端开发 开发者
深入理解ArkTS:Harmony OS 应用开发语言 TypeScript 的基础语法和关键特性
深入理解ArkTS:Harmony OS 应用开发语言 TypeScript 的基础语法和关键特性
554 0
|
9天前
|
JavaScript
typeScript基础(3)_ts函数默认值和可选参数
本文介绍了在TypeScript中如何使用函数的默认值和可选参数。展示了如何为函数参数指定默认值,使得在调用函数时可以省略某些参数,以及如何定义可选参数。
29 2
|
3月前
|
存储 JavaScript 开发者
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(四)
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(四)
37 0
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(四)
|
3月前
|
JavaScript API 网络架构
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(三)
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(三)
35 0
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(三)
|
3月前
|
JavaScript API
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(二)
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(二)
28 0
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(二)
|
3月前
|
JavaScript API UED
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(五)
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(五)
39 0
|
3月前
|
JavaScript 前端开发 API
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(一)
【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化(一)
43 0
|
5月前
|
JavaScript 编译器 开发者
TypeScript中的“as”语法是什么?
TypeScript中的“as”语法是什么?
34 0