TypeScript 函数的基本介绍

港控/mmm° 2022-09-04 00:53 173阅读 0赞

### 函数介绍 ###

// 函数：封装了一些重复使用的代码，在需要的时候直接调用即可
    (() => {
        // 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'));
    })()