TypeScript学习笔记6-函数类型

函数类型

在 TypeScript 中，函数类型提示是一种方法，用于声明函数的类型信息。它允许你在编写函数时指定参数的类型和返回值的类型，从而增加了代码的可读性和可维护性，同时还能在编译时进行类型检查。

函数类型提示有两种方式：分别是函数声明和箭头函数。

function add(x:number,y:number):number{
    return x+y;
}

const add = (x:number,y:number):number =>{
    return x+y;
}

注意。在函数类型提示中，参数和返回值的类型声明都是可选的。如果你省略了类型声明，TypeScript 会根据上下文进行类型推断。但是，通常为了代码的清晰和可读性，最好还是明确地声明函数的类型。

这里的类型还支持更加复杂的类型，1比如可选参数，默认参数和剩余次数

 可选参数和默认参数：

function greet(name: string, greeting: string = "Hello", punctuation?: string): string {
    if (punctuation) {
        return `${greeting}, ${name}${punctuation}`;
    } else {
        return `${greeting}, ${name}`;
    }
}

（greeting的参数类型是string，默认值是Hello，punctation的参数类型是stiring，但其背后紧跟了一个？，说明他是可选的）

【注意：如果有可选参数，你不能直接在函数体种直接运用可选参数，必须进行判断，比如if判断可选参数是否为undefined】

【注意2！：可选参数和默认参数不可能是同一个参数噢（因为默认参数就是不传的时候值为默认值）】

剩余参数：

是 TypeScript 中用于表示函数可以接受不定数量的参数的一种方式。它允许你定义一个参数，用来收集函数调用时传入的多余参数，将它们收集到一个数组中。

在函数类型提示中，剩余参数使用省略号 (...) 表示，紧跟在参数名的后面。通常，剩余参数会放在函数参数列表的最后面。

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

const result = sumAll(1, 2, 3, 4, 5);
console.log(result); // 输出：15

 参数还可以是接口类型，这样子可以有类型提示

比如

interface getUserListRequest {
    page?:number
    limit?:number
    key?:string
    name?:string
}

function getUserList(params:getUserListRequest){
    console.log(params.limit) // 有类型提示
}

另外，ts是支持函数重载的，而js不支持

函数重载允许为同一个函数提供多个函数类型定义，在不同的参数组合或返回值类型下执行不同的实现。

function double(value: number): number;
function double(value: string): string;
function double(value: any): any {
    if (typeof value === 'number') {
        return value * 2;
    } else if (typeof value === 'string') {
        return value.repeat(2);
    }
}

const result1 = double(10); // result1 的类型为 number，值为 20
const result2 = double('hello'); // result2 的类型为 string，值为 'hellohello'