背景
由于最近业务需要,小面投入了部分前端开发工作,我本身也没有前端技术栈,学习最好的方式就是总结,今年计划也给大家扩展一下技术栈,于是乎打算写一个TypeScript入门,大家一起进步加油。鉴于大家都有编程的基础,我们从任何一门语言都会频繁使用的函数来入门TS,如果说的不对欢迎评论交流。
一、函数
众所周知,函数是用来定义行为的地方,这一点TS也不例外,此外它还包括了一些额外的功能,在使用上更为灵活。明确一点,TypeScript是JavaScript的超集。
1、函数定义
TS中包括有名函数和匿名函数,这两种方式使用上没有区别,无论你是定义API还是只使用一次的函数。
// 有名函数 function add(x: number, y: number): number { return x + y; } // 匿名函数 let myAdd = function(x: number, y: number): number { return x + y; };
2、函数类型
TS的函数类型定义包含:参数类型和返回值类型,完整的函数类型由这两部分构成。
let myAdd: (x:number, y:number) => number = function(x: number, y: number): number { return x + y; };
返回值类型是必须的就算没有也要写上void,不能留空。
3、类型推断
一般的TS开源框架实现中,大家写代码可能只有上述等式的一侧带有类型,即使这样编译器也不会报错,这是由于TS类型推断的存在。
二、this
TS的this是在函数被调用时才会指定,这时候你需要弄清函数的上下文尤为关键。
let deck = { suits: ["hearts", "spades", "clubs", "diamonds"], cards: Array(52), createCardPicker: function() { return function() { 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);
执行以上代码,并未按照预期弹窗发牌,而是报错了,由于调用this的对象为window。这时有一个ES6提供的箭头语法可以保存函数创建时的this对象,不是调用的值。
return () => { let pickedCard = Math.floor(Math.random() * 52); let pickedSuit = Math.floor(pickedCard / 13); return {suit: this.suits[pickedSuit], card: pickedCard % 13}; }
此外,还有一种方式,就是在createCardPicker方法中定义入参this,类似于Java class中的this,只不过Java是编译器做了this参数的传递,因此它不会有这个困扰。
三、重载
根据不同的入参,返回不同类型的数据,这一点和Java类似,也不难理解。
小结
TS语言的灵活性在于它是JS的超集,并在JS的基础上引入了类型系统,使得问题提前暴露在编译期,而不是等到运行时才被发现,因此现代前端开发越来越推崇使用TS。