6_TypeScript 函数 --[深入浅出 TypeScript 测试]

在 TypeScript 中，函数是编程的核心组成部分之一。TypeScript 不仅继承了 JavaScript 的所有函数特性，还添加了静态类型检查和其他一些增强功能，使得函数更加安全和易于理解。以下是关于 TypeScript 函数的一些关键点和两个具体的示例：

TypeScript 函数的基本概念

1. 函数声明：

   • 使用 function 关键字来声明一个函数。

2. 函数表达式：

   • 将函数作为值赋给变量。

3. 箭头函数：

   • 一种更简洁的函数定义方式，没有自己的 this、arguments、super 或 new.target 绑定。

4. 参数类型注解：

   • 可以为每个参数指定类型。

5. 返回值类型注解：

   • 指定函数的返回值类型。

6. 可选参数：

   • 使用 ? 来标记参数为可选。

7. 默认参数：

   • 为参数提供默认值。

8. 剩余参数：

   • 使用 ... 来表示可以传递任意数量的参数。

9. 重载：

   • 提供多个函数签名以支持多种调用方式。

函数定义

在 TypeScript 中，函数定义可以非常灵活，并且可以通过添加类型注解来确保参数和返回值的类型正确性。以下是几种定义函数的方式，包括普通函数、箭头函数以及带有类型注解的函数定义。

1. 普通函数定义

使用 function 关键字来定义一个函数。你可以为每个参数指定类型，并且可以指定返回值的类型。

function greet(name: string): string {return `Hello, ${name}!`;
}// 使用示例
console.log(greet("Alice")); // 输出：Hello, Alice!

在这个例子中，greet 函数接收一个 string 类型的参数 name 并返回一个 string 类型的问候信息。

2. 箭头函数定义

箭头函数提供了一种更简洁的语法来定义函数。它们没有自己的 this 绑定，通常用于较短的函数表达式。

const add = (a: number, b: number): number => a + b;// 使用示例
console.log(add(5, 3)); // 输出：8

这里我们定义了一个名为 add 的箭头函数，它接收两个 number 类型的参数并返回它们的和。

3. 函数类型注解

你也可以定义一个函数类型的变量或接口，这有助于更好地描述函数的结构。

函数类型别名

type GreetFunction = (name: string) => string;const greetPerson: GreetFunction = (name) => `Hello, ${name}!`;// 使用示例
console.log(greetPerson("Bob")); // 输出：Hello, Bob!

接口定义函数类型

interface IGreetFunction {(name: string): string;
}const greetVisitor: IGreetFunction = function(name) {return `Welcome, ${name}!`;
};// 使用示例
console.log(greetVisitor("Charlie")); // 输出：Welcome, Charlie!

4. 可选参数和默认参数

TypeScript 支持可选参数（通过在参数后加 ?）和默认参数（直接赋值给参数）。

function createUser(name: string, age?: number, country: string = "Unknown"): string {return `User: ${name}, Age: ${age !== undefined ? age : 'Not provided'}, Country: ${country}`;
}// 使用示例
console.log(createUser("David")); // 输出：User: David, Age: Not provided, Country: Unknown
console.log(createUser("Eve", 29, "Canada")); // 输出：User: Eve, Age: 29, Country: Canada

5. 剩余参数（Rest Parameters）

当你不确定会有多少个参数时，可以使用剩余参数。这些参数会被收集到一个数组中。

function sum(...numbers: number[]): number {return numbers.reduce((acc, curr) => acc + curr, 0);
}// 使用示例
console.log(sum(1, 2, 3, 4, 5)); // 输出：15

6. 函数重载

TypeScript 允许为同一个函数提供多个调用签名，以支持多种调用方式。这是通过函数重载实现的。

function makeArray<T>(...items: T[]): T[];
function makeArray(): any[];function makeArray<T>(...items: T[]): T[] {return items;
}// 使用示例
console.log(makeArray<number>(1, 2, 3)); // 输出：[1, 2, 3]
console.log(makeArray()); // 输出：[]

以上就是 TypeScript 中定义函数的一些常见方式。每种方法都有其适用场景，选择合适的方法可以使代码更加清晰和易于维护。通过使用类型注解，我们可以提前捕获许多潜在的错误，提高代码的质量。

