目录
引言定义 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 开发更可靠、可维护的程序。
好文链接
您阅读本篇文章共花了：
发表评论