乐趣区

关于前端:现代TypeScript高级教程函数

点击在线浏览,体验更好 链接
古代 JavaScript 高级小册 链接
深入浅出 Dart 链接
古代 TypeScript 高级小册 链接

函数

TypeScript 提供了丰盛的函数类型定义形式,能够对函数参数、返回值进行类型注解,从而提供了更为弱小的类型查看。

函数申明

在 TypeScript 中,你能够在函数申明中对函数的参数和返回值进行类型注解。以下是一个例子:

function add(x: number, y: number): number {return x + y;}

在这个例子中,咱们定义了一个 add 函数,它承受两个参数 xy,这两个参数都是 number 类型,函数的返回值也是 number 类型。

如果你尝试调用这个函数并传入一个非数字类型的参数,TypeScript 编译器会报错:

add("Hello", 1); // Error: Argument of type '"Hello"' is not assignable to parameter of type 'number'.

函数表达式

在 JavaScript 中,函数不仅能够通过函数申明的形式定义,还能够通过函数表达式定义。在 TypeScript 中,函数表达式也能够应用类型注解:

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

在下面的例子中,咱们首先定义了 myAdd 变量的类型为一个函数类型 (x: number, y: number) => number,而后将一个匿名函数赋值给myAdd。这个匿名函数的参数xy的类型是number,返回值的类型也是number

可选参数和默认参数

TypeScript 反对可选参数和默认参数。你能够应用 ? 来标记可选参数,或者应用 = 来指定参数的默认值:

function buildName(firstName: string, lastName?: string) {if (lastName)
        return firstName + " " + lastName;
    else
        return firstName;
}

let result1 = buildName("Bob");  // works correctly now
let result2 = buildName("Bob", "Adams");  // ah, just right

在下面的例子中,lastName是一个可选参数。你能够不传这个参数调用 buildName 函数。

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

let result1 = buildName("Bob");  // returns "Bob Smith"
let result2 = buildName("Bob", "Adams");  // returns "Bob Adams"

在下面的例子中,lastName有一个默认值 ”Smith”。如果你不传这个参数调用 buildName 函数,lastName的值将是 ”Smith”。

残余参数(Rest Parameters)

当你不晓得要操作的函数会有多少个参数时,TypeScript 提供了残余参数的概念。与 JavaScript 一样,你能够应用三个

... 来定义残余参数:

function buildName(firstName: string, ...restOfName: string[]) {return firstName + "" + restOfName.join(" ");
}

let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

在下面的例子中,restOfName就是残余参数,它能够承受任意数量的参数。

this 和箭头函数

箭头函数能够保留函数创立时的 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);
    
            return {suit: this.suits[pickedSuit], card: pickedCard % 13};
        }
    }
}

let cardPicker = deck.createCardPicker();
let pickedCard = cardPicker();

alert("card:" + pickedCard.card + "of" + pickedCard.suit);

在下面的例子中,createCardPicker函数返回一个箭头函数,这个箭头函数能够拜访创立时的 this 值。

重载

在 JavaScript 中,依据传入不同的参数调用同一个函数,返回不同类型的值是常见的状况。TypeScript 通过为同一个函数提供多个函数类型定义来实现这个性能:

function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string {if (typeof x === 'number') {return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {return x.split('').reverse().join('');
    }
}

reverse(12345);  // returns 54321
reverse('hello');  // returns 'olleh'

在下面的例子中,咱们定义了两个重载:一个是承受 number 类型的参数,另一个是承受 string 类型的参数。而后咱们在实现函数中解决了这两种状况。

退出移动版