TypeScript函数参数 #

一、必需参数 #

1.1 基本用法 #

typescript 
function greet(name: string): string {
    return `Hello, ${name}!`;
}

greet('Alice');
greet();
greet('Alice', 'Bob');

1.2 多个必需参数 #

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

function createPoint(x: number, y: number, z: number): [number, number, number] {
    return [x, y, z];
}

二、可选参数 #

2.1 基本用法 #

使用?标记可选参数：

typescript 
function greet(name: string, greeting?: string): string {
    if (greeting) {
        return `${greeting}, ${name}!`;
    }
    return `Hello, ${name}!`;
}

greet('Alice');
greet('Alice', 'Hi');

2.2 可选参数必须在必需参数之后 #

typescript 
function greet(greeting?: string, name: string): string {
    return `${greeting}, ${name}!`;
}

function greet(name: string, greeting?: string): string {
    return `${greeting || 'Hello'}, ${name}!`;
}

2.3 可选参数的类型 #

可选参数自动包含undefined类型：

typescript 
function greet(name: string, greeting?: string): string {
    console.log(typeof greeting);
    return `${greeting || 'Hello'}, ${name}!`;
}

2.4 检查可选参数 #

typescript 
function process(value?: string): void {
    if (value === undefined) {
        console.log('No value provided');
        return;
    }
    console.log(`Processing: ${value}`);
}

三、默认参数 #

3.1 基本用法 #

typescript 
function greet(name: string, greeting: string = 'Hello'): string {
    return `${greeting}, ${name}!`;
}

greet('Alice');
greet('Alice', 'Hi');
greet('Alice', undefined);

3.2 默认参数的位置 #

默认参数可以在任意位置：

typescript 
function greet(greeting: string = 'Hello', name: string): string {
    return `${greeting}, ${name}!`;
}

greet(undefined, 'Alice');
greet('Hi', 'Bob');

3.3 默认值的类型推断 #

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

const result = add(5);

3.4 默认值表达式 #

typescript 
function append(element: string, array: string[] = []): string[] {
    array.push(element);
    return array;
}

function createTimestamp(date: Date = new Date()): number {
    return date.getTime();
}

3.5 默认参数vs可选参数 #

typescript 
function withDefault(name: string, greeting: string = 'Hello'): string {
    return `${greeting}, ${name}!`;
}

function withOptional(name: string, greeting?: string): string {
    return `${greeting || 'Hello'}, ${name}!`;
}

withDefault('Alice');
withDefault('Alice', undefined);

withOptional('Alice');
withOptional('Alice', undefined);

四、剩余参数 #

4.1 基本用法 #

typescript 
function sum(...numbers: number[]): number {
    return numbers.reduce((acc, num) => acc + num, 0);
}

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

4.2 与其他参数结合 #

typescript 
function log(level: string, ...messages: string[]): void {
    console.log(`[${level}]`, ...messages);
}

log('INFO', 'User', 'logged', 'in');
log('ERROR', 'Something went wrong');

4.3 元组类型的剩余参数 #

typescript 
function printCoord(...coord: [number, number]): void {
    console.log(`(${coord[0]}, ${coord[1]})`);
}

printCoord(10, 20);

4.4 泛型剩余参数 #

typescript 
function combine<T>(...arrays: T[][]): T[] {
    return arrays.flat();
}

combine([1, 2], [3, 4], [5, 6]);

五、解构参数 #

5.1 对象解构 #

typescript 
function printCoord({ x, y }: { x: number; y: number }): void {
    console.log(`(${x}, ${y})`);
}

printCoord({ x: 10, y: 20 });

5.2 带默认值的解构 #

typescript 
function printCoord({ x, y }: { x: number; y: number } = { x: 0, y: 0 }): void {
    console.log(`(${x}, ${y})`);
}

printCoord();
printCoord({ x: 10, y: 20 });

5.3 解构默认值 #

typescript 
function createUser({ 
    name, 
    age = 0, 
    email = 'unknown' 
}: { 
    name: string; 
    age?: number; 
    email?: string 
}): void {
    console.log(name, age, email);
}

createUser({ name: 'Alice' });
createUser({ name: 'Bob', age: 25 });
createUser({ name: 'Charlie', age: 30, email: 'charlie@example.com' });

5.4 数组解构 #

typescript 
function printFirstTwo([first, second]: number[]): void {
    console.log(`First: ${first}, Second: ${second}`);
}

printFirstTwo([1, 2, 3, 4, 5]);

5.5 接口定义 #

typescript 
interface UserOptions {
    name: string;
    age?: number;
    email?: string;
}

