目录
- 引言
- 定义 TypeScript 函数
- 调用 TypeScript 函数
- 函数类型
- 推断类型
- 参数传递
- 可选参数
- 默认参数
- 剩余参数
- this
- 函数重载
- 总结
引言
TypeScript 是一种静态类型的 JavaScript 超集,它有着更好的代码提示和错误检查能力。在 TypeScript 中,函数也是一个重要的概念,本文将介绍 TypeScript 函数的定义、调用和参数传递方法。
定义 TypeScript 函数
-
在 TypeScript 中,函数的定义方式和 JavaScript 相同,TypeScript 函数可以创建
有名字的函数
和匿名函数
。 -
在定义 TypeScript 时需要指定函数的参数类型和返回值类型。例如,定义一个简单的函数,它接受两个数字参数并返回它们的和:
function add(num1: number, num2: number): number { return num1 + num2; }
-
在这个函数中,我们指定了两个参数的类型(
num1: number
和num2: number
),以及函数的返回值类型(: number
)。
调用 TypeScript 函数
-
调用 TypeScript 函数与 JavaScript 函数相同,可以直接使用函数名和参数。例如,我们可以调用上面定义的
add
函数:const result = add(1, 2); // result 将是 3
-
在这个例子中,传递了两个数字参数 1 和 2,函数将它们相加后返回了结果 3。
函数类型
-
函数类型包含两部分:
参数类型
和返回值类型
。 -
当写出完整函数类型的时候,这两部分都是需要的。
-
以参数列表的形式写出参数类型,为每个参数指定一个名字和类型。(这个名字只是为了增加可读性)。
-
完整的函数类型:
let myAdd: (baseValue: number, increment: number) => number = function(x: number, y: number): number { return x + y; };
推断类型
-
在赋值语句的一边指定了类型但是另一边没有类型的话,TypeScript编译器会自动识别出类型。
// myAdd has the full function type let myAdd = function(x: number, y: number): number { return x + y; }; // The parameters `x` and `y` have the type number let myAdd: (baseValue: number, increment: number) => number = function(x, y) { return x + y; };
参数传递
- 在 TypeScript 中,函数参数传递有多种方式,包括
可选参数
、默认参数
、剩余参数
以及函数重载
。
可选参数
-
可选参数表示在调用函数时可以不传递该参数。在 TypeScript 中,使用问号
?
标记一个参数为可选参数。例如,定义一个计算矩形面积的函数:function calculateRectangleArea(width: number, height?: number): number { if (height) { return width * height; } else { return width * width; } }
-
在这个函数中,第二个参数
height
被标记为可选参数,即调用函数时可以传递或者不传递该参数。如果传递了height
,则计算矩形的面积并返回结果;否则,将width
当做边长计算正方形的面积并返回结果。
默认参数
-
默认参数表示在调用函数时如果不传递该参数,将使用指定的默认值。在 TypeScript 中,使用等号
=
指定一个参数的默认值。例如,定义一个打印消息的函数:function showMessage(message: string = 'Hello'): void { console.log(message); }
-
在这个函数中,我们指定了参数
message
的默认值为'Hello'
,如果调用函数时不传递该参数,则使用默认值。例如:showMessage(); // 输出 'Hello' showMessage('World'); // 输出 'World'
剩余参数
-
剩余参数表示在调用函数时可以传递任意数量的参数,并将它们放在一个数组中。在 TypeScript 中,使用三个点
...
标记一个参数为剩余参数。例如,定义一个计算多个数字之和的函数:function sum(...numbers: number[]): number { let total = 0; for (const num of numbers) { total += num; } return total; }
-
在这个函数中,我们使用剩余参数
...numbers
接收任意数量的数字参数,并计算它们的和。
this
-
众所周知,在 JavaScript 中,this 的指向问题就是一件特别重要但是又很难的一件事情,在 TypeScript 中依然需要花心思在学习 this 的指向上。但在 TypoScript 中,有一件很幸福的事情是,TypeScript 在编译的时候会告诉开发者错误使用 this 的地方,不需要开发者绞尽脑汁去看代码。
-
JavaScript 里,
this
的值在函数被调用的时候才会指定,这是个既强大又灵活的特点,但是开发者需要花点时间弄清楚函数调用的上下文是什么,尤其是在返回一个函数或将函数当做参数传递的时候,会很难。 -
这部分内容如果不太明白的话,可以参考 JavaScript 的 this 指向,因为 JavaScript 和 TypeScript 中 this 的作用是一样的。
函数重载
-
函数重载表示根据传递的参数类型和数量不同,使用不同的函数实现。在 TypeScript 中,可以使用函数重载声明来定义多个函数实现。例如,定义一个文本处理函数:
function processText(text: string): string; function processText(numbers: number[]): number[]; function processText(value: string | number[]): string | number[] { if (typeof value === 'string') { return value.toUpperCase(); } else { return value.map(num => num * 2); } }
-
在这个函数中,我们定义了两个函数实现。当传递的参数是字符串类型时,将其转换为大写并返回;当传递的参数是数字数组类型时,将其中的数字都乘以 2 并返回。
总结
本文介绍了 TypeScript 函数的定义、调用和参数传递方法。通过学习这些知识,可以更好地理解 TypeScript 中的函数概念,并使用 TypeScript 开发更可靠、可维护的程序。