第 2.2 章：函数与接口

⚡ 函数类型注解

TypeScript 允许你为函数的参数和返回值添加类型注解，使函数签名成为一份明确的契约。

普通函数写法：

function add(a: number, b: number): number {
    return a + b;
}

function greet(name: string): string {
    return `你好，${name}！`;
}

// 返回 void 表示没有返回值
function log(message: string): void {
    console.log(message);
}

等价的箭头函数写法：

const add = (a: number, b: number): number => a + b;

const greet = (name: string): string => `你好，${name}！`;

// 多行箭头函数
const processData = (input: string): string[] => {
    const parts = input.split(",");
    return parts.map(p => p.trim());
};

❓ 可选参数与默认值

用 ? 标记可选参数，用 = 设置默认值，用 ...args 收集剩余参数。

// 可选参数：middleName 可以不传
function fullName(first: string, last: string, middleName?: string): string {
    return middleName ? `${first} ${middleName} ${last}` : `${first} ${last}`;
}

fullName("张", "三");           // "张 三"
fullName("张", "三", "小明");   // "张 小明 三"

// 默认值：有默认值的参数自动变为可选
function createUrl(path: string, base: string = "https://api.example.com"): string {
    return `${base}${path}`;
}

createUrl("/users");                     // "https://api.example.com/users"
createUrl("/users", "http://localhost");  // "http://localhost/users"

// 剩余参数：收集任意数量的参数
function sum(...numbers: number[]): number {
    return numbers.reduce((acc, n) => acc + n, 0);
}

sum(1, 2, 3, 4, 5);  // 15

🔀 函数重载

当一个函数根据不同的输入类型返回不同的类型时，可以使用重载签名来精确描述这种行为。

// 重载签名（仅声明，不实现）
function parse(input: string): number;
function parse(input: number): string;
// 实现签名（必须兼容所有重载）
function parse(input: string | number): number | string {
    if (typeof input === "string") {
        return parseInt(input, 10);
    }
    return input.toString();
}

const num = parse("42");    // 类型推断为 number
const str = parse(42);      // 类型推断为 string

更实用的例子——根据参数数量重载：

function createElement(tag: string): HTMLElement;
function createElement(tag: string, content: string): HTMLElement;
function createElement(tag: string, content?: string): HTMLElement {
    const el = document.createElement(tag);
    if (content) el.textContent = content;
    return el;
}

📐 interface 接口

接口用于描述对象的形状（shape），是 TypeScript 最核心的类型构建工具之一。

interface User {
    id: number;
    name: string;
    email: string;
    age?: number;               // 可选属性
    readonly createdAt: Date;   // 只读属性
}

const user: User = {
    id: 1,
    name: "张三",
    email: "zhang@example.com",
    createdAt: new Date(),
};

// user.createdAt = new Date(); // ❌ 编译错误：readonly 不可修改

索引签名——当你不确定属性名但知道值类型时：

interface StringMap {
    [key: string]: string;
}

const headers: StringMap = {
    "Content-Type": "application/json",
    "Authorization": "Bearer token123",
};

interface NumberArray {
    [index: number]: string;
    length: number;
}

🧬 接口继承与组合

接口可以通过 extends 继承其他接口，支持多继承。

interface HasId {
    id: number;
}

interface HasTimestamps {
    createdAt: Date;
    updatedAt: Date;
}

// 继承多个接口
interface User extends HasId, HasTimestamps {
    name: string;
    email: string;
}

// 等价于手写所有属性：
// interface User {
//     id: number;
//     createdAt: Date;
//     updatedAt: Date;
//     name: string;
//     email: string;
// }

const user: User = {
    id: 1,
    name: "李四",
    email: "li@example.com",
    createdAt: new Date(),
    updatedAt: new Date(),
};

🏷️ type 别名

type 关键字可以为任何类型创建别名，比 interface 更灵活。

// 基本别名
type ID = string | number;
type Status = "active" | "inactive" | "banned";

// 对象类型（与 interface 类似）
type Point = {
    x: number;
    y: number;
};

// 联合类型
type Result<T> = { success: true; data: T } | { success: false; error: string };

// 交叉类型（合并多个类型）
type WithId = { id: number };
type WithName = { name: string };
type Entity = WithId & WithName;  // { id: number; name: string }

// 使用内置工具类型
type PartialUser = Partial<User>;       // 所有属性变为可选
type ReadonlyUser = Readonly<User>;     // 所有属性变为只读
type UserName = Pick<User, "name" | "email">;  // 只取部分属性

🔗 函数类型与回调

TypeScript 可以精确描述回调函数和高阶函数的类型签名。

// 用 type 定义函数类型
type Callback = (data: string) => void;
type Predicate<T> = (item: T) => boolean;
type Transformer<T, U> = (input: T) => U;

// 使用函数类型
function fetchData(url: string, onSuccess: Callback, onError: Callback): void {
    // ...
}

// 高阶函数：接收函数，返回函数
function filter<T>(arr: T[], predicate: Predicate<T>): T[] {
    return arr.filter(predicate);
}

const numbers = [1, 2, 3, 4, 5];
const evens = filter(numbers, n => n % 2 === 0);  // [2, 4]

// 工厂函数模式
type Logger = (message: string) => void;

function createLogger(prefix: string): Logger {
    return (message: string) => {
        console.log(`[${prefix}] ${message}`);
    };
}

const appLog = createLogger("APP");
appLog("启动完成");  // "[APP] 启动完成"

interface SearchFunc {
    (source: string, keyword: string): boolean;
}

const search: SearchFunc = (src, kw) => src.includes(kw);