前端学习之旅 —— TypeScript 学习笔记（2）

函数

函数定义

• 直接声明

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

• 函数表达式

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

// 箭头函数
let add = (a: number, b: number): number => {
    return a + b;
}

// 进一步简化
let add = (a: number, b: number): number => a + b;

• 接口定义

interface Add {
    (a: number, b: number): number;
}
let add: Add = function(a: number, b: number) {
    return a + b;
};

可选参数&默认参数

// name 这个参数可以传入，也可以不传入
function helloFn(name?: string) {
	console.log("hello, " + (name ? name : "pro"));
}

// 当name 不传入时，赋默认值
function helloFn(name: string = "pro") {
    console.log("hello, " + name);
}

剩余参数

将没有显式声明的参数合并为数组，方便处理不确定数量的参数

function showArgs(a: number, ...rest) {
   	console.log(a, rest); // 输出 1, [2, 3, 4];
	// 区别
    console.log(arguments); // 输出：arguments对象，注意这不是数组, key是index，value为对应值，可以通过 Array.prototype.slice.call(arguments) 转换为数组
}

showArgs(1, 2, 3, 4);

这段代码中省略了剩余参数的类型，推导为any[]，在确定类型时，可以定义为具体类型的数组，如number[]

重载

同名函数，但参数个数或参数类型不同，调用时，编译器会根据参数自动去匹配对应的函数

// 函数声明
function add(a: number, b: number): number;
function add(a: string, b: string): string;

// 函数实现
function add(a: number | string, b: number | string): number | string {
    if (typeof a === 'number' && typeof b === 'number') {
        return a + b;
    } else if (typeof a === 'string' && typeof b === 'string') {
        return a + b;
    }
    throw new Error("type error");
}

泛型函数

能够让函数支持不同类型的输入输出

function printLog<T>(a: T): void {
    console.log(a);
}

printLog(1);
printLog("error");