TypeScript基础之类型收窄（Type Narrowing）

前言

文中部分内容（typeof 、in、instanceof、类型谓词等）已经在TypeScript基础之类型保护介绍过。 文中内容都是官网https://www.typescriptlang.org/docs/handbook/2/narrowing.html 内容，以及参考 TypeScript 之 Narrowing---mqyqingfeng

类型收窄（Type Narrowing）

现在有一个名为padLeft的函数， 需要实现的功能是： 如果参数 padding 是一个数字，我们就在 input 前面添加同等数量的空格，而如果 padding 是一个字符串，我们就直接添加到 input 前面。实现：

function padLeft(padding: number | string, input: string) {
  return "".repeat(padding) + input;
  // 类型“string | number”的参数不能赋给类型“number”的参数。
  // 不能将类型“string”分配给类型“number”。
}

如果这样写的话，编辑器里padding会提示类型“string | number”的参数不能赋给类型“number”的参数错误。 提示我们应该先检查下padding是否是一个number。 所以下一步修改为：

function padLeft(padding: number | string, input: string) {
  if (typeof padding === "number") {
    return " ".repeat(padding) + input;
  }
  return padding + input;
}

以上代码中 TypeScript 在背后做了很多东西。 TypeScript 要学着分析这些使用了静态类型的值在运行时的具体类型。目前 TypeScript 已经实现了比如 if/else 、三元运算符、循环、真值检查等情况下的类型分析。

在 if 语句中，TypeScript 会认为 typeof padding === number 是一种特殊形式的代码，我们称之为类型保护 (type guard)，TypeScript 会沿着执行时可能的路径，分析值在给定的位置上最具体的类型。

TypeScript 的类型检查器会考虑到这些类型保护和赋值语句，而这个将类型推导为更精确类型的过程，我们称之为收窄 (narrowing)。 在编辑器中，我们可以观察到类型的改变：

function padLeft(padding: number | string, input: string) {
  if (typeof padding === "number") {
    return " ".repeat(padding) + input;
    // (parameter) padding: number
  }
  return padding + input;
  // (parameter) padding: string
}

从上图中可以看到在 if 语句中，和剩余的 return 语句中，padding 的类型都推导为更精确的类型。

接下来，我们就介绍 narrowing 所涉及的各种内容。

typeof 类型保护（type guards）

关于typeof在之前文章里已经介绍过了，这里再介绍下。 ​在 TypeScript 中，检查typeof返回的值就是一种类型保护。

function printAll(strs: string | string[] | null) {
  if (typeof strs === "object") {
    for (const s of strs) {
      // strs 提示 对象可能为 "null"。
      console.log(s);
    }
  } else if (typeof strs === "string") {
    console.log(strs);
  } else {
    // do nothing
  }
}

在这个 printAll 函数中，我们尝试判断 strs 是否是一个对象，原本的目的是判断它是否是一个数组类型，但是在 JavaScript 中，typeof null 也会返回 object。 TypeScript 会让我们知道 strs 被收窄为 strings[] | null ，而不仅仅是 string[]。

真值收窄（Truthiness narrowing）

在 JavaScript 中，我们可以在条件语句中使用任何表达式，比如 && 、||、! 等，举个例子，像 if 语句就不需要条件的结果总是 boolean 类型:

function getUsersOnlineMessage(numUsersOnline: number) {
  if (numUsersOnline) {
    return `There are ${numUsersOnline} online now!`;
  }
  return "Nobody's here. :(";
}

这时因为 JavaScript 会做隐式类型转换， 像空字符串、0、-0 、0n、NaN、null、undefined 和 false这些值都会被转为false， 其他则会被转为true。 你也可以使用Boolean函数强制转换为 boolean 值， 或者使用!!

Boolean("hello");  // true
!!"world";      // true

真值收窄这种使用方式非常流行，尤其适用于防范 null和 undefiend 这种值的时候。 如：

function printAll(strs: string | string[] | null) {
  if (strs && typeof strs === "object") {
    for (const s of strs) {
      console.log(s);
    }
  } else if (typeof strs === "string") {
    console.log(strs);
  }
}

