TS中常用的类型

36 阅读6分钟

搭建一个TS环境

  1. 全局安装ts:打开终端,输入命令 npm i typescript -g
  2. 初始化ts:tsc --init(会生成一个tsconfig.json配置文件)
  3. 监听所有.ts文件:tsc --watch,会将所有.ts文件转为js文件
1、any

any的含义是:任意类型,一旦将变量类型限制为any,那就意味着放弃了对该变量的类型检查。

image.png

注意:any类型的变量,可以赋值给任意类型的变量,且ts无警告!

image.png

2、unknown

1、unknow可以理解为一个类型安全的any,适用于:不确定数据的具体类型。

image.png

2、unknow会强制开发者在使用之前进行类型检查,从而提供更强的类型安全性。

image.png

3、读取any类型数据的任何属性都不会报错,而unknow正好与之相反。

image.png

3、never

never的含义是:任何值都不是,简言之就是不能有值,undefined、null、""、0都不行!

1、几乎不用never去直接限制变量,因为没有意义,例如:

image.png

2、never也可用于限制函数的返回值

image.png

3、never一般是TS主动推断出来的,例如:

image.png

4、void

1、void通常用于函数返回值声明,含义:【函数返回值为空,调用者也不应依赖其返回值进行任何操作

image.png

2、以下写法均符合规范:

image.png

3、void和undefined

image.png

理解void和undefined

  • void是一个广泛的概念,用来表达“空”,而undefined则是这种“空”的具体实现之一。
  • 因此可以说undefined是void能接受的“空”状态的一种具体形式。
  • 换句话说,void包含undefined,但是void表达的语义超越了单纯的undefined,它是一种意图上的约定,而不仅仅是特定值的限制

总结:若函数返回类型为void,那么:

  • 从语法上讲,函数是可以返回undefined的,至于显式返回还是隐式返回,无所谓!
  • 从语义上讲,函数调用者不应关心函数返回值,也不应依赖返回值进行任何操作!即使返回了undefined的值也不应该去操作!
5、object

object和Object,实际开发中用的相对较少,因为范围太大了。

image.png

声明对象类型

1、实际开发中,限制一般对象,通常使用以下形式

image.png

2、索引签名:允许定义对象可以具有任意数量的属性,这些属性的键和类型是可变的,常用于:描述类型不确定的属性(具有动态属性的对象)

image.png

声明函数类型

image.png

备注:

  • TypeScript中的=>在函数类型声明时表示函数类型,描述其参与类型和返回类型。
  • JavaScript中的=>是一种定义函数的语法,是具体的函数实现。
  • 函数类型声明还可以使用:接口、自定义类型等方式。
声明数组类型

image.png

6、tuple

元组(tuple)是一种特殊的数组类型,可以存储固定数量的元素,并且每个元素的类型是已知的可以不同。元组用于精确描述一组值的类型,?表示可选元素。

image.png

7、enum

枚举(enum)可以定义一组命名常量,它能增强代码的可读性,也让代码更好维护

如下代码的功能是:根据调用walk时传入的不同参数,执行不同的逻辑,存在的问题是调用walk时传参时没有任何提示,编码者很容易写错字符串内容;并且用于判断逻辑的up、down、left、right是连续且相关的一组值,那此时就特别适合使用枚举(enum).

1、数字枚举

数字枚举是一种最常见的枚举类型,其成员的值会自动递增,且数字枚举还具备反向映射的特点,可以通过来获取对应的枚举成员名称

image.png

2、字符串枚举

枚举成员的值是字符串,没有反向映射

image.png

3、常量枚举

常量枚举是一种特殊枚举类型,它使用const关键字定义,在编译时会被内联避免生成一些额外的代码。

我们先看一下数字枚举编译成js后的代码是什么样的:

image.png

编译后(代码量比较大):

image.png

在枚举定义前增加const:

image.png

再看编译后(代码量较小):

image.png

何为编译时内联? 所谓“内联”其实就是TypeScript在编译时,会将枚举成员引用替换为它们的实际值,而不是生成额外的枚举对象。这可以减少生成的JavaScript代码量,并提高运行时性能。

8、type

type可以为任意类型创建别名,让代码更简洁、可读性更强,同时能方便地进行类型复用和扩展。

1、基本用法

image.png

2、联合类型

联合类型是一种高级类型,它表示一个值可以是几种不同类型之一

image.png

3、交叉类型

交叉类型(Intersection Types)允许将多个类型合并为一个类型。合并后的类型将拥有所有被合并类型的成员。交叉类型通常用于对象类型。

image.png

9、一种特殊情况

1、在函数定义时,限制函数返回类型为void,那么函数返回值必须为空

image.png

2、代码段(特殊

使用类型声明限制函数返回值为void时,TypeScript并不会严格要求函数返回空

image.png

为什么会这样?

是为了确保如下代码成立,我们知道 Array.prototype.push 的返回是一个数字,而 Array.prototype.forEach 方法期望其回调的返回类型是void

image.png

10、相似概念的区别

1、interface 和 type 的区别

  • 相同点:interface 和 type 都可以用于定义对象结构,两者在许多场景中是可以互换的。
  • 不同点:
    • interface:更专注于定义对象的结构,支持继承合并
    • type:可以定义类型别名联合类型交叉类型,但不支持继承和自动合并。

2、interface 与 抽象类 的区别

  • 相同点:都用于定义一个类的格式(应该遵循的契约)
  • 不同点:
    • 接口:只能描述结构不能有任何实现代码,一个类可以实现多个接口。
    • 抽象类:既可以包含抽象方法,也可以包含具体方法,一个类只能继承一个抽象类。
11、泛型

概念:泛型允许我们在定义函数、类或者接口时,使用类型参数来表示未指定的类型,这些参数在具体使用时,才被指定具体的类型,泛型能让同一段代码适用于多种类型,同时仍然保持类型的安全性。

举例:如下代码中 < T > 就是泛型,(不一定非叫T),设置泛型后即可在函数中使用 T 表示该类型。

1、泛型函数

image.png

2、泛型可以有多个

image.png

3、泛型接口

image.png

4、泛型类

image.png

12、类型声明文件

类型声明文件是TypeScript中的一种特殊文件,通常以 .d.ts 作为扩展名。它的主要作用是为现有的JavaScript代码提供类型信息,使得TypeScript能够在使用这些JavaScript库或者模块时进行类型检查和提示

通常情况下,在ts文件中引入ts文件会给出警告:

image.png

此时新增一个文件 demo.d.ts

image.png

注意:如果引入demo.js还是爆红,可以重启一下vsCode。

image.png

鼠标放在add函数上就会看到ts相关的校验信息。