版权声明:原创文章,如想转载,请注明原文网址,注明出处;否则,禁止转载;谢谢配合! https://blog.csdn.net/c_kite/article/details/85283691
本系列目的: 列出TypeScript与JavaScript的不同点, 缩小文档内容, 提高学习速度. 原文档地址: https://www.tslang.cn/index.html
函数
简单使用
// 伪代码例子
函数名(参数: 类型): 返回值 {
}
// 例1
function add(x: number, y: number): number {
return x + y;
}
// 例2 完整函数类型
let myAdd: (x2: number, y3: number) => number =
function(x: number, y: number): number { return x + y; }; // 只要参数类型匹配就可以, 参数名无所谓
// 例3 如果声明了完整函数类型, 后面的类型可以省略
let myAdd: (baseValue: number, increment: number) => number =
function(x, y) { return x + y; };
参数
可选参数
和js不同的是, typescript函数在是使用时所传入的参数要符合所定义时的参数数量及类型. 那么我们可以使用?
, 实现可选参数.(可选参数必须跟在必须参数后面)
function buildName(firstName: string, lastName: string) {
return firstName + " " + lastName;
}
let result1 = buildName("Bob"); // error, 参数太少
let result2 = buildName("Bob", "Adams", "Sr."); // error, 参数太多
let result3 = buildName("Bob", "Adams"); // ok
----------------------------------------------
function buildName(firstName: string, lastName?: string) {
if (lastName)
return firstName + " " + lastName;
else
return firstName;
}
let result1 = buildName("Bob"); // ok
let result2 = buildName("Bob", "Adams", "Sr."); // error, 参数太多
let result3 = buildName("Bob", "Adams"); // ok
默认参数
默认参数和js一致, 并且默认参数与可选参数一样,在调用函数的时候可以省略. 与普通可选参数不同的是,带默认值的参数不需要放在必须参数的后面。 如果带默认值的参数出现在必须参数前面,用户必须明确的传入 undefined
值来获得默认值.(这点也与js保持一致)
function buildName(firstName: string, lastName = "Smith") {
// ...
}
剩余参数
剩余参数可以采用es2015的rest运算符的形式使用. 例:
function buildName(firstName: string, ...restOfName: any[]) {
return firstName + " " + restOfName.join(" ");
}
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie", 12, {gkd: 'gkd'});
this
typescript中可以限制this对象, 如下面的例子
// his参数是个假的参数,它出现在参数列表的最前面:
function f(this: void) {
// 这么定义的话, 这个f函数内部无法使用this, 因为this的类型为void
}
-----------------------------------
// 详细用法
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),
// 该函数现在显式指定其被调用者必须是Deck类型
createCardPicker: function(this: Deck) {
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);
函数重载
和c++语言的重载不同的是, 只有一个处理函数, 如下面的例子:
let suits = ["hearts", "spades", "clubs", "diamonds"];
function pickCard(x: {suit: string; card: number; }[]): number;
function pickCard(x: number): {suit: string; card: number; };
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 };
}
}
let myDeck = [{ suit: "diamonds", card: 2 }, { suit: "spades", card: 10 }, { suit: "hearts", card: 4 }];
let pickedCard1 = myDeck[pickCard(myDeck)];
alert("card: " + pickedCard1.card + " of " + pickedCard1.suit);
let pickedCard2 = pickCard(15);
alert("card: " + pickedCard2.card + " of " + pickedCard2.suit);