function createUser(options: UserOptions): void {
    const { name, age = 0, email = 'unknown' } = options;
    console.log(name, age, email);
}

六、this参数 #

6.1 this类型 #

typescript 
interface User {
    name: string;
    greet(this: User): void;
}

const user: User = {
    name: 'Alice',
    greet() {
        console.log(`Hello, ${this.name}!`);
    }
};

user.greet();

const greet = user.greet;
greet();

6.2 箭头函数 #

typescript 
class User {
    name: string;
    
    constructor(name: string) {
        this.name = name;
    }
    
    greet = (): void => {
        console.log(`Hello, ${this.name}!`);
    };
}

const user = new User('Alice');
const greet = user.greet;
greet();

6.3 this参数类型 #

typescript 
function greet(this: { name: string }): void {
    console.log(`Hello, ${this.name}!`);
}

const context = { name: 'Alice', greet };
context.greet();

七、参数类型推断 #

7.1 自动推断 #

typescript 
const numbers = [1, 2, 3, 4, 5];

numbers.forEach(num => {
    console.log(num.toFixed(2));
});

const users = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 30 }
];

users.forEach(user => {
    console.log(user.name);
});

7.2 上下文类型 #

typescript 
type Handler = (event: Event) => void;

const handler: Handler = event => {
    console.log(event.type);
};

document.addEventListener('click', event => {
    console.log(event.clientX, event.clientY);
});

八、参数类型工具 #

8.1 Parameters工具类型 #

typescript 
function createUser(name: string, age: number, email: string): User {
    return { name, age, email };
}

type CreateUserParams = Parameters<typeof createUser>;

const params: CreateUserParams = ['Alice', 25, 'alice@example.com'];
createUser(...params);

8.2 ReturnType工具类型 #

typescript 
function createUser(name: string, age: number): { name: string; age: number } {
    return { name, age };
}

type User = ReturnType<typeof createUser>;

const user: User = { name: 'Alice', age: 25 };

8.3 第一个参数类型 #

typescript 
type FirstParam<T extends (...args: any) => any> = Parameters<T>[0];

function greet(name: string, age: number): void {}

type Name = FirstParam<typeof greet>;

九、实用示例 #

9.1 配置对象模式 #

typescript 
interface FetchOptions {
    url: string;
    method?: 'GET' | 'POST' | 'PUT' | 'DELETE';
    headers?: Record<string, string>;
    body?: any;
    timeout?: number;
}

function fetch(options: FetchOptions): Promise<Response> {
    const { 
        url, 
        method = 'GET', 
        headers = {}, 
        body, 
        timeout = 5000 
    } = options;
    
    return window.fetch(url, {
        method,
        headers,
        body,
        signal: AbortSignal.timeout(timeout)
    });
}

9.2 构建器模式 #

typescript 
interface QueryBuilder {
    table(name: string): this;
    select(...columns: string[]): this;
    where(condition: string): this;
    orderBy(column: string, direction?: 'ASC' | 'DESC'): this;
    limit(count: number): this;
    build(): string;
}

function createQueryBuilder(): QueryBuilder {
    let query = '';
    
    return {
        table(name: string) {
            query = `SELECT * FROM ${name}`;
            return this;
        },
        select(...columns: string[]) {
            query = query.replace('*', columns.join(', '));
            return this;
        },
        where(condition: string) {
            query += ` WHERE ${condition}`;
            return this;
        },
        orderBy(column: string, direction: 'ASC' | 'DESC' = 'ASC') {
            query += ` ORDER BY ${column} ${direction}`;
            return this;
        },
        limit(count: number) {
            query += ` LIMIT ${count}`;
            return this;
        },
        build() {
            return query;
        }
    };
}

9.3 事件处理 #

typescript 
type EventHandler = (event: Event) => void;

function addEventListener(
    element: HTMLElement,
    event: string,
    handler: EventHandler,
    options?: AddEventListenerOptions
): void {
    element.addEventListener(event, handler, options);
}

addEventListener(
    document.body,
    'click',
    event => console.log(event.target),
    { once: true }
);

十、总结 #

本章介绍了TypeScript函数参数的各种类型：

参数类型 #

  1. 必需参数：必须提供的参数
  2. 可选参数：使用?标记，可以不提供
  3. 默认参数：提供默认值的参数
  4. 剩余参数：使用...收集多个参数
  5. 解构参数：解构对象或数组参数

最佳实践 #

  1. 可选参数放在必需参数之后
  2. 使用默认参数提供合理的默认值
  3. 使用解构参数提高可读性
  4. 使用接口定义复杂参数类型
  5. 使用工具类型获取参数类型
最后更新：2026-03-26