TypeScript与JavaScript不同之处系列(四) ===> 函数
2020-04-05 07:16
651 查看
本系列目的: 列出TypeScript与JavaScript的不同点, 缩小文档内容, 提高学习速度. 原文档地址: https://www.tslang.cn/index.html
全系列目录
- 1.基础类型 https://blog.csdn.net/c_kite/article/details/85232021
- 2.接口 https://blog.csdn.net/c_kite/article/details/85262016
- 3.类 https://blog.csdn.net/c_kite/article/details/85274189
- 4.函数 https://blog.csdn.net/c_kite/article/details/85283691
- 5.泛型 https://www.geek-share.com/detail/2797042161.html
- 6.枚举 https://www.geek-share.com/detail/2797042158.html
- 7.类型推论, 类型兼容性 https://www.geek-share.com/detail/2797042155.html
- 8.高级类型 https://www.geek-share.com/detail/2797042153.html
- 9.命名空间, 三斜线指令 https://www.geek-share.com/detail/2797042143.html
文章目录
1. 函数
1.1. 简单使用
// 伪代码例子 函数名(参数: 类型): 返回值 { } // 例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; };
2. 参数
2.1. 可选参数
和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
2.2. 默认参数
默认参数和js一致, 并且默认参数与可选参数一样,在调用函数的时候可以省略. 与普通可选参数不同的是,带默认值的参数不需要放在必须参数的后面。 如果带默认值的参数出现在必须参数前面,用户必须明确的传入
undefined值来获得默认值.(这点也与js保持一致)
function buildName(firstName: string, lastName = "Smith") { // ... }
2.3. 剩余参数
剩余参数可以采用es2015的rest运算符的形式使用. 例:
function buildName(firstName: string, ...restOfName: any[]) { return firstName + " " + restOfName.join(" "); } let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie", 12, {gkd: 'gkd'});
3. 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);
4. 函数重载
和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);
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- TypeScript与JavaScript不同之处系列(九) ===> 命名空间, 三斜线指令
- TypeScript与JavaScript不同之处系列(八) ===> 高级类型
- TypeScript与JavaScript不同之处系列(七) ===>类型推论, 类型兼容性
- TypeScript与JavaScript不同之处系列(六) ===>枚举
- TypeScript与JavaScript不同之处系列(五) ===> 泛型
- Javascript 事件对象(四)一个事件绑定多个不同的函数
- javascript 简单高效判断数据类型 系列函数 By shawl.qiu
- 深入理解JavaScript系列(2):揭秘命名函数表达式
- 深入理解JavaScript系列(2):揭秘命名函数表达式
- JavaScript系列:replace()函数(第二个参数为函数)
- 深入理解JavaScript系列(2):揭秘命名函数表达式
- 【百日JavaScript系列】2017.11.2_函数 function
- 深入理解JavaScript系列(15):函数(Functions)
- javascript中getElementBy系列函数用法
- (转)深入理解JavaScript系列(2):揭秘命名函数表达式
- javascript 简单高效判断数据类型系列函数
- 深入理解JavaScript系列(2):揭秘命名函数表达式
- 从零开始学_JavaScript_系列(15)——js系列<4>(数值、字符串、对象、数组、函数、日期的基本方法)
- 深入理解JavaScript系列(15):函数(Functions)
- 深入理解JavaScript系列(2) 揭秘命名函数表达式