TypeScript入门之函数

简介: TypeScript入门之函数

背景

由于最近业务需要,小面投入了部分前端开发工作,我本身也没有前端技术栈,学习最好的方式就是总结,今年计划也给大家扩展一下技术栈,于是乎打算写一个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。

相关文章
|
4月前
|
JavaScript 前端开发
【TypeScript入门】TypeScript入门篇——数据类型
我们人类可以很容易的分清数字与字符的区别,但是计算机并不能呀,计算机虽然很强大,但从某种角度上看又很傻,除非你明确的告诉它,1是数字,“汉”是文字,否则它是分不清1和‘汉’的区别的,因此,在每个编程语言里都会有一个叫数据类型的东东,其实就是对常用的各种数据类型进行了明确的划分,你想让计算机进行数值运算,你就传数字给它,你想让他处理文字,就传字符串类型给他。
48 3
|
4月前
|
JavaScript 编译器
TypeScript中泛型在函数和类中的应用
【4月更文挑战第23天】TypeScript的泛型在函数和类中提供了灵活性,允许处理多种数据类型。了解泛型是掌握TypeScript类型系统的关键。
|
2月前
|
JavaScript 前端开发 程序员
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
56 0
|
2月前
|
JavaScript
TypeScript(六)函数
TypeScript(六)函数
19 0
|
3月前
|
JavaScript 前端开发 程序员
typescript入门笔记分享
typescript入门笔记分享
21 0
|
3月前
|
JavaScript 前端开发 API
TypeScript 函数
TypeScript 函数
|
3月前
|
JavaScript 前端开发
typescript 函数类型
typescript 函数类型
|
3月前
|
JavaScript 编译器 前端开发
11.【TypeScript 教程】函数(Function)
11.【TypeScript 教程】函数(Function)
20 0
|
4月前
|
JavaScript 前端开发
TypeScript极速入门笔记1
TypeScript极速入门笔记1
64 4
|
4月前
|
JavaScript
vite+typescript从入门到实战(三)
vite+typescript从入门到实战
67 0