• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript联合类型和类型保护

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
interface Bird{
  fly: boolean,
  sing: ()=>{}
}

interface Dog{
  fly: boolean,
  bark: ()=>{}
}
/**
 * animal: Bird | Dog这就是一个联合类型
 * animal 既可以是 Bird 又可以是 Dog
 * 联合类型只提示公共的属性
 */
 // 第一种类型保护方案:类型断言的方式
function trainAnimal(animal: Bird | Dog) {
  /**
   * 这里直接调用 animal.sing() 是会报错的,因为 Dog 不存在 sing()
   * 解决这个问题第一种方案:断言
   */
  if (animal.fly) {
    (animal as Bird).sing(); // 强制告诉 TS,animal 是 Bird 类型
  }
  (animal as Dog).bark();
  
}


// 第二种类型保护方案:in 语法来做类型保护
function trainAnimal2(animal: Bird | Dog) {
  if ('sing' in animal) { // 告诉 ts animal 里面有 sing
    animal.sing();
  } else { // 上面 animal 有sing, else 就是没有 sing, ts 可以推断出来
    animal.bark();
  }
}


// 第三种类型保护方案: typeof 语法来做类型保护
function add(first: string | number, second: string | number) {
  /**
   * 这里直接 first + second 也会报错,因为有可能他们是 string 类型
   * 这个时候也可以用类型保护
   */
  if (typeof first === 'string' || typeof second === 'string') {
    return `${first}${second}`;
  }
  return first + second
}


// 第四种类型保护方案: instanceof 语法来做类型保护
class NumberObj { // 因为只有 class 才能用 instanceof 做类型保护
  count: number
}
function addSecond(first: object | NumberObj, second: object | NumberObj) {
    /**
    * 这里直接 first.count + second.count 也会报错,因为有可能他们是 object,没有 count 属性
    * 这个时候也可以用类型保护
    */
  if (first instanceof NumberObj && second instanceof NumberObj) {
    return first.count + second.count;
  }
  return 0;
}

 

 

总结:类型保护四种方式

1、类型断言的方式  animal as Bird

2、in 语法来做类型保护  if ('sing' in animal){}

3、 typeof 语法来做类型保护  if (typeof first === 'string' || typeof second === 'string') {}

4、instanceof 语法来做类型保护 if (first instanceof NumberObj && second instanceof NumberObj) {}


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript接口发布时间:2022-07-18
下一篇:
TypeScriptModules(模块)发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap