TS是JS的超集，在JS的基础上添加了一套类型系统，这样的TS可以被静态分析带来的好处显而易见。
let val: string = 'val';
声明一个string类型的变量val。
let val: string = 'val';
val = 1; // Type 'number' is not assignable to type 'string'.
因为number类型和string类型并不兼容，在string类型值出现的地方并不能使用number类型指完成替换，所以在TS世界中给string类型的val变量赋值number类型的值会报错。
但是在JS中并没有赋值的限制：
// javascript
var val = 'val';
val = 1; // 这里不会报错
在JS中变量val首先被赋值了字符串，然后被赋值了数字，这两个数据类型并不一致，但是因为JS没有静态类型检查，所以这并不会报错。
TS的联合类型可以适应这种情况，表示这个变量可能是类型a也可能是类型b也可能是类型c等类型。
let val: string | number = 'val'
val = 1 // 这里并不会报错
在TS中，这里声明的变量val则表示可能是类型string也可能是类型number，所以对变量赋值string类型值和number类型值，并不会报错。
但问题也随之而来。
function test(val: string | number) {
val.toLowerCase() // Property 'toLowerCase' does not exist on type 'string | number'.
}
TS会提示类型 string | number 上没有属性toLowserCase。
这个报错也很容易理解，因为类型string的数据上可以调用方法toLowerCase，但是number不可以。因为变量val的类型，string和number都有可能，TS并不能确定val在运行时是string类型，所以会出现这个错误。
我们需要一个方法来告诉TS这个变量现在是string类型。
使用typeof缩小类型范围
对于上面例子中的变量val.toLowerCase的报错来说是因为val的类型范围有点大(string | number)，如果我们通过某种方式缩小该范围为string，那么在val上访问属性toLowserCase应当没有问题。
function test(val: string | number) {
if (typeof val === 'string') {
val.toLowerCase() // 这里并不会报错
console.log('val是字符串')
} else {
console.log('val是数字')
}
}
在TS中，if中的typeof val === 'string'这种形式的代码会被识别为类型保护(type guard)。TS会分析代码的执行流程，缩小变量可能的类型。在分支if (typeof val === ‘string’) 中变量val的类型被TS识别为’string’，所以在这个分支下val调用string类型数据的方法并不会报错。
因为val是string和number这两个类型的联合，TS不仅知道if子句中的val是string类型，还知道else中的val是number类型。
可以被typeof进行类型保护的类型有：
- “string”
- “number”
- “bigint”
- “boolean”
- “symbol”
- “undefined”
- “object”
- “function”
使用in缩小类型范围
上面介绍了对于基础类型的识别，在TS中使用频率更多的还有对象，使用typeof来区别不同对象显然是有问题的，因为typeof出来的结果都是’object’无法分辨两个不同的对象。
type A = {a: string}
type B = {b: string}
function test(val: A | B) {
val.a // Property 'a' does not exist on type 'A | B'
}
在test函数中无论是访问val.a还是val.b都会报错，而原因已经明白，TS无法确定变量val的具体类型，TS并不知道当前是类型A还是类型B，所以我们需要帮他一把。
type A = {a: string}
type B = {b: string}
function test(val: A | B) {
if ('a' in val) {
console.log(val.a)
return
}
console.log(val.b)
}
其中的in操作同样会被TS识别为类型保护，如果属性a存在于变量val中那么就能识别出val变量是类型A，则可以正常访问类型A中存在的属性a。
使用instanceof缩小类型范围
对于对象类型的区分除了使用操作符in还可以使用instanceof来完成。
function test(x: Date | string) {
if (x instanceof Date) {
console.log(x.toUTCString());
} else {
console.log(x.toUpperCase());
}
}
使用 === 和 == 缩小类型范围
使用严格等于(===)也可以在某些特别情况下正确缩小类型范围
function example(x: string | number, y: string | boolean) {
if (x === y) {
// We can now call any 'string' method on 'x' or 'y'.
x.toUpperCase();
y.toLowerCase();
} else {
console.log(x); // x 是 string | number
console.log(y); // y 是 string | boolean
}
}
在这个例子中x是string 和number的联合，而y是string和boolean的联合，当x === y的时候只可能x和y都是string类型。所以在分支if (x === y) 中x和y的类型被正确识别为string类型。
我们知道在JS中宽松等于(== null)可以匹配null和undefined两种类型，当然TS也知道，所以 ==null，可以被用来识别类型。
interface Container {
value: number | null | undefined;
}
function multiplyValue(container: Container, factor: number) {
// Remove both 'null' and 'undefined' from the type.
if (container.value != null) {
console.log(container.value);
// Now we can safely multiply 'container.value'.
container.value *= factor;
}
}
即使container.value可能是null或者undefined类型，但是在分支container.value != null中，该变量类型就只可能是number类型，所以其参与算术运算并不会报错。
区分联合类型
interface Circle {
kind: "circle";
radius: number;
}
interface Square {
kind: "square";
sideLength: number;
}
type Shape = Circle | Square;
function getArea(shape: Shape) {
if (shape.kind === "circle") {
return Math.PI * shape.radius ** 2;
}
}
TS会通过参与联合的类型都有的属性kind来识别当前shape是Circle或者Square达到类型保护的目的。
类型谓词
上面介绍了TS对于联合类型中基础类型和对象类型的类型保护。但是这并不能覆盖全部的场景，例如上面介绍到的内容，并不能区分两个函数：
type fn1 = (arg: number) => boolean
type fn2 = (arg: string) => boolean
function test(fn: fn1 | fn2) {
return fn(1)
}
在这个例子里，我们并没有方法来识别fn是类型fn1还是类型fn2。
在前面的例子里，例如 if (typeof a === ‘string’) 这里面的变量a会被TS类型系统识别为string，如果TS将识别一个变量为某个类型的能力开放给开发者，上面的问题就会迎刃而解。这个能力就是类型谓词。
通过观察上面类型保护的规律就会发现TS总会询问：变量a是类型A吗？被识别为类型保护的操作的回答总是true或者false都是boolean值。typoef a === ‘string’或者’a’ in A或者a instanceof A，这些操作的返回值都是boolean，并且都是和特定类型作比较。
// 我就是类型谓词形成的类型保护
function isTypefn1(fn: fn1 | fn2): fn is fn1 {
if (fn.name === 'fn1') return true
return false
}
function test(fn: fn1 | fn2) {
if (isTypefn1(fn)) return fn(1)
else return fn('1')
}
其中 isTypefn1调用的返回值就会告诉TS入参是不是类型fn1，这样TS就可以识别变量fn的类型完成类型保护。
参考
Narrowing
