手把手带你搞懂TypeScript(三)

1,177 阅读3分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第4天,点击查看活动详情

一、类型缩小

类型缩小(Type Narrowing),我们可以通过类似于 typeof padding === "number" 的判断语句,来改变TypeScript的执行路径。在给定的执行路径中,我们可以缩小比声明时更小的类型,这个过程称之为 缩小。而我们编写的 typeof padding === "number 可以称之为 类型保护(type guards)。如下案例所示:

image.png

当然除了上述的类型缩小还有很多的类型缩小如通过in对类型进行缩小等: in是JavaScript里的一个运算符,用于确定对象是否具有带名称的属性:

image.png

二、函数详解

1.TypeScript函数类型

在Javascript开发中函数是重要的组成部分之一,它可以作为参数,也可以作为返回值进行传递:

image.png

既然它可以作为参数那么我们也可以为函数定义类型。我们可以通过编写函数类型表达式来表示函数类型:

  1. 函数作为参数时,在参数中编写数据的类型

image.png

  1. 定义常量时,编写函数的类型

image.png

2.参数的可选类型

我们可以指定某个参数是可选的,但是可选类型参数必须位于必选参数类型后 image.png

3.默认参数

JavaScript支持默认参数所以TypeScript也是支持默认参数的。正常来说参数的书写顺序为:必写参数->有默认值的参数->可选参数。

image.png

4.剩余参数

JavaScript支持剩余参数,剩余参数语法允许我们将一个不定数量的参数放到一个数组中,所以在TypeScript中也支持该写法:

image.png

三、this类型

在TypeScript中为了让代码更加安全我们可以指定this的类型:

image.png

四、函数的重载

在了解函数的重载前,我们先看一个例子。我们编写一个函数,希望可以对传入的参数进行相加,参数类型允许是number类型或者string类型,在经过之前的学习后很多人会写出如下代码:

image.png

我们可以看到它是报错的,因为在Typescript中number+number、string+string、number+string都是可以的,但是参数是联合类型的在编译时它无法确认传入的数据类型,所以就会报错。我们可以通过之前学习的类型缩小来解决这个问题:

image.png

但是这样编写代码有两个缺点:

  1. 需要进行很多的逻辑判断。
  2. 返回值的类型我们仍然无法确认。 这样我们就可以使用到函数的重载,函数的重载在很多语言中都是存在的,它的涵义就是:"函数的名称相同,但是参数不同的几个函数就是函数的重载"。

image.png

在函数的重载中实现函数是永远不能调用的,必须满足上面的声明函数匹配如果匹配都失败就会编译报错:

image.png

如果我们想定义一个可以传入字符串或者数组的函数该如何定义呢?我们可以通过两种方案来实现:

  1. 通过联合类型实现

image.png

  1. 通过函数重载实现

image.png

在正常情况下,我们尽量通过联合类型去实现它。