TypeScript学习（十）——缩小类型限制范围

文章目录

• • typeof 缩小类型限制范围
  • • typeof 的作用
    • typeof 返回的值
    • typeof 能帮我们检测 js 疑难杂症之 typeof null === ‘object’
  • 条件判断 / && / || / ! 来缩小类型限制范围
  • • 解决上面的报错
    • js 的判断不只是判断布尔值
    • ts 的检测是沿着作用域的开展的
  • 相等判断来缩小类型限制范围
  • • === / !== 严格相等性判断
    • == / != 宽松相等性判断
  • in 判断来缩小类型限制范围
  • • in 只是在编译时判断是否可能是某类型，而不会认为这个属性一定会存在
  • instanceof 来缩小类型限制范围
  • = 赋值来缩小 ts 的限制范围
  • 程序控制流缩小限制范围
  • 约束唯一缩小限制范围
  • • 合并书写
    • 拆分成多个类型减少判断
  • never
  • • 缩小到没有类型限制
    • never 传递类型

typeof 缩小类型限制范围

typeof 的作用

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

typeof 返回的值

typeof 能帮我们检测 js 疑难杂症之 typeof null ===‘object’

function test(msg:object | string | null){
  
  if(typeof msg === 'object'){
    Object.keys(msg)
  }
}

条件判断 / && / || / ! 来缩小类型限制范围

解决上面的报错

function test(msg:object | string | null){
  
  if(typeof msg === 'object' && msg !== null){
    Object.keys(msg)
  }
}

js 的判断不只是判断布尔值

js 判断时，走否逻辑时的值不一定为布尔值 false，以下值也可以是 false

ts 的检测是沿着作用域的开展的

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

相等判断来缩小类型限制范围

=== / !== 严格相等性判断

ts 校验在发现他们两个值相等时，会将他们的类型置为相同，当他们不同时，且至少有一个类型相同，那么他们的类型限制都会变成他们的之前类型限制的并集

function example(x: string | number, y: string | boolean) {
  if (x === y) {
    
    x.toUpperCase(); 
    y.toLowerCase();
  } else {
    
    console.log(x);
    console.log(y);
  }
}
example(1,"1");

function example(x: string | number, y: symbol | boolean) {
  
  if (x === y) {
  } else {
  }
}
example(1,false);

== / != 宽松相等性判断

interface Container {
  value: number | null | undefined;
}
 
function multiplyValue(container: Container, factor: number) {
  
  if (container.value != null) {
    console.log(container.value);                 
    container.value *= factor;
  }
}

in 判断来缩小类型限制范围

in 只是在编译时判断是否可能是某类型，而不会认为这个属性一定会存在

type Fish = { swim: () => void };
type Bird = { fly: () => void };
type Human = { swim?: () => void; fly?: () => void };
 
function move(animal: Fish | Bird | Human) {
  if ("swim" in animal) {
    
    if(animal.swim){
      
      animal.swim();
    }
    } else {
  }
}
move({swim:function(){console.log("Hello World")}})

instanceof 来缩小类型限制范围

instanceof 的作用

x instanceof Foo 检查 x 的原型链是否包含 Foo.prototype。

function logValue(x: Date | string) {
  if (x instanceof Date) {
    
    
    console.log(x.toUTCString());
  } else {
    
    console.log(x.toUpperCase());           
  }
}
logValue(new Date());
logValue("hello world");

= 赋值来缩小 ts 的限制范围

ts 在赋值的时候，会去看赋值的右边的值是什么类型从而将值的类型作为右边变量的类型限制（多个值即为联合类型）

let x = Math.random()  0.5 ? 10 : "hello world!";

x = 1;

x = "Hello World";
console.log(x);

x = true;
console.log(x);

程序控制流缩小限制范围

一个变量的类型在程序运行的过程中，后根据程序运行流在类型的子集中根据使用情况不断变换类型限制

function example() {
  let x: string | number | boolean;
  x = Math.random()  0.5;
  console.log(x); 
  if (Math.random()  0.5) {
    x = "hello";
    console.log(x);
  } else {
    x = 100;
    console.log(x);
  }
  return x;
}

约束唯一缩小限制范围

合并书写

interface Shape {
  kind: "circle" | "square";
  radius?: number;
  sideLength?: number;
}

function getArea(shape: Shape) {
  if (shape.kind === "circle") {
  
    return Math.PI * shape.radius! ** 2;
  }else {
    return shape.sideLength! ** 2
  }
}

拆分成多个类型减少判断

interface Circle {
  kind: "circle";
  radius: number;
}
 
interface Square {
  kind: "square";
  sideLength: number;
}
 
type Shape = Circle | Square;

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

never

缩小到没有类型限制

type Fish = { swim: () => void };
type Bird = { fly: () => void };
function move(animal: Fish | Bird) {
  if ("swim" in animal) {
    if(animal.swim){
      animal.swim();
    }
  }else if("fly" in animal){
    if(animal.fly){
      animal.fly();
    } 
  }else {
    console.log(animal)
  }
}

never 传递类型

never 类型可分配给每种类型。但是，没有任何类型可以分配给 never（除了 never 本身）。

type Shape = Circle | Square;
 
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;
      return _exhaustiveCheck;
  }
}

but

interface Circle {
  kind: "circle";
  radius: number;
}
 
interface Square {
  kind: "square";
  sideLength: number;
}

interface Triangle {
  kind: "triangle";
  sideLength: number;
}
 
type Shape = Circle | Square | Triangle;
 
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;
      return _exhaustiveCheck;
  }
}