可以看到通过这种方式，成功的去除了错误。但还是要注意，在基本类型上的真值检查很容易导致错误，比如:

function printAll(strs: string | string[] | null) {
  // !!!!!!!!!!!!!!!!
  //  DON'T DO THIS!
  //   KEEP READING
  // !!!!!!!!!!!!!!!!
  if (strs) {
    if (typeof strs === "object") {
      for (const s of strs) {
        console.log(s);
      }
    } else if (typeof strs === "string") {
      console.log(strs);
    }
  }
}

在if (strs) 真值检查里，存在一个问题，就是我们无法正确处理空字符串的情况。如果传入的是空字符串，真值检查判断为 false，就会进入错误的处理分支。

等值收窄（Equality narrowing）

TypeScript中也会使用switch语句和等值检查比如===、 !==、 == 、 !=去收窄类型。 如：

function example(x: string | number, y: string | boolean) {
  if (x === y) {
    // We can now call any 'string' method on 'x' or 'y'.
    x.toUpperCase();
    // (method) String.toUpperCase(): string
    
    y.toLowerCase();
    // (method) String.toLowerCase(): string

  } else {
    console.log(x);
    // (parameter) x: string | number

    console.log(y);
    // (parameter) y: string | boolean
  }
}

以上代码中，我们判断了 x 和 y 是否完全相等，如果完全相等，那他们的类型肯定也完全相等。而 string 类型就是 x 和 y 唯一可能的相同类型。所以在第一个分支里，x 和 y 就一定是 string 类型。 判断具体的字面量值也能让 TypeScript 正确的判断类型。 我们知道: undefined == null 为true， 利用这点可以方便的判断一个值既不是null也不是undefined

interface Container {
  value: number | null | undefined;
}
function multiplyValue(container: Container, factor: number) {
  //  排除调null 、undefined
  if (container.value != null) {
    console.log(container.value);                           
    // (property) Container.value: number 

    container.value *= factor;
  }
}

in 操作符收窄

JavaScript 中有一个 in 操作符可以判断一个对象是否有对应的属性名。TypeScript 也可以通过这个收窄类型。 包括可选属性。

type Fish = { swim: () => void };
type Bird = { fly: () => void };
type Human = { swim?: () => void; fly?: () => void };
 
function move(animal: Fish | Bird | Human) {
  if ("swim" in animal) {
    animal; // (parameter) animal: Fish | Human
  } else {
    animal; // (parameter) animal: Bird | Human
  }
}

以上代码里， Human里有swim、fly两个可选属性， TS通过in 操作符可以准备的进行类型收窄。

instanceof 收窄

instanceof 也是一种类型保护，TypeScript 也可以通过识别 instanceof 正确的类型收窄

function logValue(x: Date | string) {
  if (x instanceof Date) {
    console.log(x.toUTCString());        
    // (parameter) x: Date
  } else {
    console.log(x.toUpperCase());            
   // (parameter) x: string
  }
}

赋值语句（Assignments）

TypeScript 可以根据赋值语句的右值，正确的收窄左值。

let x = Math.random() < 0.5 ? 10 : "hello world!"; 
// let x: string | number

x = 1;
console.log(x);        
// let x: number

x = "goodbye!"; 
console.log(x);        
// let x: string

以上赋值语句都有有效的，即便我们已经将 x 改为 number 类型，但我们依然可以将其更改为 string 类型，这是因为 x 最初的声明为 string | number，赋值的时候只会根据正式的声明进行核对。 所以如果我们把 x 赋值给一个 boolean 类型，就会报错

x = false;
// 不能将类型“false”分配给类型“string | number”

控制流分析（Control flow analysis）

来看看在 if while等条件控制语句中的类型保护， 如：

function padLeft(padding: number | string, input: string) {
  if (typeof padding === "number") {
    return " ".repeat(padding) + input;
  }
  return padding + input;
}

以上代码中， 在第一个 if 语句里，因为有 return 语句，TypeScript 就能通过代码分析，判断出在剩余的部分 return padding + input ，如果 padding 是 number 类型，是无法达到 (unreachable) 这里的，所以在剩余的部分，就会将 number类型从 number | string 类型中删除掉。

