搭建一个TS环境
- 全局安装ts:打开终端,输入命令 npm i typescript -g
- 初始化ts:tsc --init(会生成一个tsconfig.json配置文件)
- 监听所有.ts文件:tsc --watch,会将所有.ts文件转为js文件
1、any
any的含义是:任意类型,一旦将变量类型限制为any,那就意味着放弃了对该变量的类型检查。
注意:any类型的变量,可以赋值给任意类型的变量,且ts无警告!
2、unknown
1、unknow可以理解为一个类型安全的any,适用于:不确定数据的具体类型。
2、unknow会强制开发者在使用之前进行类型检查,从而提供更强的类型安全性。
3、读取any类型数据的任何属性都不会报错,而unknow正好与之相反。
3、never
never的含义是:任何值都不是,简言之就是不能有值,undefined、null、""、0都不行!
1、几乎不用never去直接限制变量,因为没有意义,例如:
2、never也可用于限制函数的返回值
3、never一般是TS主动推断出来的,例如:
4、void
1、void通常用于函数返回值声明,含义:【函数返回值为空,调用者也不应依赖其返回值进行任何操作】
2、以下写法均符合规范:
3、void和undefined
理解void和undefined
- void是一个广泛的概念,用来表达“空”,而undefined则是这种“空”的具体实现之一。
- 因此可以说undefined是void能接受的“空”状态的一种具体形式。
- 换句话说,void包含undefined,但是void表达的语义超越了单纯的undefined,它是一种意图上的约定,而不仅仅是特定值的限制
总结:若函数返回类型为void,那么:
- 从语法上讲,函数是可以返回undefined的,至于显式返回还是隐式返回,无所谓!
- 从语义上讲,函数调用者不应关心函数返回值,也不应依赖返回值进行任何操作!即使返回了undefined的值也不应该去操作!
5、object
object和Object,实际开发中用的相对较少,因为范围太大了。
声明对象类型
1、实际开发中,限制一般对象,通常使用以下形式
2、索引签名:允许定义对象可以具有任意数量的属性,这些属性的键和类型是可变的,常用于:描述类型不确定的属性(具有动态属性的对象)
声明函数类型
备注:
- TypeScript中的=>在函数类型声明时表示函数类型,描述其参与类型和返回类型。
- JavaScript中的=>是一种定义函数的语法,是具体的函数实现。
- 函数类型声明还可以使用:接口、自定义类型等方式。
声明数组类型
6、tuple
元组(tuple)是一种特殊的数组类型,可以存储固定数量的元素,并且每个元素的类型是已知的且可以不同。元组用于精确描述一组值的类型,?表示可选元素。
7、enum
枚举(enum)可以定义一组命名常量,它能增强代码的可读性,也让代码更好维护。
如下代码的功能是:根据调用walk时传入的不同参数,执行不同的逻辑,存在的问题是调用walk时传参时没有任何提示,编码者很容易写错字符串内容;并且用于判断逻辑的up、down、left、right是连续且相关的一组值,那此时就特别适合使用枚举(enum).
1、数字枚举
数字枚举是一种最常见的枚举类型,其成员的值会自动递增,且数字枚举还具备反向映射的特点,可以通过值来获取对应的枚举成员名称。
2、字符串枚举
枚举成员的值是字符串,没有反向映射
3、常量枚举
常量枚举是一种特殊枚举类型,它使用const关键字定义,在编译时会被内联,避免生成一些额外的代码。
我们先看一下数字枚举编译成js后的代码是什么样的:
编译后(代码量比较大):
在枚举定义前增加const:
再看编译后(代码量较小):
何为编译时内联? 所谓“内联”其实就是TypeScript在编译时,会将枚举成员引用替换为它们的实际值,而不是生成额外的枚举对象。这可以减少生成的JavaScript代码量,并提高运行时性能。
8、type
type可以为任意类型创建别名,让代码更简洁、可读性更强,同时能方便地进行类型复用和扩展。
1、基本用法
2、联合类型
联合类型是一种高级类型,它表示一个值可以是几种不同类型之一。
3、交叉类型
交叉类型(Intersection Types)允许将多个类型合并为一个类型。合并后的类型将拥有所有被合并类型的成员。交叉类型通常用于对象类型。
9、一种特殊情况
1、在函数定义时,限制函数返回类型为void,那么函数返回值必须为空
2、代码段(特殊)
使用类型声明限制函数返回值为void时,TypeScript并不会严格要求函数返回空。
为什么会这样?
是为了确保如下代码成立,我们知道 Array.prototype.push 的返回是一个数字,而 Array.prototype.forEach 方法期望其回调的返回类型是void
10、相似概念的区别
1、interface 和 type 的区别
- 相同点:interface 和 type 都可以用于定义对象结构,两者在许多场景中是可以互换的。
- 不同点:
- interface:更专注于定义对象和类的结构,支持继承、合并。
- type:可以定义类型别名、联合类型、交叉类型,但不支持继承和自动合并。
2、interface 与 抽象类 的区别
- 相同点:都用于定义一个类的格式(应该遵循的契约)
- 不同点:
- 接口:只能描述结构,不能有任何实现代码,一个类可以实现多个接口。
- 抽象类:既可以包含抽象方法,也可以包含具体方法,一个类只能继承一个抽象类。
11、泛型
概念:泛型允许我们在定义函数、类或者接口时,使用类型参数来表示未指定的类型,这些参数在具体使用时,才被指定具体的类型,泛型能让同一段代码适用于多种类型,同时仍然保持类型的安全性。
举例:如下代码中 < T > 就是泛型,(不一定非叫T),设置泛型后即可在函数中使用 T 表示该类型。
1、泛型函数
2、泛型可以有多个
3、泛型接口
4、泛型类
12、类型声明文件
类型声明文件是TypeScript中的一种特殊文件,通常以 .d.ts 作为扩展名。它的主要作用是为现有的JavaScript代码提供类型信息,使得TypeScript能够在使用这些JavaScript库或者模块时进行类型检查和提示。
通常情况下,在ts文件中引入ts文件会给出警告:
此时新增一个文件 demo.d.ts
注意:如果引入demo.js还是爆红,可以重启一下vsCode。
鼠标放在add函数上就会看到ts相关的校验信息。