TypeScript--4.函数

函数在各个语言里用的太多了,就不赘述,只讨论一下TypeScript的函数跟JS的函数不同的地方.

1.函数类型

TypeScript里的函数需要给参数和返回值都指定类型,它能够根据返回语句,自动判断返回值类型,通常都可以省略

function add(x: number, y: number):number{    
    return x + y;
}
console.log(add(1, 2));

接下来看一下函数的完整类型,参数类型和返回值类型用=>隔开

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

2.可选参数和默认参数

当参数可传可不传的时候,就可以在对应的参数名旁边加上?修饰,实现可选参数功能,如果没传值,对应形参值是undefined.要把可选的参数放到参数最后面

function buildName(firstName: string, lastName?: string){
    console.log(firstName + " " + lastName);
}
buildName("龙哥");
buildName("东旭", "龙哥");

默认参数在ES6之后,JS的函数也能设置.

function buildName(firstName: string, lastName = "赵") { 
    return firstName + " " + lastName;
}

3.剩余参数 Rest参数

这个也是ES6里新出现的特性,在JS里有一个非常重要的对象arguments,即使不写形参,也可以通过arguments获取到形参内容.剩余参数会被当做个数不限的可选参数,可以一个都没有,同样也可以有任意个.编译器创建参数数组,名字是你在省略号( ... )后面给定的名字,你可以在函数体内使用这个数组.

function buildName(firstName: string, ...restOfName: string[]) {
    console.log(restOfName);
}
buildName("赵", "钱", "孙", "李");

4.this和箭头函数

在JS里,this的使用对于很多初学者来说,会出很多问题,很多问题都出现在this的指向,如果真出问题,大家可以先打印一下this的指向,看一个例子

let deck = {    
    name: ["宋江", "卢俊义", "吴用", "公孙胜"],    
    test: function() {        
        return function() {            
            let num1 = Math.floor(Math.random() * 52);            
            let num2 = Math.floor(num1 / 13);            
            console.log(this.name);            
            return {suit: this.name[num2], card: num1 % 13};        }    
    }
}
let cardPicker = deck.test();
let pickedCard = cardPicker();
console.log(pickedCard);

这里打印出来suit的内容是undefined,原因就是出现在this的问题,这里的this实际上指代的是window,因为deck是window的变量,window上没有name的变量,所以当取值的时候,就是undefined,还是this指向的问题.ES6里,可以使用箭头函数来解决这种指代.箭头函数能报错函数创建时候的this,而不是调用时候的this

let deck = {    
    name: ["宋江", "卢俊义", "吴用", "公孙胜"],    
    test: function() {        
        return ()=> {            
            let num1 = Math.floor(Math.random() * 52);            
            let num2 = Math.floor(num1 / 13);            
            console.log(this.name);            
            return {suit: this.name[num2], card: num1 % 13};        }    
    }
}

TypeScript里的对象,属性都有对应类型,可以在接口里设置this的类型,上述例子里的this对应的都是any类型,通过类型也能避免指向问题

interface Deck {    
    suits: string[];   
    test(this: Deck)=>Deck;
}
let deck: Deck = {    
    suits:["宋江", "卢俊义", "吴用", "公孙胜"],    
    test: function(this: Deck) {        
    return () => {            
        let num1 = Math.floor(Math.random() * 52);           
        let num2 = Math.floor(num1 / 13);            
        return {suit: this.name[num2], card: num1 % 13};        
      }    
    }
}