TypeScript中的函数类型定义与类型约束

函数类型定义与类型约束

一、核心概念：类型别名与函数类型

1. 类型别名（Type Alias）

定义

类型别名使用 type 关键字为现有类型创建一个新名称，可以用于：

基础类型（如 string、number）；
复杂类型（如函数类型、对象类型、联合类型、元组等）。

函数类型别名的语法

type FunctionTypeAlias = (param1: Type1, param2: Type2, ...): ReturnType => { ... };

作用

类型复用：避免重复编写相同的类型表达式。
可读性：通过有意义的名称（如 GreetFunction）提升代码可读性。
类型约束：确保函数参数和返回值的类型符合预期。

二、示例代码详解

1. 类型别名定义函数类型

type GreetFunction = (a: string) => void;

关键点

参数名称的必要性：
- 参数名 a 在类型定义中是必须的，但实际函数的参数名可以不同。
- 如果省略参数名（如 (string) => void），TypeScript 会将其解释为：
  - 参数名为 string，类型为 any（因为未显式指定类型），导致类型错误。
返回值类型 void：
- 表示函数无返回值，若函数尝试返回值，TypeScript 会报错。

2. 函数 `greeter` 的定义

function greeter(fn: GreetFunction) {fn("Hello");
}

关键点

类型约束：
- fn 必须符合 GreetFunction 类型，即：
  - 接受一个 string 类型参数。
  - 无返回值。
类型安全：
- 如果传入的函数不符合类型要求，TypeScript 会在编译阶段直接报错，避免运行时错误。

3. 函数调用示例

合法用例

// 合法：函数参数类型和返回值类型匹配
function print(s: string) {console.log(s);
}
greeter(print); // 合法

错误用例

// 错误 1：参数类型不匹配
greeter((num: number) => console.log(num)); // 报错！参数类型是 number，但需要 string// 错误 2：返回值类型不匹配
function greetWithReturn(s: string): string {return "Hello, " + s;
}
greeter(greetWithReturn); // 报错！返回值类型是 string，但需要 void

三、为什么需要这种写法？

优势

类型复用：

如果需要多次使用相同函数类型，只需引用类型别名：

// 多次使用 GreetFunction 类型
function anotherGreeter(fn1: GreetFunction, fn2: GreetFunction) {fn1("Hi");fn2("Hello");
}

可读性：

类型别名（如 GreetFunction）比直接写 (a: string) => void 更直观，尤其在复杂类型中：

// 复杂类型示例：带可选参数和默认值的函数类型
type Logger = (message: string, level: string = "info") => void;

类型约束：
- 确保函数参数和返回值的类型安全，避免因类型不匹配导致的运行时错误。

四、对比直接使用函数类型表达式

直接定义函数类型

// 直接写函数类型表达式
function greeter(fn: (a: string) => void) {fn("Hello");
}

区别

特性	类型别名	直接类型表达式
可读性	更清晰（如 `GreetFunction` 名称直观）	复杂类型时代码冗长且难读
复用性	可复用（在多个函数中引用）	无法复用，需重复书写类型
维护性	修改类型时只需改一处	需修改所有使用该类型的函数
复杂类型	支持联合类型、交叉类型等复杂场景	仅适合简单类型定义

五、扩展：更复杂的函数类型

1. 带返回值的函数类型

// 定义带返回值的函数类型
type MathFunction = (a: number, b: number) => number;// 使用类型别名
function calculate(fn: MathFunction, a: number, b: number): number {return fn(a, b);
}// 调用示例
const sum = calculate((x, y) => x + y, 1, 2); // 合法，返回 3

2. 可选参数与默认值

// 定义可选参数和默认值的函数类型
type Logger = (message: string, level?: string) => void;// 使用类型别名
function log(fn: Logger) {fn("Error occurred"); // 合法，level 可选fn("Warning", "high"); // 合法，level 为 "high"
}// 合法函数实现
function consoleLog(message: string, level = "info") {console.log(`[${level}] ${message}`);
}
log(consoleLog); // 合法

3. 剩余参数（Rest Parameters）

// 定义接受任意数量参数的函数类型
type LoggerWithArgs = (...messages: string[]) => void;// 使用类型别名
function logAll(fn: LoggerWithArgs) {fn("Error", "Warning", "Info"); // 合法
}// 合法函数实现
function multiLog(...messages: string[]) {messages.forEach((msg) => console.log(msg));
}
logAll(multiLog); // 合法

六、与泛型结合：增强类型灵活性

1. 泛型函数类型

// 定义泛型函数类型：返回第一个参数
type FirstElement<T> = (arr: T[]) => T | undefined;// 使用类型别名
function getFirst<T>(fn: FirstElement<T>, arr: T[]): T | undefined {return fn(arr);
}// 调用示例
const numbers = [1, 2, 3];
const firstNumber = getFirst<number>(firstElement, numbers); // 类型是 number | undefined

2. 泛型约束

// 约束函数参数必须包含 length 属性
type HasLength = { length: number };
type GetLongest<T extends HasLength> = (a: T, b: T) => T;// 使用类型别名
function compareLength<T extends HasLength>(fn: GetLongest<T>, a: T, b: T): T {return fn(a, b);
}// 合法调用
const str1 = "apple";
const str2 = "banana";
const longestStr = compareLength<string>(longest, str1, str2); // 返回 "banana"

七、实际应用场景

1. 回调函数类型约束

// 定义回调函数类型：接收错误和数据
type Callback<T> = (err: Error | null, data: T | null) => void;// 使用类型别名
function fetchData<T>(url: string, callback: Callback<T>) {// 模拟异步请求callback(null, { data: "success" } as T);
}// 调用示例
fetchData<string>("https://api.example.com", (err, data) => {if (err) console.error(err);else console.log(data); // 类型是 string | null
});

2. 高阶函数（Higher-Order Functions）

// 定义高阶函数类型：接受函数并返回函数
type HigherOrderFunction = (fn: (a: number) => number) => (b: number) => number;// 使用类型别名
function createAdder(hof: HigherOrderFunction): (b: number) => number {return hof((a) => a + 1);
}// 合法实现
const adder = createAdder((fn) => (b) => fn(b) * 2);
console.log(adder(3)()); // 输出 8（(3+1)*2）