类型的窄化
我们的重点:
- 窄化和类型守卫
- 真值窄化
- 相等性窄化
- `in` 操作符窄化
- `instanceof` 窄化
- 控制流分析
- 类型断言
- 判别的联合
- Never类型
TS中的类型是可以组合使用的。
联合和窄化
type Padding = number | string;
function padLeft(padding : Padding, input : string) : string {
//...
}
但是这样会遇到一个问题,接下来需要用typeof 判断padding 的类型。
当然一个是number|string 的类型可以赋值成number 或者string
let x :number|string = 1
x = "Hello"
真值窄化
如果不判断:
function padLeft(padding: number | string, input: string) {
return new Array(padding + 1).join(" ") + input;
// Operator '+' cannot be applied to types 'string | number' and 'number'.
}
于是增加typeof 的判断:
function padLeft(padding: number | string, input: string) {
if (typeof padding === "number") {
return new Array(padding + 1).join(" ") + input;
}
return padding + input;
}
当进行了if + typeof 操作后,ts可以识别变窄后的类型,称为窄化(Narrowing)。上面Narrowing的能力,让TS清楚的知道padding 是数字还是字符串。
在实现层面,TS会认为typeof padding === "number" 这样的表达式是一种类型守卫(type guard)表达式。当然这是纯粹实现层面的概念,准确来说if + type guard 实现了Narrowing。
划重点:类型窄化(Type Narrowing)根据类型守卫(Type Guard)在子语句块重新定义了更具体的类型。
所以,我们学这干嘛?TS比JS有进步吗?
typeof 的守卫们
"string"
"number"
"bigint"
"boolean"
"symbol"
"undefined"
"object"
"function"
注意:typeof null === 'object'
因此:
function printAll(strs: string | string[] | null) {
if (typeof strs === "object") {
for (const s of strs) {
console.log(s);
}
} else if (typeof strs === "string") {
console.log(strs);
} else {
// do nothing
}
}
真值窄化(Truthiness narrowing)
Javascript有一张复杂的真值表,总结下来这些值都会拥有false的行为:
0
NaN
"" (the empty string)
0n (the bigint version of zero)
null
undefined
我们也可以通过真值实现窄化:
比如避免:TypeError: null is not iterable 错误。
if (strs && typeof strs === "object") {
for (const s of strs) {
console.log(s);
}
}
再举个例子:
function multiplyAll(
values: number[] | undefined,
factor: number
): number[] | undefined {
if (!values) {
return values;
} else {
return values.map((x) => x * factor);
}
}
划重点:真值(Truthiness narrowing)窄化帮助我们更好的应对null/undefined/0等值。
相等性窄化
在窄化当中有一类隐式的窄化方法,就是相等性窄化。`===`, `!==`, `==`, and `!=` 都可以用来窄化类型。
举例:
function example(x: string | number, y: string | boolean) {
if (x === y) {
// x is string
} else {
// x is string | number,
// y is string | boolean
}
}
再看一个例子:
function printAll(strs: string | string[] | null) {
if (strs !== null) {
if (typeof strs === "object") {
for (const s of strs) {
csharp
Copy code
//(parameter) strs: string[]
}
} else if (typeof strs === "string") {
// (parameter) strs: string
}
}
}
考考你:
interface Container {
value: number | null | undefined;
}
function multiplyValue(container: Container, factor: number) {
if (container.value !== null) {
// container.value是什么类型?
container.value *= factor;
}
}
`in` 操作符窄化
回忆一下:JS中的`in` 操作符的作用是?
——检验对象中是否有属性。
type Fish = { swim: () => void };
type Bird = { fly: () => void };
function move(animal: Fish | Bird) {
if ("swim" in animal) {
return animal.swim();
}
return animal.fly();
}
特别提一下,为什么不用instanceof Fish ? 因为type 没有运行时。
`instanceof` 窄化
`instanceof` 可以窄化,注意Date不能是`type` 而是真实存在的Function类型。
function logValue(x: Date | string) {
if (x instanceof Date) {
// x is Date
} else {
// x is string
}
}
组合类型推导
有时候Typescript会推导出组合类型。
let x = Math.random() < 0.5 ? 10 : "hello world!";
这个时候x是number | string
当然, 这里有个问题是number|string 的类型可以赋值成number 或者string。
控制流分析
你可能会问:Typescript怎么做到窄化的?
首先在语法分析阶段,Typescript的编译器会识别出类型卫兵表达式。包括一些隐性的类型卫兵,比如真值表达式、instanceof等等。
那么在语义分析的时候,Typescript遇到控制流关键字if/while 等,就会看看这里有没有需要分析的窄化操作。例如:
function padLeft(padding: number | string, input: string) {
if (typeof padding === "number") {
return new Array(padding + 1).join(" ") + input;
}
return padding + input;
}
首先TS会看到有一个卫兵表达式:typeof padding==='number'
然后TS会对返回值return padding+input 以及return new 分别做窄化
窄化的本质是重新定义类型
当然很多语句都会触发窄化:
function example() {
let x: string | number | boolean;
x = Math.random() < 0.5;
//x: boolean
if (Math.random() < 0.5) {
x = "hello";
//x: string
} else {
x = 100;
// x : number
}
return x;
// x: string | number
}
类型断言(Type Assertions/Predicate)
Assertion和predicate翻译过来都是断言。在计算机中,Asssertion通常是断言某个表达式的值是不是true/false。Assertion在很多的测试库中被使用,比如`assert.equals(a, 1)` 。从语义上,这里在断言a的值是1(a===1是true)。
划重点:Assertion在说某个东西是什么。
Predicate通常是一个函数,返回值是true/false,比如说list.filter( x=>x.score > 500),x=>x.score > 500 这个函数是一个predicate 函数。
划重点:Predicate是一个返回true/false的函数。
TS中有两个断言操作符,Assertion 操作符as 和predicate 操作符is 。
as 操作符提示Typescript某种类型是什么(当用户比Typescript更了解类型的时候使用)。is 操作符是用户自定义的类型守卫,用于帮助Typescript Narrowing。
具体的例子:
function isFish(pet: Fish | Bird): pet is Fish {
return (pet as Fish).swim !== undefined;
}
let pet = {
fly : () => {}
}
if (isFish(pet)) { // isFish(pet)成为了Type Guard
pet.swim();
} else {
pet.fly();
}
思考:不加pet is Fish 会怎样?
思考:as/is符不符合计算机标准语言中Assertion/Predicate的含义?
判别的联合(Discriminated unions)
考虑这个定义:
interface Shape {
kind: "circle" | "square";
radius?: number;
sideLength?: number;
}
function getArea(shape: Shape) {
return Math.PI * shape.radius ** 2;
}
有什么问题吗?如果这样呢?
function getArea(shape: Shape) {
if (shape.kind === "circle") {
return Math.PI * shape.radius ** 2;
// Object is possibly 'undefined'.
}
}
于是用非Null断言操作符!
function getArea(shape: Shape) {
if (shape.kind === "circle") {
return Math.PI * shape.radius! ** 2;
}
}
舒服!???——还没有——
问题在于circle 应该是一种单独的类型,Shape可能还有rect 等。
解决方案:
interface Circle {
kind: "circle";
radius: number;
}
interface Square {
kind: "square";
sideLength: number;
}
type Shape = Circle | Square;
function getArea(shape: Shape) {
if (shape.kind === "circle") { // Narrowing
return Math.PI * shape.radius ** 2;
}
}
整理下:
function getArea(shape: Shape) {
switch (shape.kind) {
case "circle":
return Math.PI * shape.radius ** 2;
case "square":
return shape.sideLength ** 2;
}
}
Never类型
Never,就是不应该出现的意思。Never类型代表一个不应该出现的类型。因此对Never的赋值,都会报错。
比如下面处理default逻辑:
function getArea(shape: Shape) {
switch (shape.kind) {
case "circle":
return Math.PI * shape.radius ** 2;
case "square":
return shape.sideLength ** 2;
default:
const _exhaustiveCheck: never = shape;
// Type ... is not assignable to type never
return _exhaustiveCheck;
}
}
然后我们增加一个triangle :
interface Triangle {
kind: "triangle";
sideLength: number;
}
type Shape = Circle | Square | Triangle;
这个时候因为没有实现Triangle的getArea,因此会报错:Type 'Triangle' is not assignable to type 'never'. 。
总结
思考问题及答案
1. 窄化解决了什么问题?
答:窄化主要解决了联合类型在使用中的问题。当我们有一个变量可能是多种类型之一时,通过某些检查或条件,我们可以确定该变量的确切类型。这使得我们可以在不担心类型错误的情况下,安全地使用该变量的属性或方法。
2. 联合类型在使用中根据不同控制条件重定义的问题吗?
答:是的,当我们使用联合类型时,我们经常需要基于某些条件来确定变量的确切类型。窄化就是这样一个过程,它通过某些条件检查来帮助我们确定变量的确切类型。
3. 更提升对联合类型校验的问题?
答:窄化不仅提供了一种确定变量类型的方式,而且还增强了对联合类型的校验。这意味着,通过使用窄化,我们可以更安全、更准确地使用联合类型,减少类型错误的风险。
4. in、typeof、instanceof 中有没有遇到JS中没有的关键字?
答:in、typeof、instanceof 都是JavaScript中的关键字。
5. 所以结论是什么?
答:TypeScript是JavaScript的超集,这意味着任何有效的JavaScript代码也是有效的TypeScript代码。但是,TypeScript引入了一些新的关键字和概念,如as、is、keyof和enum,这些在原生的JavaScript中是不存在的。
6. as、is、keyof、enum在JS中没有?
答:是的,这些都是TypeScript特有的关键字或概念,它们在原生的JavaScript中是不存在的。