源码 https://github.com/webabcd/TypeScriptDemo
作者 webabcd

兼收并蓄 TypeScript - 类: function

示例如下:

class\function.ts

{
    // 定义函数时要指定参数的类型和返回值的类型，无返回值时可以用 void 表示
    function f1(x:number, y:number):number {
        return x + y;
    }
    function f2(x:string, y:string):void {
        
    }
    // 返回值的类型也可以推导出来
    function f3(x:number, y:number) {
        return x * y
    }
    // 允许在函数参数列表和调用时使用尾随逗号（这个逗号没有实际意义，只是为了可以方便地添加或删除参数）
    function f4(x:number, y:number, ) {

    }
    f4(1, 2)
    f4(1, 2, )


    // 参数默认值
    function a(p1:string, p2:string="webabcd"):string {
        return `${p1} ${p2}`;
    }
    console.log(`${a("hello", "wanglei")}, ${a("hello")}`);
    // hello wanglei, hello webabcd


    // 可选参数
    function b(p1:string, p2?:string):string {
        return `${p1} ${p2}`;
    }
    console.log(`${b("hello", "wanglei")}, ${b("hello")}`);
    // hello wanglei, hello undefined


    // 通过 ... 定义剩余参数，用于接收指定类型的可变数量的参数
    function c(p1:string, ...values:string[]) {
        let result = "";
        for (let i = 0; i < values.length; i++) {
            result += values[i];
        }
        return `${p1} ${result}`;
    }
    console.log(`${c("1", "2", "3", "4", "5")}`);
    // 1 2345
}

{
    // 箭头函数（lambda 表达式）
    let a = ():string => "hello"; // 无参数，通过一行表达式实现返回值
    let b = (p1:string, p2:string):string => `${p1} ${p2}`; // 多个参数，通过一行表达式实现返回值
    let c = (p1:string, p2:string):string => { // 通过多行表达式实现返回值（加上大括号即可）
        let result = `${p1} ${p2}`;
        return result;
    };
    let d = function (p1:string, p2:string):string { // 经典的 function 方式
        let result = `${p1} ${p2}`;
        return result;
    };
    console.log(`${a()}, ${b("hello", "webabcd")}, ${c("hello", "webabcd")}, ${d("hello", "webabcd")}`);
    // hello, hello webabcd, hello webabcd, hello webabcd
}

{
    // 通过函数声明（Function Declaration）的方式定义函数
    function f1(x: number, y: number): number {
        return x + y;
    }

    // 通过函数表达式（Function Expression）的方式定义函数
    let f2 = function (x: number, y: number): number {
        return x + y;
    };

    // 上面的函数 f2 的类型是推导出来的，如果写全的话就像下面这样
    // 这里的 => 不是 es6 中的箭头函数
    // 这里的 => 是用来定义函数类型的，左边是输入类型，需要用括号括起来，右边是输出类型
    let f3: (x: number, y: number) => number = function (x: number, y: number): number {
        return x + y;
    };
}

{
    // 通过接口定义函数的形状
    interface MyInterface {
        (p1: string, p2: string): string;
    }
    let a: MyInterface = function(p1: string, p2: string) {
        return `${p1} ${p2}`;
    }
    console.log(a("hello", "webabcd")); // hello webabcd
}

{
    // es6 是不支持函数重载的
    // typescript 可以通过如下方式支持函数重载
    function myFunc(x: number): number;
    function myFunc(x: string): string;
    function myFunc(x: number | string): number | string | void {
        if (typeof x === 'number') {
            return x * 2;
        } else if (typeof x === 'string') {
            return `hello ${x}`;
        } else {
            // void
        }
    }
    console.log(myFunc(100), myFunc("webabcd")); // 200 hello webabcd
}

源码 https://github.com/webabcd/TypeScriptDemo
作者 webabcd