课程名称

专为小白设计的TypeScript入门课

课程章节

第2章 TypeScript 基础语法入门

• 2-10 类型收窄
• 2-11 使用类型陈述语法实现类型收窄

课程讲师

Dell

课程内容

• 对象类型解构

• 变量类型以定义变量时的类型为准

• 使用类型陈述语法实现类型收窄

  • In 语法下的类型收窄
  • InstanceOf 语法下的类型收窄
  • 类型陈述语法

课程收获

TS对象类型解构

function getOjbectValue({a, b}){
  return a + b;
}
getOjbectValue({a: '1', b: '2'});

解构的类型定义错误写法：

正确写法：

// 对象类型解构的代码怎么写
function getOjbectValue({a, b}: {a: string, b: string}){
  return a + b;
}
getOjbectValue({a: '1', b: '2'});

TS变量类型以定义变量时的类型为准

// 变量类型以定义变量时的类型为准
let userName: string | number = '123';
userName = 123;

再赋值改类型会报错。

// 变量类型以定义变量时的类型为准
let userName = '123';
userName = '123';

默认推断为string类型

再赋值改类型会报错。

TS的In 语法下的类型收窄
通过 in 判断语句，注意这里是字符串，判断是否是其中一个类型。

type Fish = {
  swim: () => {}
}

type Bird = {
  fly: () => {}
}

// In 语法下的类型收窄
function test(animal: Fish | Bird) {
  if('swim' in animal) {
    return animal.swim();
  }
  return animal.fly();
}

类型收窄 =>

TS的InstanceOf 语法下的类型收窄
param如果是Date实例的话，进行类型收窄。

// InstanceOf 语法下的类型收窄
function test1(param: Date | string) {
  if(param instanceof Date) {
    return param.getTime();
  }
  return param.toUpperCase();
}

TS的类型陈述语法
类型收窄主要出现在if、switch、while等控制流语句当中，ts能实现这种类型收窄，底层的机制就是对控制流进行分析，通过我们设置的条件进行分析，分析后帮助做类型收窄。

type Fish = {
  swim: () => {}
}

type Bird = {
  fly: () => {}
}

function isFish(animal: Fish | Bird): boolean {
  if(animal.swim) {
    return true
  }
  return false;
}

function test2(animal: Fish | Bird) {
  if(isFish(animal)) {
    return animal.swim();
  }
  return animal.fly();
}

报错，有可能Bird上不存在swim。

利用断言假设animal是一个Fish，进行存在和不存在的判断。

function isFish(animal: Fish | Bird): boolean {
  if((animal as Fish).swim !== undefined) {
    return true
  }
  return false;
}

function test2(animal: Fish | Bird) {
  if(isFish(animal)) {
    return animal.swim();
  }
  return animal.fly();
}

test2方法中并没有对animal进行类型收窄，因此自己写函数是不能实现类型收窄的。

想要函数实现类型收窄，需要加: animal is Fish，这种语法称为类型陈述。
返回类型为一个类型陈述，则这个函数就具备了一个在控制流程里帮助我们实现类型收窄的能力了。

// animal is Fish 叫做类型陈述语法
function isFish(animal: Fish | Bird): animal is Fish {
  if((animal as Fish).swim !== undefined) {
    return true
  }
  return false;
}

function test2(animal: Fish | Bird) {
  if(isFish(animal)) {
    return animal.swim();
  }
  return animal.fly();
}