调用函数

调用函数在 TypeScript 中与 JavaScript 中的方式相同，但 TypeScript 提供了类型检查来确保传入的参数和返回值符合预期。以下是两个具体的示例，展示了如何定义并调用函数。

示例 1: 调用一个简单的函数

假设我们有一个函数 greet，它接收一个名字作为参数，并返回一个问候信息。我们将展示如何定义这个函数以及如何调用它。

// 定义函数
function greet(name: string): string {return `Hello, ${name}!`;
}// 调用函数并输出结果
const message = greet("Alice");
console.log(message); // 输出：Hello, Alice!

在这个例子中，我们定义了一个名为 greet 的函数，它接受一个字符串类型的参数 name 并返回一个字符串。然后，我们通过传递参数 "Alice" 来调用该函数，并将返回的结果存储在变量 message 中，最后打印出这条消息。

示例 2: 调用带有多个参数和默认参数的函数

接下来，我们定义一个更复杂的函数 createProfile，它可以接收多个参数，包括可选参数和默认参数。我们将演示如何使用不同的参数组合来调用这个函数。

// 定义函数
function createProfile(name: string, age?: number, country: string = "Unknown"): string {return `Profile - Name: ${name}, Age: ${age !== undefined ? age : 'Not provided'}, Country: ${country}`;
}// 第一次调用函数，只提供必填参数
const profile1 = createProfile("Bob");
console.log(profile1); // 输出：Profile - Name: Bob, Age: Not provided, Country: Unknown// 第二次调用函数，提供所有参数
const profile2 = createProfile("Charlie", 30, "Canada");
console.log(profile2); // 输出：Profile - Name: Charlie, Age: 30, Country: Canada

在这个例子中：

• createProfile 函数定义了三个参数：name 是必需的，age 是可选的（通过 ? 标记），而 country 则有一个默认值 "Unknown"。
• 我们首先调用了 createProfile，仅提供了必需的 name 参数。由于 age 是可选的且未提供，因此它的值被显示为 'Not provided'，同时 country 使用了默认值。
• 然后，我们再次调用 createProfile，这次提供了所有的参数，因此输出中包含了完整的个人信息。

这两个示例展示了 TypeScript 中调用函数的基本方式，以及如何处理不同类型的参数（如必需参数、可选参数和默认参数）。TypeScript 的类型系统确保了即使在编译时也能捕捉到错误的参数类型或数量，从而提高了代码的健壮性和安全性。

函数返回值

在 TypeScript 中，函数的返回值类型可以通过显式声明来确保代码的安全性和可预测性。通过指定返回值类型，TypeScript 可以帮助开发者捕获潜在的错误，并使代码更易于理解。以下是两个具体的示例，展示了如何定义具有明确返回值类型的函数以及如何使用这些函数。

示例 1: 返回简单数据类型

假设我们有一个函数 calculateArea，它接收一个圆的半径并返回该圆的面积。我们将展示如何定义这个函数并调用它，同时指定返回值类型为 number。

// 定义函数，指定返回值类型为 number
function calculateArea(radius: number): number {return Math.PI * radius * radius;
}// 调用函数并输出结果
const area = calculateArea(5);
console.log(`圆的面积是: ${area.toFixed(2)}`); // 输出：圆的面积是: 78.54

在这个例子中：

• calculateArea 函数接收一个 number 类型的参数 radius 并返回一个 number 类型的结果。
• 我们通过传递参数 5 来调用该函数，并将返回的面积值存储在变量 area 中。
• 使用 toFixed(2) 方法格式化输出，保留两位小数。

示例 2: 返回复杂数据类型（对象）

接下来，我们定义一个函数 createUserProfile，它接收用户信息并返回一个包含这些信息的对象。我们将演示如何定义和调用这个函数，同时指定返回值类型为一个接口或类型别名。

