步入TypeScript中的其它类型，js要认怂了吗

TypeScript基础-基本类型检查-下

其他常用类型

除了支持js里的常见类型之外，ts还有自己的特殊类型：

• 联合类型： 多种类型任选其一

 // 联合类型，name可能为string类型，可能为undefined类型let name1 = string | undefined; 
1

⚠️，因为name1可能为undfined，要注意使用了string方法时的场景

此时使用vscode还是会智能提示出string类型上的方法

当我们选中☑️提示出的一个方法时，变量后面带上了?(mdn),太智能了吧！

 // name1后面自动带上?,避免为undefined时的报错name1?.xxx() 
1

所以最好配合类型保护进行判断

 // 类型保护：当某个变量进行类别判断之后，在判断语句中便可以确定类型if (typeof name1 === 'string') { name1.xxx()} 
1

• void类型

在js中其代表的含义是：void 运算符 对给定的表达式进行求值，然后返回undefined

在ts完全不一样了，含义：通常用于约束函数的返回值，表示该函数没有任何返回

• never类型: 通常用于约束函数的返回值，表示该函数用于不会结束

 function throwError():never {throw new Error("错误");}function doSomeThings():never {while (true) {}} 
1

• 字面量类型: 用特定的值去约束，后续赋值只能特定的值

 let a:123let b:"男"let c:[] 
1

• 元祖类型(Tuple)：固定长度的数组，并且数组的每一项类型确定

 let arr: [number, string]arr = [123, "456"] 
1

• any类型: 可以赋值任意类型, 无约束

---

类型别名

• 含义

对已知的类型去定义名称

• 写法

 type 类姓名 = xxxtype User = {name: string}let u: User 
1

这样写的好处，可以复用多处定义同样的类型，复用性更高

---

函数有意思的约束-重载

函数重载：在函数实现前，对函数进行多种情况的声明

现在有这样的场景，要实现传入相同类型的值， 返回相同类型的值

可以这样实现：function combine(a: number | string, b: number | string): number | string {if (typeof a === 'number' && typeof b === 'number') {return a * b}if (typeof a === 'string' && typeof b === 'string') {return a + b}throw new Error("a和b必须是相同类型");}combine(1, 3) 
1

但这样写不能强约束，combine传入的值可能为不同类型，该怎么办呢？

/**
 * 得到a * b
 * @param a 
 * @param b 
 */
function combine(a: number, b: number): number 
/**
 * 得到a + b
 * @param a 
 * @param b 
 */
function combine(a: string, b: string): string 
	function combine(a: number | string, b: number | string): number | string {
	if (typeof a === 'number' && typeof b === 'number') {
		return a * b
	}
	if (typeof a === 'string' && typeof b === 'string') {
		return a + b
	}
	throw new Error("a和b必须是相同类型");
} 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

这样写就能实现重载，并且对combine传入强约束，并且可以看到对应的注释

函数约束-可选

可以对函数的参数可选传入, 也可对参数默认赋值

• 可选传入:在参数名后面加上问号，表示该参数不是必传

 function combine(a: number, b: number, c?: number) {}combine(1, 2)combine(1, 2, 3) 
1

此时的c类型惊奇的发现多了个undefined

要注意！！多个参数时，第一个参数不能可选?

• 默认赋值

 function combine(a: number, b: number, c: number = 0) {}combine(1, 2)combine(1, 2, 3) 
1

此时查看c类型, 发现多了个可选符号?

最后

最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。

有需要的小伙伴，可以点击下方卡片领取，无偿分享