【Typescript基础】函数详解

简介: 【Typescript基础】函数详解

Typescript 函数类型


可以说在任何的开发语言中,函数都可以作为一等公民,有着非常重要的地位,那么在Ts 中使用函数,函数是否也可以有自己的类型呢?

微信图片_20221012162412.png

上面的语法中 (num1: number, num2: number) => number,代表的就是一个函数类型。如果是void表示函数没有返回值。其中,num1和num2是不可以省略的。如果函数作为参数时候,也可以在参数中编写函数类型。


函数参数的可选类型


在函数中传递参数时,可以指定参数是否是可选的,但是可选类型必须是写在比写类型的后面的。

// y -> undefined | number
function foo(x: number, y?: number) {
}
foo(20, 30)
foo(20)

微信图片_20221012162506.png

1. 默认参数


从ES6开始,JavaScript中是支持函数默认参数的,同时typescript也是支持的。传参的顺序是:

必传参数 - 有默认值的参数 - 可选参数

微信图片_20221012162539.png

2. 剩余参数


从ES6开始,JavaScript也支持剩余参数,剩余参数语法允许我们将一个不定数量的参数放到一个数组中。

微信图片_20221012162608.png

可推导的 this 类型


在JavaScript中的this指向对象时十分重要的,但是在typescript中的this指向是很难确定类型的,所以在typescript中的this指向是可以被推导出来的。

微信图片_20221012162646.png

1. 不确定的 this 类型

image.png

这里会报错,虽然我们将sayhello函数放入info对象中,但是我们通过对象调用sayhello函数的是,this指向的对象,但是如果直接调用sayhello函数的时候,this指向了函数本身,造成了混乱,所以这里会报错,typescript中不允许我们这样做。


2. 指定的 this 的类型


上次是因为没有明确this类型造成this指向混乱,所以程序会报错,通常typescript会要求我们明确指定this的类型。

type ThisType = { name: string };
function eating(this: ThisType, message: string) {
  console.log(this.name + " eating", message);
}
const info = {
  name: "elva",
  eating: eating,
};
// 隐式绑定
info.eating("哈哈哈");
// 显示绑定
eating.call({name: "mary"}, "呵呵呵")
eating.apply({name: "james"}, ["嘿嘿嘿"])

函数的重载


函数的重载: 函数的名称相同, 但是参数不同的几个函数, 就是函数的重载

场景:定义一个函数,可以传入字符串或者数组,获取它们的长度。

解决:使用联合类型来实现(推荐)或者使用函数重载来实现

微信图片_20221012162807.png微信图片_20221012162812.png

相关文章
|
7月前
|
JavaScript 前端开发 编译器
TypeScript 函数第一章
TypeScript 函数第一章
78 4
|
7月前
|
JavaScript 前端开发 测试技术
[小笔记]TypeScript/JavaScript模拟Python中的Range函数
[小笔记]TypeScript/JavaScript模拟Python中的Range函数
71 0
|
7月前
|
JavaScript 编译器
TypeScript中泛型在函数和类中的应用
【4月更文挑战第23天】TypeScript的泛型在函数和类中提供了灵活性,允许处理多种数据类型。了解泛型是掌握TypeScript类型系统的关键。
|
3月前
|
JavaScript
typeScript基础(3)_ts函数默认值和可选参数
本文介绍了在TypeScript中如何使用函数的默认值和可选参数。展示了如何为函数参数指定默认值,使得在调用函数时可以省略某些参数,以及如何定义可选参数。
182 2
|
2月前
|
移动开发 JavaScript 前端开发
TypeScript:数组类型&函数使用&内置对象
本文介绍了 TypeScript 中的数组类型、对象数组、二维数组、函数、函数重载、内置对象等概念,并通过代码示例详细展示了它们的使用方法。还提供了一个使用 HTML5 Canvas 实现的下雨效果的小案例。
|
3月前
|
JavaScript
typeScript基础(7)_函数的类型
本文介绍了TypeScript中函数的类型,包括函数声明与函数表达式的类型注解,如何定义函数的参数类型、返回类型,以及可选参数和参数默认值。还探讨了函数的剩余参数、如何使用接口定义函数的形状,以及函数重载的概念和实践。
32 0
|
5月前
|
JavaScript 前端开发 程序员
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
86 0
|
5月前
|
JavaScript
TypeScript(六)函数
TypeScript(六)函数
30 0
|
6月前
|
JavaScript 前端开发 API
TypeScript 函数
TypeScript 函数
|
6月前
|
JavaScript 前端开发
typescript 函数类型
typescript 函数类型