// 定义返回值的类型
interface UserProfile {name: string;age: number;country: string;
}// 定义函数，指定返回值类型为 UserProfile 接口
function createUserProfile(name: string, age: number, country: string): UserProfile {return {name,age,country};
}// 调用函数并输出结果
const profile = createUserProfile("Alice", 30, "China");
console.log(`用户资料 - 名字: ${profile.name}, 年龄: ${profile.age}, 国家: ${profile.country}`);
// 输出：用户资料 - 名字: Alice, 年龄: 30, 国家: China

在这个例子中：

• 我们首先定义了一个 UserProfile 接口，用于描述返回对象的结构。
• createUserProfile 函数接收三个参数，并返回一个符合 UserProfile 接口的对象。
• 我们通过传递参数 "Alice", 30, 和 "China" 来调用该函数，并将返回的对象存储在变量 profile 中。
• 最后，我们打印出用户资料的信息。

这两个示例展示了如何在 TypeScript 中为函数指定返回值类型。第一个例子处理的是简单的数值计算，而第二个例子则涉及到了返回复杂的数据结构（如对象）。通过明确指定返回值类型，我们可以确保函数的行为更加清晰和可靠，同时也提高了代码的维护性和扩展性。

带参数函数

在 TypeScript 中，定义带参数的函数是非常常见的操作。通过为参数指定类型，可以确保传入的数据符合预期，从而提高代码的安全性和可读性。以下是两个具体的示例，展示了如何定义和使用带参数的函数。

示例 1: 带有基本类型参数的函数

假设我们有一个函数 calculateDiscount，它接收商品的价格和折扣率，并返回打折后的价格。我们将展示如何定义这个函数并调用它，同时指定参数和返回值的类型。

// 定义函数，指定参数和返回值类型
function calculateDiscount(price: number, discountRate: number): number {return price * (1 - discountRate);
}// 调用函数并输出结果
const originalPrice = 200;
const discountRate = 0.2; // 20% 折扣
const discountedPrice = calculateDiscount(originalPrice, discountRate);
console.log(`原价 ${originalPrice} 打折后是: ${discountedPrice.toFixed(2)}`); // 输出：原价 200 打折后是: 160.00

在这个例子中：

• calculateDiscount 函数接收两个 number 类型的参数 price 和 discountRate，并返回一个 number 类型的结果。
• 我们通过传递参数 200（原价）和 0.2（20%折扣率）来调用该函数，并将返回的打折后价格存储在变量 discountedPrice 中。
• 使用 toFixed(2) 方法格式化输出，保留两位小数。

示例 2: 带有对象参数的函数

接下来，我们定义一个函数 greetUser，它接收一个包含用户信息的对象作为参数，并返回一个个性化的问候消息。我们将演示如何定义和调用这个函数，同时指定参数类型为一个接口或类型别名。

// 定义参数类型的接口
interface User {name: string;age?: number; // 可选属性country: string;
}// 定义函数，指定参数类型为 User 接口
function greetUser(user: User): string {return `Hello, ${user.name}! You are from ${user.country}.${user.age !== undefined ? ` You are ${user.age} years old.` : ''}`;
}// 调用函数并输出结果
const user1: User = { name: "Alice", country: "China" };
const user2: User = { name: "Bob", age: 30, country: "USA" };console.log(greetUser(user1)); // 输出：Hello, Alice! You are from China.
console.log(greetUser(user2)); // 输出：Hello, Bob! You are from USA. You are 30 years old.

在这个例子中：

• 我们首先定义了一个 User 接口，用于描述用户对象的结构，其中 age 是一个可选属性。
• greetUser 函数接收一个符合 User 接口的对象作为参数，并返回一个字符串类型的个性化问候消息。
• 我们创建了两个不同的用户对象 user1 和 user2，分别调用 greetUser 函数，并根据用户的详细信息打印出不同的问候消息。

这两个示例展示了如何在 TypeScript 中定义带参数的函数。第一个例子处理的是简单的数值计算，而第二个例子则涉及到了更复杂的数据结构（如对象）。通过明确指定参数类型，我们可以确保函数的行为更加清晰和可靠，同时也提高了代码的维护性和扩展性。

匿名函数

