TypeScript函数定义：参数与返回值的类型注解详解
函数参数的类型注解
在 TypeScript 中，为函数参数添加类型注解是确保函数输入数据类型正确性的重要手段。这不仅有助于发现早期错误，还能提高代码的可读性和可维护性。
基本类型参数注解
- 数字类型参数
当函数接受数字类型参数时，我们可以明确标注参数类型为
number。例如，定义一个简单的加法函数：
function addNumbers(a: number, b: number): number {
return a + b;
}
let result = addNumbers(5, 3);
console.log(result);
在上述代码中，addNumbers 函数的参数 a 和 b 都被注解为 number 类型，这样 TypeScript 编译器就能确保调用该函数时传入的参数是数字类型。如果我们尝试传入非数字类型的值，比如：
let wrongResult = addNumbers(5, 'three');
TypeScript 编译器会报错，提示 Argument of type '"three"' is not assignable to parameter of type 'number'，这能有效避免运行时由于类型不匹配而产生的错误。
- 字符串类型参数
对于接受字符串类型参数的函数，我们使用
string进行注解。比如，一个将两个字符串拼接的函数：
function concatenateStrings(str1: string, str2: string): string {
return str1 + str2;
}
let concatenated = concatenateStrings('Hello, ', 'world!');
console.log(concatenated);
这里 concatenateStrings 函数的 str1 和 str2 参数都被指定为 string 类型，确保只有字符串才能作为参数传入。
- 布尔类型参数 有些函数可能依赖于布尔值来执行不同的逻辑。例如，一个根据布尔值返回不同字符串的函数：
function getMessage(isSuccess: boolean): string {
if (isSuccess) {
return 'Operation was successful';
} else {
return 'Operation failed';
}
}
let successMessage = getMessage(true);
console.log(successMessage);
getMessage 函数的 isSuccess 参数被注解为 boolean 类型，这使得代码意图更加明确，并且防止传入其他类型的值。
数组类型参数注解
- 单一类型数组参数
如果函数接受一个数组作为参数，并且数组中的元素类型是单一的，我们可以使用
类型[]的形式进行注解。例如，计算数组中所有数字之和的函数：
function sumArray(numbers: number[]): number {
return numbers.reduce((acc, num) => acc + num, 0);
}
let numberArray = [1, 2, 3, 4, 5];
let sum = sumArray(numberArray);
console.log(sum);
这里 sumArray 函数的 numbers 参数被定义为 number[]，即数字类型的数组。这样在调用函数时，传入的必须是数字数组，否则会引发类型错误。
- 元组类型数组参数 元组是一种特殊的数组，它的元素类型和数量是固定的。假设我们有一个函数，接受一个包含两个字符串的元组数组，并将每个元组的两个字符串拼接：
function concatenateTupleArray(tuples: [string, string][]): string[] {
return tuples.map(([str1, str2]) => str1 + str2);
}
let tupleArray: [string, string][] = [['Hello, ', 'world!'], ['Goodbye, ', 'cruel world']];
let concatenatedArray = concatenateTupleArray(tupleArray);
console.log(concatenatedArray);
在这个例子中，concatenateTupleArray 函数的 tuples 参数被注解为 [string, string][]，表示这是一个包含两个字符串的元组数组。
对象类型参数注解
- 简单对象参数 当函数接受一个对象作为参数时，我们需要明确对象的属性类型。例如，定义一个打印用户信息的函数：
function printUser(user: { name: string; age: number }): void {
console.log(`Name: ${user.name}, Age: ${user.age}`);
}
let userObj = { name: 'John', age: 30 };
printUser(userObj);
在 printUser 函数中，user 参数被注解为一个具有 name（字符串类型）和 age（数字类型）属性的对象。如果传入的对象缺少这些属性或者属性类型不匹配，TypeScript 编译器会报错。
- 可选属性对象参数
有时候对象的某些属性可能是可选的。我们可以在属性名后加上
?来表示该属性是可选的。比如，一个更新用户信息的函数，其中email属性是可选的：
function updateUser(user: { name: string; age: number; email?: string }): void {
let message = `User ${user.name} (age ${user.age})`;
if (user.email) {
message += ` with email ${user.email}`;
}
console.log(message);
}
let userToUpdate1 = { name: 'Jane', age: 25 };
updateUser(userToUpdate1);
let userToUpdate2 = { name: 'Bob', age: 40, email: 'bob@example.com' };
updateUser(userToUpdate2);
这里 updateUser 函数的 user 参数中，email 属性是可选的，所以在调用函数时，即使传入的对象没有 email 属性，也不会导致类型错误。
- 只读属性对象参数
对于一些不希望被修改的对象属性，我们可以使用
readonly关键字。例如，定义一个表示只读配置的对象参数：
function loadConfig(config: { readonly serverUrl: string; readonly apiKey: string }): void {
console.log(`Loading config with server URL: ${config.serverUrl} and API key: ${config.apiKey}`);
}
let appConfig = { serverUrl: 'https://example.com', apiKey: '123456' };
loadConfig(appConfig);
// 以下代码会报错，因为 serverUrl 是只读属性
// appConfig.serverUrl = 'https://newexample.com';
在 loadConfig 函数中，config 参数的 serverUrl 和 apiKey 属性都被定义为只读，防止在函数内部意外修改这些属性。
函数类型参数注解
- 作为参数的回调函数 在很多场景下，我们会将一个函数作为另一个函数的参数，即回调函数。例如，一个通用的数组遍历函数，接受一个回调函数来处理数组中的每个元素：
function forEachArray<T>(array: T[], callback: (element: T) => void): void {
for (let i = 0; i < array.length; i++) {
callback(array[i]);
}
}
let numbers = [1, 2, 3];
forEachArray(numbers, (num) => console.log(num));
在 forEachArray 函数中，callback 参数是一个函数类型，它接受一个类型为 T（与数组元素类型相同）的参数，并且没有返回值（void）。这里的 T 是一个类型变量，它会根据传入数组的实际类型进行推断。
- 复杂函数类型参数 如果回调函数有更复杂的参数和返回值，我们需要详细定义其类型。比如，一个数组过滤函数，接受一个回调函数来判断数组元素是否满足条件：
function filterArray<T>(array: T[], callback: (element: T) => boolean): T[] {
let result: T[] = [];
for (let i = 0; i < array.length; i++) {
if (callback(array[i])) {
result.push(array[i]);
}
}
return result;
}
let numbersToFilter = [1, 2, 3, 4, 5];
let evenNumbers = filterArray(numbersToFilter, (num) => num % 2 === 0);
console.log(evenNumbers);
这里 filterArray 函数的 callback 参数是一个函数类型，接受一个类型为 T 的元素，返回一个布尔值，用于决定该元素是否应包含在过滤后的数组中。
联合类型参数注解
- 简单联合类型参数 有时候函数可能接受多种类型的参数。例如，一个打印值的函数，它可以接受字符串或数字类型的参数：
function printValue(value: string | number): void {
console.log(value);
}
printValue('Hello');
printValue(42);
在 printValue 函数中，value 参数被注解为 string | number，这是一个联合类型，表示 value 可以是字符串类型或者数字类型。调用函数时，传入这两种类型中的任何一种都是允许的。
- 联合类型与类型守卫 当函数接受联合类型参数时，我们可以使用类型守卫来在函数内部处理不同类型的逻辑。例如，一个计算值长度的函数，它可以处理字符串和数组：
function getLength(value: string | any[]): number {
if (typeof value ==='string') {
return value.length;
} else if (Array.isArray(value)) {
return value.length;
}
return 0;
}
let stringLength = getLength('test');
let arrayLength = getLength([1, 2, 3]);
console.log(stringLength);
console.log(arrayLength);
在 getLength 函数中，通过 typeof 和 Array.isArray 这样的类型守卫，我们可以在函数内部根据参数的实际类型执行不同的逻辑，以确保正确计算长度。
交叉类型参数注解
- 交叉类型的概念 交叉类型是将多个类型合并为一个类型，它表示一个对象同时具有多个类型的所有属性。例如，定义一个同时具有用户信息和地址信息的对象类型：
type User = { name: string; age: number };
type Address = { street: string; city: string };
type UserWithAddress = User & Address;
function printUserWithAddress(user: UserWithAddress): void {
console.log(`Name: ${user.name}, Age: ${user.age}, Address: ${user.street}, ${user.city}`);
}
let userWithAddressObj: UserWithAddress = { name: 'Alice', age: 28, street: '123 Main St', city: 'Anytown' };
printUserWithAddress(userWithAddressObj);
在这个例子中，UserWithAddress 是 User 和 Address 的交叉类型，printUserWithAddress 函数接受的 user 参数必须是同时具备 User 和 Address 类型属性的对象。
- 交叉类型参数的应用场景 交叉类型在处理需要多种特性组合的对象时非常有用。比如，一个既需要用户认证信息又需要用户偏好设置的函数：
type AuthInfo = { token: string };
type UserPreferences = { theme: string; fontSize: number };
type AuthenticatedUser = AuthInfo & UserPreferences;
function applyUserSettings(user: AuthenticatedUser): void {
console.log(`Applying settings for user with token ${user.token}, theme ${user.theme}, and font size ${user.fontSize}`);
}
let authenticatedUserObj: AuthenticatedUser = { token: 'abc123', theme: 'dark', fontSize: 14 };
applyUserSettings(authenticatedUserObj);
这里 AuthenticatedUser 是 AuthInfo 和 UserPreferences 的交叉类型，applyUserSettings 函数要求传入的对象同时包含认证信息和用户偏好设置，确保了函数在处理相关逻辑时所需的所有信息都存在。
函数返回值的类型注解
除了参数类型注解，为函数返回值添加类型注解同样重要，它能让调用者清楚地知道函数返回的数据类型，有助于代码的理解和维护。
基本类型返回值注解
- 数字类型返回值
当函数返回一个数字时，我们明确标注返回值类型为
number。例如，一个计算两个数乘积的函数：
function multiplyNumbers(a: number, b: number): number {
return a * b;
}
let product = multiplyNumbers(4, 5);
console.log(product);
在 multiplyNumbers 函数中，返回值类型被注解为 number，这使得调用者知道该函数会返回一个数字类型的值。如果函数内部的返回值类型与注解不一致，TypeScript 编译器会报错。
- 字符串类型返回值
对于返回字符串的函数，我们使用
string注解返回值类型。比如，一个将首字母大写的函数：
function capitalizeFirstLetter(str: string): string {
return str.charAt(0).toUpperCase() + str.slice(1);
}
let capitalized = capitalizeFirstLetter('hello');
console.log(capitalized);
capitalizeFirstLetter 函数的返回值类型被指定为 string，保证了调用者可以安全地将返回值当作字符串来处理。
- 布尔类型返回值
有些函数会根据条件返回布尔值，我们需要明确标注返回值类型为
boolean。例如，一个判断数字是否为偶数的函数：
function isEven(num: number): boolean {
return num % 2 === 0;
}
let isNumberEven = isEven(6);
console.log(isNumberEven);
isEven 函数返回一个布尔值，通过返回值类型注解，调用者能清楚地知道函数的返回结果类型，以便正确处理返回值。
数组类型返回值注解
- 单一类型数组返回值
如果函数返回一个数组，并且数组元素类型单一，我们使用
类型[]的形式注解返回值类型。例如，一个生成指定长度数字数组的函数：
function generateNumberArray(length: number): number[] {
let array: number[] = [];
for (let i = 0; i < length; i++) {
array.push(i);
}
return array;
}
let generatedArray = generateNumberArray(5);
console.log(generatedArray);
generateNumberArray 函数返回一个数字类型的数组，通过返回值类型注解 number[]，调用者可以预期到返回的是一个数字数组。
- 元组类型返回值 当函数返回一个元组时，我们要明确元组中每个元素的类型。例如，一个函数返回一个包含最小值和最大值的元组：
function getMinMax(numbers: number[]): [number, number] {
let min = numbers[0];
let max = numbers[0];
for (let i = 1; i < numbers.length; i++) {
if (numbers[i] < min) {
min = numbers[i];
}
if (numbers[i] > max) {
max = numbers[i];
}
}
return [min, max];
}
let numberSet = [3, 1, 4, 1, 5, 9];
let minMaxTuple = getMinMax(numberSet);
console.log(`Min: ${minMaxTuple[0]}, Max: ${minMaxTuple[1]}`);
在 getMinMax 函数中，返回值类型被注解为 [number, number]，表示返回一个包含两个数字的元组，分别代表最小值和最大值。
对象类型返回值注解
- 简单对象返回值 当函数返回一个对象时，我们需要定义对象的属性类型。例如，一个创建用户对象的函数：
function createUser(name: string, age: number): { name: string; age: number } {
return { name, age };
}
let newUser = createUser('Tom', 22);
console.log(newUser);
createUser 函数返回一个具有 name（字符串类型）和 age（数字类型）属性的对象，通过返回值类型注解，调用者可以准确知道返回对象的结构和属性类型。
- 可选属性对象返回值
如果返回的对象包含可选属性，我们同样可以在属性名后加上
?。比如，一个根据条件返回用户信息的函数，其中email属性可能不存在：
function getUserInfo(name: string, age: number, hasEmail: boolean): { name: string; age: number; email?: string } {
let user: { name: string; age: number; email?: string } = { name, age };
if (hasEmail) {
user.email = `${name}@example.com`;
}
return user;
}
let user1 = getUserInfo('Jerry', 25, true);
let user2 = getUserInfo('Mike', 30, false);
console.log(user1);
console.log(user2);
在 getUserInfo 函数中，返回值类型注解包含一个可选的 email 属性，这使得调用者能够正确处理可能存在或不存在 email 属性的返回对象。
函数类型返回值注解
- 返回简单函数类型 有些函数会返回另一个函数，我们需要注解返回的函数类型。例如，一个根据条件返回不同打印函数的函数：
function getPrinter(isUpperCase: boolean): (message: string) => void {
if (isUpperCase) {
return (message) => console.log(message.toUpperCase());
} else {
return (message) => console.log(message.toLowerCase());
}
}
let upperCasePrinter = getPrinter(true);
let lowerCasePrinter = getPrinter(false);
upperCasePrinter('Hello');
lowerCasePrinter('WORLD');
getPrinter 函数返回一个函数，该函数接受一个字符串参数并且没有返回值。通过返回值类型注解 (message: string) => void，调用者清楚知道返回的是一个什么样的函数。
- 返回复杂函数类型 如果返回的函数有更复杂的参数和返回值，我们要详细定义其类型。比如，一个根据数字生成不同操作函数的函数：
function getNumberOperator(num: number): (operand: number) => number {
if (num > 0) {
return (operand) => operand + num;
} else if (num < 0) {
return (operand) => operand - Math.abs(num);
} else {
return (operand) => operand;
}
}
let addFive = getNumberOperator(5);
let subtractThree = getNumberOperator(-3);
let result1 = addFive(10);
let result2 = subtractThree(10);
console.log(result1);
console.log(result2);
在 getNumberOperator 函数中，返回值类型是一个函数类型 (operand: number) => number，表示返回的函数接受一个数字参数并返回一个数字，调用者可以根据返回的函数进行相应的数字操作。
联合类型返回值注解
- 简单联合类型返回值 当函数可能返回多种类型的值时，我们使用联合类型注解返回值。例如，一个根据条件返回字符串或数字的函数：
function getValue(isNumber: boolean): string | number {
if (isNumber) {
return 42;
} else {
return 'forty-two';
}
}
let value1 = getValue(true);
let value2 = getValue(false);
console.log(value1);
console.log(value2);
getValue 函数的返回值类型被注解为 string | number，这表明函数可能返回字符串或者数字，调用者需要根据实际情况处理返回值。
- 联合类型返回值与类型断言
在处理联合类型返回值时，有时候我们需要通过类型断言来明确返回值的具体类型。例如，一个函数可能返回一个字符串或者
null：
function getNullableString(shouldReturnNull: boolean): string | null {
if (shouldReturnNull) {
return null;
} else {
return 'Some string';
}
}
let result = getNullableString(false);
if (result!== null) {
let length = (result as string).length;
console.log(length);
}
在上述代码中，通过 result!== null 的判断后，我们使用类型断言 (result as string) 来明确 result 是字符串类型，从而可以安全地访问其 length 属性。
交叉类型返回值注解
- 交叉类型返回值的定义 虽然交叉类型返回值相对较少见，但在某些情况下也是有用的。例如，一个函数返回一个同时具有用户信息和扩展信息的对象：
type UserBase = { name: string; age: number };
type UserExtra = { occupation: string; hobbies: string[] };
type FullUser = UserBase & UserExtra;
function getFullUser(): FullUser {
return { name: 'Eve', age: 32, occupation: 'Engineer', hobbies: ['reading', 'coding'] };
}
let fullUser = getFullUser();
console.log(fullUser);
在这个例子中，getFullUser 函数返回一个 FullUser 类型的对象，FullUser 是 UserBase 和 UserExtra 的交叉类型，包含了两者的所有属性。
- 交叉类型返回值的应用场景 当我们需要从一个函数获取多种类型信息组合的结果时，交叉类型返回值可以很好地满足需求。比如，一个函数返回既有商品基本信息又有促销信息的对象：
type ProductBase = { name: string; price: number };
type PromotionInfo = { discount: number; expires: string };
type ProductWithPromotion = ProductBase & PromotionInfo;
function getProductWithPromotion(): ProductWithPromotion {
return { name: 'Widget', price: 100, discount: 20, expires: '2024-01-01' };
}
let product = getProductWithPromotion();
console.log(`Product ${product.name} with price ${product.price}, discount ${product.discount} expires on ${product.expires}`);
这里 getProductWithPromotion 函数返回一个 ProductWithPromotion 类型的对象，它是 ProductBase 和 PromotionInfo 的交叉类型，使得调用者可以同时获取商品的基本信息和促销信息。
类型推断与显式类型注解的权衡
在 TypeScript 中，函数参数和返回值的类型注解既可以显式指定，也可以依赖类型推断。了解何时使用显式类型注解以及何时依赖类型推断是编写高质量 TypeScript 代码的关键。
类型推断的优势与局限
- 类型推断的优势 TypeScript 强大的类型推断能力可以在很多情况下自动推断出函数参数和返回值的类型。例如：
function add(a, b) {
return a + b;
}
let sumResult = add(3, 5);
在这个 add 函数中，虽然没有显式地为参数 a 和 b 以及返回值添加类型注解，但 TypeScript 可以根据函数体中的操作和调用时传入的参数类型推断出 a 和 b 是 number 类型，返回值也是 number 类型。这大大减少了代码中的冗余，使代码更简洁。
类型推断在处理复杂的数据结构和函数调用链时也非常有用。例如：
function mapArray(array, callback) {
let result = [];
for (let i = 0; i < array.length; i++) {
result.push(callback(array[i]));
}
return result;
}
let numbersArray = [1, 2, 3];
let squaredArray = mapArray(numbersArray, (num) => num * num);
这里 mapArray 函数的 array 参数和 callback 参数类型以及返回值类型都可以通过类型推断得出，不需要显式注解，代码依然具有类型安全性。
- 类型推断的局限 然而，类型推断也有其局限性。在某些复杂的场景下，类型推断可能无法准确推断出类型，导致类型错误在运行时才被发现。例如：
function processValue(value) {
if (typeof value ==='string') {
return value.length;
} else if (Array.isArray(value)) {
return value.length;
}
return null;
}
let result1 = processValue('test');
let result2 = processValue([1, 2, 3]);
let result3 = processValue(123);
在这个 processValue 函数中，虽然通过类型守卫进行了不同类型的处理，但由于没有显式的类型注解，当传入一个不支持 length 属性的值（如数字 123）时，虽然代码逻辑上可以处理返回 null，但从类型安全性角度，TypeScript 无法在编译时明确指出潜在的问题。如果显式注解 value 参数为 string | any[]，可以在一定程度上提高类型安全性。
另外，当函数的逻辑较为复杂，或者涉及多个相互依赖的函数调用时，类型推断可能会变得模糊，使得代码的可读性降低。例如：
function transformData(data) {
let transformed = [];
for (let i = 0; i < data.length; i++) {
let intermediate = data[i].map((subData) => subData * 2);
let final = intermediate.filter((value) => value > 10);
transformed.push(final);
}
return transformed;
}
let originalData = [[1, 2, 3], [4, 5, 6]];
let transformedData = transformData(originalData);
在这个 transformData 函数中，由于涉及多层数组操作和函数调用，类型推断可能不够清晰，其他开发人员在阅读代码时难以快速理解数据的类型变化。此时，显式添加类型注解可以提高代码的可读性和可维护性。
显式类型注解的好处与注意事项
- 显式类型注解的好处 显式类型注解可以使代码的意图更加明确。对于函数参数和返回值，明确的类型注解就像是文档一样，让其他开发人员（甚至自己在一段时间后回顾代码时）能够快速了解函数的输入和输出要求。例如：
function calculateArea(radius: number): number {
return Math.PI * radius * radius;
}
在 calculateArea 函数中，通过显式注解 radius 参数为 number 类型和返回值为 number 类型，任何人阅读代码时都能立刻明白该函数的用途和数据类型要求。
显式类型注解还可以提高代码的可维护性。当函数的逻辑发生变化，或者调用该函数的地方发生改变时，明确的类型注解可以帮助编译器及时发现类型不匹配的错误。例如，如果 calculateArea 函数的参数类型被误改为 string，TypeScript 编译器会立即报错，而不是等到运行时才发现问题。
在团队开发中，显式类型注解尤为重要。不同的开发人员可能对代码的理解和编写风格有所不同，明确的类型注解可以减少因理解差异而导致的错误，提高代码的一致性和可协作性。
- 显式类型注解的注意事项 虽然显式类型注解有很多好处，但过度使用也可能导致代码变得冗长和难以维护。例如：
function addNumbers(a: number, b: number): number {
return a + b;
}
在这个简单的 addNumbers 函数中，类型推断已经能够很好地确定参数和返回值类型，显式注解虽然明确，但有些冗余。在这种情况下，应优先考虑类型推断，除非有特殊需求（如代码可读性要求极高的关键模块）。
另外，当类型发生变化时，显式类型注解需要及时更新，否则可能会误导开发人员并导致潜在的错误。例如，如果函数的逻辑发生改变，返回值类型从 number 变为 string，但类型注解没有相应更新，就会隐藏实际的类型差异，增加调试的难度。
高级类型注解场景
除了常见的函数参数和返回值类型注解，TypeScript 还提供了一些高级的类型注解场景，以满足更复杂的编程需求。
泛型函数的类型注解
- 泛型函数的基本概念 泛型是 TypeScript 中非常强大的特性，它允许我们在定义函数、类或接口时使用类型变量。对于泛型函数，类型变量可以表示不同的类型，使得函数具有更高的通用性。例如，一个简单的泛型函数用于返回数组中的第一个元素：
function getFirst<T>(array: T[]): T | undefined {
return array.length > 0? array[0] : undefined;
}
let numbersArray = [1, 2, 3];
let firstNumber = getFirst(numbersArray);
let stringArray = ['a', 'b', 'c'];
let firstString = getFirst(stringArray);
在 getFirst 函数中，<T> 表示类型变量 T，它可以代表任何类型。array 参数的类型是 T[]，表示这是一个元素类型为 T 的数组，返回值类型是 T | undefined，即可能返回数组中的第一个元素（类型为 T），也可能因为数组为空而返回 undefined。通过这种方式，getFirst 函数可以用于不同类型的数组，而不需要为每种类型都定义一个单独的函数。
- 泛型函数的多个类型变量 泛型函数可以有多个类型变量。例如，一个交换数组中两个元素位置的泛型函数：
function swap<T, U>(array: [T, U]): [U, T] {
return [array[1], array[0]];
}
let tuple1 = [1, 'a'];
let swappedTuple1 = swap(tuple1);
let tuple2 = [true, 42];
let swappedTuple2 = swap(tuple2);
在 swap 函数中，<T, U> 定义了两个类型变量 T 和 U，array 参数是一个包含两个元素，类型分别为 T 和 U 的元组，返回值是一个元素顺序交换后的元组，类型为 [U, T]。这样，swap 函数可以处理不同类型组合的二元元组。
- 泛型函数的类型约束 有时候，我们需要对泛型类型变量施加一些约束，以确保类型变量满足某些条件。例如，定义一个获取对象属性值的泛型函数，要求对象必须包含指定的属性：
interface HasProperty<T, K extends keyof T> {
(obj: T, key: K): T[K];
}
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key];
}
let user = { name: 'John', age: 30 };
let userName = getProperty(user, 'name');
在 getProperty 函数中，<T, K extends keyof T> 表示类型变量 K 必须是类型 T 的键。通过这种约束，确保了在调用 getProperty 函数时，传入的 key 确实是 obj 对象的一个属性，从而避免运行时因属性不存在而导致的错误。
函数重载的类型注解
- 函数重载的概念
函数重载允许我们在同一个作用域内定义多个同名函数，但这些函数的参数列表不同。在 TypeScript 中，通过函数重载可以为不同的输入场景提供更精确的类型注解。例如，定义一个
printValue函数，它可以接受不同类型的参数并进行不同的打印操作：
function printValue(value: string): void;
function printValue(value: number): void;
function printValue(value: boolean): void;
function printValue(value: any): void {
if (typeof value ==='string') {
console.log(`String: ${value}`);
} else if (typeof value === 'number') {
console.log(`Number: ${value}`);
} else if (typeof value === 'boolean') {
console.log(`Boolean: ${value}`);
}
}
printValue('Hello');
printValue(42);
printValue(true);
在上述代码中，前面三个函数声明是函数重载的签名，它们定义了 printValue 函数可以接受的不同参数类型，最后一个函数实现是实际的函数逻辑，它根据传入参数的类型进行不同的打印操作。通过函数重载，调用者在调用 printValue 函数时，TypeScript 编译器可以根据传入的参数类型选择合适的重载签名，提供更准确的类型检查。
- 函数重载的注意事项 在使用函数重载时，需要注意重载签名的顺序。通常，更具体的重载签名应该放在前面，较通用的重载签名放在后面。例如：
function processValue(value: string): string;
function processValue(value: number): number;
function processValue(value: any): any {
if (typeof value ==='string') {
return value.toUpperCase();
} else if (typeof value === 'number') {
return value * 2;
}
return value;
}
let stringResult = processValue('test');
let numberResult = processValue(5);
如果将 function processValue(value: any): any 放在前面，TypeScript 编译器会优先选择这个通用的重载签名，而忽略更具体的字符串和数字类型的重载签名，导致类型检查不够精确。
另外，函数重载的实现必须能够满足所有的重载签名。也就是说，函数实现的逻辑要能够处理所有重载签名中定义的参数类型，否则会导致运行时错误。
条件类型与函数类型注解
- 条件类型的基本概念
条件类型是 TypeScript 2.8 引入的强大特性，它允许我们根据类型关系选择不同的类型。在函数类型注解中，条件类型可以用于根据函数参数的类型来决定返回值的类型。例如，定义一个
identity函数，它返回与输入参数相同类型的值：
type Identity<T> = T extends string? string : T extends number? number : boolean;
function identity<T>(value: T): Identity<T> {
return value as Identity<T>;
}
let stringValue = identity('Hello');
let numberValue = identity(42);
let booleanValue = identity(true);
在这个例子中，Identity<T> 是一个条件类型，它根据 T 的类型来选择不同的返回类型。如果 T 是字符串类型，返回 string；如果 T 是数字类型，返回 number；否则返回 boolean。identity 函数的返回值类型被注解为 Identity<T>，使得返回值类型与输入参数类型相关联。
- 条件类型在函数重载中的应用
条件类型可以与函数重载结合使用，进一步增强函数的类型灵活性。例如，定义一个
transformValue函数，它根据输入参数的类型进行不同的转换操作：
function transformValue<T extends string>(value: T): string;
function transformValue<T extends number>(value: T): number;
function transformValue<T>(value: T): T extends string? string : T extends number? number : T {
if (typeof value ==='string') {
return value.toUpperCase() as any;
} else if (typeof value === 'number') {
return value * 2 as any;
}
return value;
}
let stringResult = transformValue('test');
let numberResult = transformValue(5);
let otherResult = transformValue({ key: 'value' });
在这个例子中，前面两个函数重载签名使用了条件类型来限制参数类型为 string 或 number，并分别指定了相应的返回值类型。最后一个函数实现使用条件类型来根据输入参数的实际类型进行不同的转换操作，使得函数在处理不同类型参数时具有更精确的类型行为。
映射类型与函数类型注解
- 映射类型的基本概念 映射类型允许我们基于一个已有的类型创建一个新类型，通过对原类型的每个属性进行相同的变换。在函数类型注解中，映射类型可以用于处理对象类型参数或返回值。例如，定义一个将对象的所有属性变为只读的映射类型：
type ReadonlyObject<T> = {
readonly [P in keyof T]: T[P];
};
function createReadonlyObject<T>(obj: T): ReadonlyObject<T> {
return obj as ReadonlyObject<T>;
}
let originalObject = { name: 'Alice', age: 28 };
let readonlyObject = createReadonlyObject(originalObject);
// 以下代码会报错，因为属性是只读的
// readonlyObject.name = 'Bob';
在这个例子中，ReadonlyObject<T> 是一个映射类型，它通过 [P in keyof T] 遍历 T 的所有属性，并将每个属性变为只读。createReadonlyObject 函数接受一个普通对象 obj，并返回一个所有属性为只读的对象，通过这种方式可以保护对象的属性不被意外修改。
- 映射类型在函数参数校验中的应用 映射类型还可以用于函数参数的校验。例如，定义一个函数，它只接受具有特定属性且属性类型符合要求的对象：
type RequiredProperties<T, K extends keyof T> = {
[P in K]-?: T[P];
};
function processObject<T, K extends keyof T>(obj: RequiredProperties<T, K>) {
// 函数逻辑
}
type User = { name: string; age: number; email?: string };
let userObj: User = { name: 'John', age: 30 };
processObject<