学习笔记-TypeScript 函数

TypeScript 函数是在 JavaScript 函数基础上增加了强类型系统的增强实现，以下是核心特性和最佳实践：

一、基础类型标注

▼
typescript
复制代码
// 1. 显式标注参数和返回值类型
function add(x: number, y: number): number {
  return x + y;
}

// 2. 箭头函数类型
const multiply = (a: number, b: number): number => a * b;

// 3. 自动类型推断（返回值类型可省略）
const greet = (name: string) => `Hello, ${name}`; // 推断返回string

二、高级函数特性

1. 可选参数与默认值

▼
typescript
复制代码
// 可选参数必须位于必选参数之后
function buildName(first: string, last?: string, title: string = "Dr.") {
  return `${title} ${first} ${last || ""}`.trim();
}

2. 剩余参数（Rest Parameters）

▼
typescript
复制代码
function sum(...numbers: number[]): number {
  return numbers.reduce((acc, cur) => acc + cur, 0);
}

三、函数重载（Function Overloads）

▼
typescript
复制代码
// 1. 声明重载签名
function parseInput(input: string): Date;
function parseInput(input: number): string;

// 2. 实现函数
function parseInput(input: unknown): Date | string {
  if (typeof input === "string") return new Date(input);
  return new Date(input).toISOString();
}

// 调用时会根据输入类型获得智能提示
const dateResult = parseInput("2023-10-01"); // Date类型
const strResult = parseInput(Date.now());    // string类型

四、泛型函数（Generic Functions）

▼
typescript
复制代码
// 1. 基础泛型
function identity<T>(arg: T): T {
  return arg;
}

// 2. 约束泛型类型
function mergeObjects<T extends object, U extends object>(a: T, b: U): T & U {
  return { ...a, ...b };
}

// 3. 泛型与箭头函数（需在TSX中加上逗号避免语法冲突）
const genericArrow = <T,>(items: T[]): number => items.length;

五、特殊类型工具

1. 函数类型别名

▼
typescript
复制代码
type StringHandler = (input: string) => void;
const logger: StringHandler = (str) => console.log(str.toUpperCase());

2. 参数解构类型标注

▼
typescript
复制代码
function draw({ x, y }: { x: number; y: number }): void {
  console.log(`Drawing at (${x}, ${y})`);
}

六、异步函数处理

▼
typescript
复制代码
async function fetchData<T>(url: string): Promise<T> {
  const response = await fetch(url);
  if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
  return response.json() as Promise<T>;
}

// 使用示例
interface UserData { id: number; name: string }
fetchData<UserData>("https://api.example.com/users/1").then(console.log);

最佳实践建议：

1. 严格空值检查：启用strictNullChecks避免意外null/undefined
2. 优先使用箭头函数：保持this上下文稳定性
3. 合理使用重载：当处理多类型输入时提升类型安全性
4. 利用泛型约束：通过extends限制类型范围保证类型安全