在 TypeScript 中，匿名函数是没有名字的函数表达式。它们可以被赋值给变量、作为参数传递给其他函数（即回调函数），或者立即执行（IIFE）。匿名函数同样支持 TypeScript 的类型系统，允许你为参数和返回值指定类型。以下是两个具体的示例，展示了如何定义和使用匿名函数。

示例 1: 匿名函数作为变量

在这个例子中，我们将一个匿名函数赋值给变量 addNumbers，然后调用这个变量来执行函数。

// 定义匿名函数并赋值给变量
const addNumbers = function (a: number, b: number): number {return a + b;
};// 调用匿名函数
console.log(addNumbers(5, 3)); // 输出：8

在这个例子中：

• 我们定义了一个匿名函数，并将其赋值给常量 addNumbers。
• 这个匿名函数接收两个 number 类型的参数 a 和 b，并返回它们的和。
• 我们通过调用 addNumbers 来执行该匿名函数，并输出结果。

示例 2: 匿名函数作为回调函数

在这个例子中，我们创建一个名为 processNumbers 的函数，它接受一个数组和一个处理每个元素的回调函数作为参数。我们将匿名函数作为回调函数传递给 processNumbers。

// 定义一个函数，接收数组和一个回调函数作为参数
function processNumbers(numbers: number[], callback: (num: number) => number): number[] {return numbers.map(callback);
}// 使用匿名函数作为回调函数
const squaredNumbers = processNumbers([1, 2, 3, 4], function (num: number): number {return num * num;
});console.log(squaredNumbers); // 输出：[1, 4, 9, 16]

在这个例子中：

• processNumbers 函数接收一个数字数组 numbers 和一个回调函数 callback。它使用 map 方法将数组中的每个元素传递给回调函数，并返回一个新的数组。
• 我们调用 processNumbers，并将一个匿名函数作为回调函数传递给它。这个匿名函数接收一个 number 类型的参数 num，并返回它的平方。
• 最后，我们打印出处理后的数组 squaredNumbers，其内容是原数组中每个元素的平方。

这两个示例展示了匿名函数在 TypeScript 中的两种常见用途：作为变量存储的函数表达式和作为回调函数传递给其他函数。通过这种方式，你可以创建灵活且易于复用的代码结构，同时利用 TypeScript 的类型检查确保代码的安全性和可读性。

构造函数

在 TypeScript 中，构造函数是用于创建和初始化对象的特殊方法。它们通常与类一起使用，当通过 new 关键字实例化类时自动调用。构造函数可以接受参数来设置新对象的初始状态。以下是两个具体的示例，展示了如何定义和使用构造函数。

示例 1: 带有基本类型属性的类构造函数

假设我们有一个 Person 类，它包含姓名和年龄两个属性。我们将展示如何定义这个类以及它的构造函数，并实例化该类以创建新的 Person 对象。

// 定义一个带有构造函数的 Person 类
class Person {name: string;age: number;constructor(name: string, age: number) {this.name = name;this.age = age;}// 定义一个方法来描述对象describe(): string {return `${this.name} is ${this.age} years old.`;}
}// 使用构造函数创建 Person 实例
const alice = new Person("Alice", 30);
console.log(alice.describe()); // 输出：Alice is 30 years old.const bob = new Person("Bob", 25);
console.log(bob.describe()); // 输出：Bob is 25 years old.

在这个例子中：

• Person 类有两个属性 name 和 age，以及一个构造函数，它接收两个参数并分别赋值给这两个属性。
• describe 方法返回一个字符串，描述了 Person 对象的信息。
• 我们使用 new 关键字和构造函数来创建 alice 和 bob 这两个 Person 实例，并调用 describe 方法输出它们的描述信息。

示例 2: 构造函数参数属性简化

TypeScript 提供了一种更简洁的方式来定义构造函数参数和类属性。你可以直接在构造函数参数前添加访问修饰符（如 public, private, 或 protected），这将自动创建相应的类属性，并将其初始化为传入的值。

