函数

TypeScript函数的定义和调用

TypeScript 函数的定义和调用与 JavaScript 函数的定义和调用基本相同。

函数的定义：

在 TypeScript 中，可以使用 function 关键字来定义函数。例如：

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

• add 是函数的名称。
• (x: number, y: number) 是函数的参数列表，其中 x 和 y 是参数的名称，: number 表示它们的类型为数字。
• : number 表示函数的返回类型为数字。
• { return x + y; } 是函数体，表示函数要执行的操作。

注意，在 TypeScript 中，可以通过给参数指定类型和返回类型来增强代码的可读性和安全性。而且，TypeScript 还支持可选参数、默认参数、剩余参数等高级特性，可以让我们更加灵活地定义函数。

函数的调用：

在 TypeScript 中，可以像 JavaScript 一样直接调用函数。例如：

const result = add(1, 2);
console.log(result); // 输出 3

这里将两个数字作为参数传递给 add 函数，并将结果存储在 result 变量中。然后，使用 console.log() 函数将结果输出到控制台。

TypeScript可选参数和默认参数

TypeScript中的可选参数和默认参数是函数参数的两种类型。

可选参数是在函数定义时通过在参数名称后面添加问号 ? 来指定的。这意味着该参数可以传递一个值，也可以不传递任何值。如果调用函数时未传递可选参数，则它将具有默认值 undefined。

例如：

function foo(x: number, y?: number) {console.log(`x = ${x}, y = ${y}`);
}foo(1); // 输出 "x = 1, y = undefined"
foo(1, 2); // 输出 "x = 1, y = 2"

默认参数是在函数定义时为参数指定的值。如果调用函数时未传递参数，则该参数将使用默认值。

例如：

function bar(x: number, y = 10) {console.log(`x = ${x}, y = ${y}`);
}bar(1); // 输出 "x = 1, y = 10"
bar(1, 2); // 输出 "x = 1, y = 2"

需要注意的是，如果一个函数同时具有可选参数和默认参数，则可选参数必须放在默认参数之前。

例如：

function baz(x: number, y = 10, z?: number) {console.log(`x = ${x}, y = ${y}, z = ${z}`);
}baz(1); // 输出 "x = 1, y = 10, z = undefined"
baz(1, 2); // 输出 "x = 1, y = 2, z = undefined"
baz(1, 2, 3); // 输出 "x = 1, y = 2, z = 3"

剩余参数

在 TypeScript 中，剩余参数（rest parameters）是一种语法，它允许函数接受可变数量的参数。当你不知道函数会接收多少个参数时，剩余参数可以非常有用。

剩余参数以三个点（…）开头，并且必须是函数的最后一个参数。在函数内部，剩余参数会被转换为一个数组，该数组包含所有传递给函数的额外参数。

例如，以下函数使用了剩余参数：

function sum(base: number, ...numbers: number[]): number {let total = base;for (const num of numbers) {total += num;}return total;
}console.log(sum(1, 2, 3, 4)); // 输出10
console.log(sum(5)); // 输出5

在上面的示例中，sum 函数接受一个名为 base 的必需参数和任意数量的额外数字参数。当我们调用 sum 时，剩余参数 ...numbers 将传递给函数，并将其转换为一个包含所有额外参数的数组。

需要注意的是，剩余参数只能出现在函数声明中的最后一个参数位置，并且不能在同一个函数中出现多次。

函数重载

在 TypeScript 中，函数重载是一种机制，允许我们定义多个函数签名，以处理不同类型和数量的参数。这样做可以提高代码的可读性和安全性。

函数重载通过在函数定义前使用相同名称但不同的参数列表来实现。在实际调用时，TypeScript 编译器会根据传递的参数类型和数量选择合适的函数签名进行调用。如果没有匹配的函数签名，则编译器会报错。

例如，下面是一个计算两个数字之和的例子：

function add(x: number, y: number): number {return x + y;
}let result = add(1, 2); // result === 3

我们可以通过函数重载来扩展该函数，使其也能够计算字符串的拼接：

function add(x: number, y: number): number;
function add(x: string, y: string): string;
function add(x: any, y: any): any {return x + y;
}let result1 = add(1, 2);     // result1 === 3
let result2 = add("Hello", "World");   // result2 === "HelloWorld"

上面的代码中，我们定义了两个函数签名，分别接受两个数字和两个字符串作为参数，并返回它们的和或拼接结果。最后一个函数定义是一个通用实现，用于处理所有类型的参数。使用函数重载后，无论在何处调用 add 函数，TypeScript 编译器都可以选择正确的函数签名进行调用。

typescript的箭头函数

在TypeScript中，箭头函数的语法与JavaScript相同，使用箭头符号“=>”来定义函数。例如：

const add = (a: number, b: number) => {return a + b;
};

这个例子中，箭头函数用于定义一个加法函数，它接受两个参数a和b，并返回它们的和。在函数体内部，我们使用了return关键字来返回计算结果。

箭头函数还有一个更简短的写法，如果函数体只有一行代码，则可以省略花括号和return关键字。例如：

const add = (a: number, b: number) => a + b;

这个例子中，箭头函数定义的加法函数仅有一个表达式，它直接返回了计算结果。这种写法比较常见，尤其是在函数体非常简短的情况下。

另外，箭头函数还具有自动绑定this关键字的特性，它们的this指向它们声明时所在的上下文对象。例如：

class MyClass {private value: number = 10;public printValue() {setTimeout(() => {console.log(this.value);}, 1000);}
}const obj = new MyClass();
obj.printValue(); // 输出: 10

在这个例子中，箭头函数被用于setTimeout函数的回调中，它可以访问MyClass类实例的私有属性value，并且不需要使用bind方法来手动绑定this关键字。这种特性非常方便，减少了代码的复杂度。