TypeScript 函数的基本介绍

函数介绍

// 函数：封装了一些重复使用的代码，在需要的时候直接调用即可
(() => {
    // js写法
    // 函数声明，命名函数
    // function add(x, y) {
    //     return x + y
    // }
    // 函数表达式，匿名函数
    // const add2 = function (x, y) {
    //     return x + y
    // }

    // ts写法
    // 函数声明，命名函数
    // 函数中的x和y参数的类型是string类型，小括号后面的:string，代表的是该函数的返回值也是string类型
    function add(x: string, y: string): string {
        return x + y
    }
    console.log(add('123', '456'));

    // 函数表达式，匿名函数
    const add2 = function (x: number, y: number): number {
        return x + y
    }
    console.log(add2(11, 22));

    // 函数的完整写法
    const add3: (x: number, y: number) => number = function (x: number, y: number): number {
        return x + y
    }
    console.log(add3(10, 100));

})()

可选参数和默认参数

// 可选参数：函数在声明的时候，内部的参数使用了?进行修饰，那么就表示该参数可以传入也可以不用传入，叫可选参数
// 默认参数：函数在声明的时候，内部的参数有自己的默认值，此时这个参数叫默认参数
(() => {
    const getFullName = function (firstName: string = '东方', lastName?: string): string {
        if (lastName) {
            return firstName + '_' + lastName
        } else {
            return firstName
        }
    }

    // 函数调用
    // 什么也不用传入
    console.log(getFullName());
    // 只传入姓氏
    console.log(getFullName('诸葛'));
    // 传入姓氏和名字
    console.log(getFullName('诸葛', '孔明'));
})()

剩余参数

// 剩余参数(rest参数)
// 剩余参数是放在函数的声明的时候所有的参数的最后
(() => {
    // ...args:string[]  --->剩余的参数，放在一个字符串的数组中，args里面
    function showMsg(str: string, str2: string, ...args: string[]) {
        console.log(str);
        console.log(str2);
        console.log(args);
    }
    showMsg('a', 'b', 'c', 'd', 'e', 'f')
})()

函数重载

// 函数重载：函数名字相同，函数的参数及个数不同
(() => {
    // 函数重载声明
    function add(x: string, y: string): string
    function add(x: number, y: number): number

    // 函数声明
    function add(x: string | number, y: string | number) {
        if (typeof x === 'string' && typeof y === 'string') {
            return x + y
        } else if (typeof x === 'number' && typeof y === 'number') {
            return x + y
        }
    }
    // 函数调用
    console.log(add('诸葛', '孔明'));
    console.log(add(10, 20));
    // 如果此时传入的为非法数据，ts会提示错误
    console.log(add('12', 20));
    console.log(add(10, '21'));
})()