// 定义一个带有构造函数参数属性简化的 Book 类
class Book {constructor(public title: string, public author: string, private year: number) {}// 定义一个方法来获取书籍信息getInfo(): string {return `${this.title} by ${this.author}, published in ${this.year}`;}
}// 使用构造函数创建 Book 实例
const book1 = new Book("The Great Gatsby", "F. Scott Fitzgerald", 1925);
console.log(book1.getInfo()); // 输出：The Great Gatsby by F. Scott Fitzgerald, published in 1925// 注意：year 是私有属性，不能从外部访问
// console.log(book1.year); // 编译错误：'year' 是私有的，只能在类 'Book' 内部访问。

在这个例子中：

• Book 类使用了构造函数参数属性简化语法，其中 title 和 author 被标记为 public，因此可以直接在实例上访问；而 year 被标记为 private，所以它只能在类内部访问。
• getInfo 方法返回一个字符串，包含了书籍的详细信息。
• 我们创建了一个 book1 的 Book 实例，并调用了 getInfo 方法来输出书籍信息。
• 尝试访问私有属性 year 会导致编译错误，体现了 TypeScript 的访问控制机制。

这两个示例展示了如何在 TypeScript 中定义和使用构造函数。第一个例子提供了一个基本的例子，说明了如何在构造函数中初始化属性；第二个例子则展示了如何利用 TypeScript 的特性来简化代码，同时保持良好的封装性和安全性。

函数重载

TypeScript 的函数重载（Function Overloading）允许你为同一个函数提供多个调用签名。这使得你可以根据传入参数的数量和类型，以不同的方式调用同一个函数。通过定义多个函数声明来描述所有可能的调用方式，然后编写一个通用的实现。以下是两个具体的示例，展示了如何使用函数重载。

示例 1: 处理不同类型的数据

假设我们有一个 format 函数，它可以根据传入的是字符串还是数字来格式化输出。我们将展示如何定义这个函数的重载签名以及其实现。

// 定义函数重载签名
function format(input: string): string;
function format(input: number): string;// 实现通用函数
function format(input: string | number): string {if (typeof input === 'string') {return `"${input}"`;} else if (typeof input === 'number') {return input.toFixed(2);}throw new Error('Unsupported type');
}// 使用示例
console.log(format("Hello")); // 输出："Hello"
console.log(format(3.14159)); // 输出：3.14

在这个例子中：

• 我们定义了两个重载签名，分别处理字符串和数字类型的输入。
• 实现部分接受联合类型 string | number，并根据实际传入的参数类型进行相应的处理。
• 当传递字符串时，返回带引号的字符串；当传递数字时，返回保留两位小数的字符串表示。
• 如果传入了不支持的类型，则抛出错误。

示例 2: 接受不同数量的参数

接下来，我们定义一个 createRectangle 函数，它可以创建矩形对象。该函数既可以接收宽度和高度作为参数，也可以只接收一个正方形的边长。我们将展示如何使用函数重载来实现这一点。

// 定义函数重载签名
function createRectangle(width: number, height: number): { width: number; height: number };
function createRectangle(size: number): { width: number; height: number };// 实现通用函数
function createRectangle(a: number, b?: number): { width: number; height: number } {if (b !== undefined) {// 如果提供了两个参数，则认为是宽和高return { width: a, height: b };} else {// 如果只提供了一个参数，则认为是正方形的边长return { width: a, height: a };}
}// 使用示例
const rect1 = createRectangle(10, 20);
console.log(`Rectangle with width ${rect1.width} and height ${rect1.height}`); // 输出：Rectangle with width 10 and height 20const square = createRectangle(5);
console.log(`Square with side length ${square.width}`); // 输出：Square with side length 5

在这个例子中：

• 我们定义了两个重载签名，一个用于接收两个参数（宽度和高度），另一个用于接收单个参数（正方形的边长）。
• 实现部分检查是否提供了第二个参数。如果有，则创建一个具有指定宽度和高度的矩形；如果没有，则创建一个边长为给定值的正方形。
• 通过调用 createRectangle 并传递不同数量的参数，我们可以创建不同类型的几何图形。

这两个示例展示了 TypeScript 中函数重载的强大功能。第一个例子说明了如何根据参数类型的不同来改变函数的行为，而第二个例子则展示了如何根据提供的参数数量来调整函数的功能。函数重载使代码更加灵活且易于扩展，同时保持了类型安全性和清晰的接口定义。