TypeScript详解三：函数_ts 通过字符串调用方法

TypeScript中函数的介绍

本文将介绍 TypeScript 中函数的基本用法。

1. 函数的定义

函数可以使用function关键字定义，如下所示：

function fn1(name: string): void {
  console.log(name); // Tom
}
fn1('Tom');

1
2
3
4
5

这段代码定义了一个函数 fn1，该函数接受一个名为 name 的字符串参数，并将其打印到控制台上。

2. 函数表达式

函数表达式是一种将函数赋值给变量的方式，如下所示：

type Fn2Type = (x: string, y: string) => string;
let fn2: Fn2Type = function (firstName: string, lastName: string): string {
  return firstName + lastName;
};
console.log(fn2('张', '三')); // 张三

1
2
3
4
5
6

这个示例定义了一个类型为 Fn2Type 的函数类型，并将其赋值给变量 fn2。我们可以使用fn2变量调用该函数。

3. 可选参数

在 TypeScript 中，我们可以使用?符号来定义可选参数。可选参数可以不传递，如下所示：

// 1).可选参数 ?代表参数可选，age可传可不传
function fn3(name: string, age?: number): void {
  console.log(name); // 张三
}
fn3('张三');

// 2).可选参数，参数有默认值
function fn4(url: string, method: string = 'POST'): void {
  console.log(url, method); // /list POST
}
fn4('/list');

1
2
3
4
5
6
7
8
9
10
11
12

这个示例定义了两个函数fn3和 fn4，它们都有可选参数。在调用这些函数时，我们可以选择传递或不传递可选参数。

4. 剩余参数

在 TypeScript 中，我们可以使用...符号来定义剩余参数。剩余参数可以接受任意数量的参数，并将它们作为数组传递给函数，如下所示：

function fn5(...numbers: number[]): number {
  return numbers.reduce((val, item) => val + item, 0);
}
console.log(fn5(1, 2, 3, 4)); // 10

1
2
3
4
5

这个示例定义了一个函数 fn5，它接受任意数量的数字参数，并将它们加起来返回。

5. 函数重载

函数重载是一种在 TypeScript 中定义多个具有相同名称但参数类型和数量不同的函数的技术。这可以帮助我们编写更清晰和类型安全的代码。以下是一个示例：

let obj: any = {};
function fn6(val: string): void;
function fn6(val: number): void;
function fn6(val: any): void {
  if (typeof val === 'string') {
    obj.name = val;
  } else if (typeof val === 'number') {
    obj.age = val;
  }
}
fn6('张三');
fn6(10);
// 此时就无法传递布尔值了
// fn6(true);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

这个示例定义了一个函数 fn6，它使用了函数重载来处理不同类型的参数。如果参数类型为字符串，则将其赋值给 obj 对象的name属性；如果参数类型为数字，则将其赋值给obj对象的age属性。

---

总结

本文介绍了 TypeScript 中函数的基本用法，包括函数的定义、函数表达式、可选参数、剩余参数和函数重载等。通过本文的学习，相信您对 TypeScript 中函数的使用有了更深入的了解。下次再见。