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。

相关文章
|
7月前
|
JavaScript 编译器
TypeScript中泛型在函数和类中的应用
【4月更文挑战第23天】TypeScript的泛型在函数和类中提供了灵活性,允许处理多种数据类型。了解泛型是掌握TypeScript类型系统的关键。
|
3月前
|
JavaScript
typeScript基础(3)_ts函数默认值和可选参数
本文介绍了在TypeScript中如何使用函数的默认值和可选参数。展示了如何为函数参数指定默认值,使得在调用函数时可以省略某些参数,以及如何定义可选参数。
212 2
|
2月前
|
移动开发 JavaScript 前端开发
TypeScript:数组类型&函数使用&内置对象
本文介绍了 TypeScript 中的数组类型、对象数组、二维数组、函数、函数重载、内置对象等概念,并通过代码示例详细展示了它们的使用方法。还提供了一个使用 HTML5 Canvas 实现的下雨效果的小案例。
|
2月前
|
JavaScript 前端开发 编译器
【小白入门】 浏览器如何识别Typescript?
【10月更文挑战第1天】浏览器如何识别Typescript?
|
3月前
|
JavaScript 前端开发 编译器
TypeScript,从0到入门带你进入类型的世界
该文章提供了TypeScript的入门指南,从安装配置到基础语法,再到高级特性如泛型、接口等的使用,帮助初学者快速掌握TypeScript的基本用法。
|
3月前
|
JavaScript
typeScript基础(7)_函数的类型
本文介绍了TypeScript中函数的类型,包括函数声明与函数表达式的类型注解,如何定义函数的参数类型、返回类型,以及可选参数和参数默认值。还探讨了函数的剩余参数、如何使用接口定义函数的形状,以及函数重载的概念和实践。
35 0
|
5月前
|
JavaScript 前端开发 程序员
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
91 0
|
5月前
|
JavaScript
TypeScript(六)函数
TypeScript(六)函数
33 0
|
6月前
|
JavaScript 前端开发 程序员
typescript入门笔记分享
typescript入门笔记分享
35 0
|
6月前
|
JavaScript 前端开发 API
TypeScript 函数
TypeScript 函数