TypeScript 函数使用整理

青旅半醒 2022-06-13 05:19 172阅读 0赞

**一、介绍**

函数是JavaScript应用程序的基础。它帮助你实现抽象层、模拟类，信息隐藏和模块。在TypeScript里，虽然已经支持类，命名空间和模块等，但函数仍然是主要定义行为的地方。TypeScript为JavaScript函数添加了额外的功能，例如：形参类型、返回值，this的定义时指定等。

**二、为函数定义类型**

**1.参数类型**

//为函数指定参数类型和返回类型
    function add(x: number, y: number): number {
        return x + y;
    }
    let myAdd = function (x: number, y: number): number { return x + y };

书写完整函数类型：

函数类型包含两部分：参数类型和返回值类型。 当写出完整函数类型的时候，这两部分都是需要的。 我们以参数列表的形式写出参数类型，为每个参数指定一个名字和类型。

第二部分是返回值类型。 对于返回值，我们在函数和返回值类型之前使用( =>)符号，使之清晰明了。 如之前提到的，返回值类型是函数类型的必要部分，如果函数没有返回任何值，你也必须指定返回值类型为 void而不能留空。

let myAdd:(x:number,y:number)=>number=function(x:number,y:number):number{return x+y};

**2.可选参数？ 和 默认值参数**

//可选参数
    //可空参数，必须在形参列表的后边，不然编译出错，除非后面有指定默认值的参数
    //可空参数的默认值都为undefined
    function bindName(firstName?: string, lastName?: string) {
        console.info(`firstName=${firstName},lastName=${lastName}`);
    }
    bindName();

//带默认值的参数不必放在形参列表的最后，这个C#中不相同
    //带默认值的参数放在形参列表的最后，不必显示指定传入内容，默认传入undefined
    //带默认值的参数不再形参的最后，必须显示传入undefined
    function bindName(firstName: string, lastName: string = '张三丰') {
        console.info(`firstName=${firstName},lastName=${lastName}`);
    }
    bindName('wangxiaoming');

//空参数和默认值参数同用
    function bindName(firstName?: string, lastName: string = '张三丰') {
        console.info(`firstName=${firstName},lastName=${lastName}`);
    }
    bindName();
    
    //同名函数，一下编译出错
    function bindName(firstName:string,lastName?:string){
    console.info(`firstName=${firstName},lastName=${lastName}`);
    }
    function bindName(firstName:string,lastName:string='张三丰'){
    console.info(`firstName=${firstName},lastName=${lastName}`);
    }

**3.剩余参数**

//剩余参数
    //方法调用没有传入其他参数则，传入空数组而不会异常
    function bindName(firstName:string,...restOfName:string[]){
        console.log(`firstName=${firstName},other:${restOfName.join('&')}`);
    }
    bindName('张三','a','b','c');

**三、函数中this的使用**

**1.this和箭头函数**

JavaScript里，this的值在函数被调用的时候才会指定。这是个既强大有灵活的特点，但是要需要花点时间弄清楚调用的上下文是什么。

在TypeScript中可以使用箭头函数指定this为定义时当前对象的引用。

//this 和箭头函数
    //JavaSctipt 中的this指向的对象是运行时决定，而不是定义是决定的
    //TypeScript中箭头函数，可以是this指定定义是的对象
    let deck = {
        suits: ['hearts', 'spades', 'clubs', 'diamonds'],
        cards: Array(52),
        createCardPicker: function () {
            return () => {
                let pickedCard = Math.floor(Math.random() * 52);
                let pickedSuit = Math.floor(pickedCard / 13);
                console.info(typeof this);
                
                console.info(this);
                return { suit: this.suits[pickedSuit], card: pickedCard % 13 };
            }
        }
    }
    let cardPicker = deck.createCardPicker();
    let pickedCard = cardPicker();
    console.info(pickedCard);

**2.this参数**

this参数指定箭头函数中this的具体类型

//this 参数的使用
    //this 参数是一个假参数，它出现在参数列表的最前面
    //this 参数指定箭头函数中this的具体类型
    interface Card {
        suit: string;
        card: number;
    }
    interface Deck {
        suits: string[];
        cards: number[];
        createCardPicker(this: Deck): () => Card;
    }
    let deck: Deck = {
        suits: ['hearts', 'spades', 'clubs', 'diamonds'],
        cards: Array(52),
        createCardPicker: function (this: Deck) {
            return () => {
                let pickedCard = Math.floor(Math.random() * 52);
                let pickedSuit = Math.floor(pickedCard / 13);
                console.info(typeof this);
                return { suit: this.suits[pickedSuit], card: pickedCard % 13 };
            }
        }
    }
    let cardPicker=deck.createCardPicker();
    let pickedCard=cardPicker();
    console.info(cardPicker);

3.this在回调函数，暂时略过。

**四、函数重载**

JavaScript本身是动态语言。JavaScript里函数传入不同的参数二返回不同的数据来实现方法重载。

TypeScript中可以指定any类型的形参、返回类型，在函数内部判断处理实现重载。

TypeScript编译器目前对于同作用域的相同的函数名称编译异常，也就是目前不允许有相同名称的函数。

//函数重载
    //TypeScript中，目前出现两个名字相同的函数出现编译异常
    //使用弱类型的形参和返回参数内部定义处理，实现方法重载
    //重载定义，编译不通过
    function pickCard(x: { suit: string; card: number; }): number {
        return 2;
    }
    function pickCard(x: number): { suit: string; card: number; } {
        return { suit: 'asdf', card: 3 };
    }
    //重载实现，编译通过
    function pickCard(x): any {
        if (typeof x == "object") {
            let pickedCard = Math.floor(Math.random() * x.length);
            return pickedCard;
        }
        else if (typeof x == "number") {
            let pickedSuit = Math.floor(x / 13);
            return { suit: suits[pickedSuit], card: x % 13 };
        }
    }

[TypeScript 类使用整理][TypeScript]

[TypeScript 接口介绍][TypeScript 1]

[TypeScript 基础数据类型简介][TypeScript 2]

[TypeScript]: http://blog.csdn.net/u011127019/article/details/73775647
[TypeScript 1]: http://blog.csdn.net/u011127019/article/details/73651009
[TypeScript 2]: http://blog.csdn.net/u011127019/article/details/73613798