这种基于可达性(reachability) 的代码分析就叫做控制流分析(control flow analysis)。在遇到类型保护和赋值语句的时候，TypeScript 就是使用这样的方式收窄类型。

使用类型谓词（Using type predicates）

所谓 predicate 就是一个返回 boolean 值的函数。 如果你想直接通过代码控制类型的改变， 你可以自定义一个类型保护。实现方式是定义一个函数，这个函数返回的类型是类型判断式，如：

function isFish(pet: Fish | Bird): pet is Fish {
  return (pet as Fish).swim !== undefined;
}

在这个例子中，pet is Fish就是我们的类型判断式，一个类型判断式采用 parameterName is Type的形式，但 parameterName 必须是当前函数的参数名。当 isFish 被传入变量进行调用，TypeScript 就可以将这个变量收窄到更具体的类型：

class Fish {
  swim () {
    console.log('游泳～');
  }
  eat () {
    console.log('进食!');
  }
}

class Bird {
  fly () {
    console.log('飞翔～');
  }
  eat () {
    console.log('进食!');
  }
}

function getSmallPet(): Fish | Bird {
  return Math.random() > 0.5 ? new Fish() : new Bird()
}
let pet = getSmallPet();

function isFish(pet: Fish | Bird): pet is Fish {
  return (pet as Fish).swim !== undefined;
}

if (isFish(pet)) {
    pet.swim();     // let pet: Fish
} else {
    pet.fly();      // let pet: Bird
}

可辨别联合（Discriminated unions）

interface Circle {
  kind: "circle";  // 字符串字面量类型
  radius: number;
}
 
interface Square {
  kind: "square";   // 字符串字面量类型
  sideLength: number;
}

type Shape = Circle | Square;
function getArea(shape: Shape) {
  return Math.PI * shape.radius ** 2;   
  // 类型“Shape”上不存在属性“radius”。
  // 类型“Square”上不存在属性“radius”
}

报错，是因为 Shape 是一个联合类型，TypeScript 可以识别出 shape 也可能是一个 Square，而 Square 并没有 radius，所以会报错。通过判断字面量类型来进行区分：

function getArea (shape: Shape) {
  switch (shape.kind) {
    case "circle":  // Circle类型
      return Math.PI * shape.radius ** 2;
    case "square":  // Square类型
      return shape.sideLength ** 2;
  }
}

当联合类型中的每个类型，都包含了一个共同的字面量类型的属性，TypeScript 就会认为这是一个可辨别联合（discriminated union），然后可以将具体成员的类型进行收窄。 在这个例子中，kind 就是这个公共的属性（作为 Shape 的可辨别(discriminant) 属性 ）。

never 类型

当进行收窄的时候，如果你把所有可能的类型都穷尽了，TypeScript 会使用一个 never 类型来表示一个不可能存在的状态。

穷尽检查（Exhaustiveness checking）

never 类型可以赋值给任何类型，然而，没有类型可以赋值给 never （除了 never 自身）。这就意味着你可以在 switch 语句中使用 never 来做一个穷尽检查 .接上面例子， 新添加一个新成员，却没有做对应处理的时候，就会导致一个 TypeScript 错误：

interface Triangle {
  kind: "triangle";
  sideLength: number;
}
type Shape = Circle | Square | Triangle;

function getArea(shape: Shape) {
  switch (shape.kind) {
    case "circle": // Circle类型
      return Math.PI * shape.radius ** 2;
    case "square": // Circle类型
      return shape.sideLength ** 2;
    default:
      const _exhaustiveCheck: never = shape; // 不能将类型“Triangle”分配给类型“never”
      return _exhaustiveCheck;
  }
}

因为 TypeScript 的收窄特性，执行到 default 的时候，类型被收窄为 Triangle，但因为任何类型都不能赋值给 never 类型，这就会产生一个编译错误。通过这种方式，你就可以确保 getArea 函数总是穷尽了所有 shape 的可能性。

参考资料

https://www.typescriptlang.org/docs/handbook/2/narrowing.html TypeScript 之 Narrowing---mqyqingfeng