TS中断言、转换的应用

这篇具有很好参考价值的文章主要介绍了TS中断言、转换的应用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.TS 类型断言定义

把两种能有重叠关系的数据类型进行相互转换的一种 TS 语法,把其中的一种数据类型转换成另外一种数据类型。类型断言和类型转换产生的效果一样,但语法格式不同。

2.TS 类型断言语法格式

A 数据类型的变量 as B 数据类型 。

A 数据类型和 B 数据类型必须具有重叠关系。

3.TS 类型断言使用规则和场景
(1)如果 A,B 如果是类并且有继承关系

【 extends 关系】无论 A,B 谁是父类或子类, A 的对象变量可以断言成 B 类型,B 的对象变量可以断言成A类型 。但注意一般在绝大多数场景下都是把父类的对象变量断言成子类。

class People {
  public myusername!: string;
  public myage!: number;
  public address!: string
  public phone!: string
  constructor() {
  }
  eat() {

  }
  step() {
    console.log("People=>step");
  }
}

class Stu extends People {
  public username!: string
  public age!: number;
  public address!: string
  constructor(username: string, age: number, address: string, public phone: string) {
    super();
    this.address = address;
  }
  study() {
  }
}

let people = new People()

//let result = people as Stu;// 类型断言 正确
let result = <Stu>people;// 类型转换 正确
result.study();

let stu = new Stu("wangwu", 23, "北京", "123")
let result2 = stu as People;// 正确
(2)如果 A,B 如果是类,但没有继承关系

两个类中的任意一个类的所有的 public 实例属性【不包括静态属性】加上所有的 public 实例方法和另一个类的所有 public 实例属性加上所有的 public 实例方法完全相同或是另外一个类的子集,则这两个类可以相互断言,否则这两个类就不能相互断言。

// 类型断言中的不能相互重叠问题:
//   两个类之间断言的规则:
//   两个类中任意一个的属性和方法是另一个类的属性和方法完全相同或子集,则这两个类可以相互断言
//   否则这两个类就不能相互断言

class People {
  constructor(public username: string, public age: number,
    public address: string) {

  }
}

class Stu {
  public username!: string
  public age!: number;
  public address!: string
  public phone!:string;
  constructor(username: string, age: number, address: string) {
    this.address = address;
  }
}

let people = new People("wangwu", 23, "beijing")
let stuedConvert = people as Stu;
let stu = new Stu("wangwu", 23, "北京")
let peopledConvert = stu as People;
(3)如果 A 是类,B 是接口,并且 A 类实现了 B 接口【implements】,则A 的对象变量可以断言成 B 接口类型,同样 B 接口类型的对象变量也可以断言成A类型 。
interface People {
  username: string, age: number, address: string, phone: string
}

class Stu implements People {
  public username!: string
  public age!: number;
  public address!: string
  public phone!: string
  public kk() {

  }
  constructor(username: string, age: number, address: string) {
    this.address = address;
  }
}

let people: People = { username: "wangwu", age: 23, address: "11", phone: "111" }
let result = people as Stu;//正确
let result2 = <Stu>people;// 类型转换 正确

let stu = new Stu("wangwu", 23, "北京")
stu as People;// 正确

(4)如果 A 是类,B 是接口,并且 A 类没有实现了 B 接口,则断言关系和第2项的规则完全相同。
interface People {
  username: string, age: number, address: string, phone: string
}

class Stu {
  public username!: string
  public age!: number;
  public address!: string
  public phone!: string
  public kk() {

  }
  constructor(username: string, age: number, address: string) {
    this.address = address;
  }
}

let people: People = { username: "wangwu", age: 23, address: "11", phone: "111" }
let result = people as Stu;//正确

let stu = new Stu("wangwu", 23, "北京")
stu as People;// 正确

(5)如果 A 是类,B 是 type 定义的数据类型

type 定义的数据类型是引用数据类型,例如 Array, 对象,不能是基本数据类型,例如 string,number,boolean,并且有 A 类实现了 B type 定义的数据类型【 implements】,则 A 的对象变量可以断言成 B type 定义的对象数据类型,同样 B type 定义的对象数据类型的对象变量也可以断言成 A 类型 。

type People = {
  username: string, age: number, address: string, phone: string
}

class Stu implements People {
  public username!: string
  public age!: number;
  public address!: string
  public phone!: string
  constructor(username: string, age: number, address: string) {
    this.address = address;
  }
}


let people: People = { username: "wangwu", age: 23, address: "11", phone: "111" }
let result = people as Stu;//正确

let stu = new Stu("wangwu", 23, "北京")
stu as People;// 正确

(6)如果 A 是类,B 是 type 定义的数据类型,并且 A 类没有实现 B type定义的数据类型,则断言关系和第2项的规则完全相同。
type People = {
  username: string, age: number, address: string, phone: string
}
class Stu {
  public username!: string
  public age!: number;
  public address!: string
  constructor(username: string, age: number, address: string) {
    this.address = address;
  }
}

let people: People = { username: "wangwu", age: 23, address: "11", phone: "111" }
let result = people as Stu;//正确

let stu = new Stu("wangwu", 23, "北京")
stu as People;// 正确

(7)如果 A 是一个函数上参数变量的联合类型,例如 string |number,那么在函数内部可以断言成 string 或number 类型。
function selfMutiply(one: string | number) {
    one as number +3;
}
(8)多个类组成的联合类型断言

例如:let vechile: Car | Bus | Trunck。 vechile 可以断言成其中任意一种数据类型。 例如 vechile as Car, vechile as Bus , vechile as Trunck 。

class Vechile {
  static count: number = 3;
  public brand: string;
  public vechileNo: string;
  public days: number;
  public total: number = 0;
  public deposit: number;
  constructor(brand_: string, vechileNo_: string, days_: number, deposit_: number) {
    this.brand = brand_;
    this.vechileNo = vechileNo_;
    this.days = days_;
    this.deposit = deposit_;
  }
  public calculateRent() {
  }
  payDesposit() {
  }

  public safeShow() {
  }
}

class Car extends Vechile {
  public type: string;
  constructor(brand_: string, vechileNo_: string, days_: number,
    deposit_: number, type_: string) {
    super(brand_, vechileNo_, days_, deposit_);
    this.type = type_;
  }
  public getPriceByType() {
  }

  public calculateRent() {
  }
  public checkIsWeigui(isOverWeight: boolean) {
  }
}

class Bus extends Vechile {
  public seatNum: number
  constructor(brand_: string, vechileNo_: string, days_: number,
    deposit_: number, seatNum_: number) {
    super(brand_, vechileNo_, days_, deposit_);
    this.seatNum = seatNum_;
  }

  public getPriceBySeatNum() {
  }

  public checkIsOverNum(isOverWeight: boolean) {
  }
}

class Truck extends Vechile {
  ton!: number
  constructor(brand_: string, type_: string,
    days_: number, deposit_: number, ton_: number) {
    super(brand_, type_, days_, deposit_);
    this.ton = ton_;
  }

  checkIsOverWeight(isOverWeight: boolean) {
  }
  CalRentPrice() {
  }
  public calRent() {
  }

  public calDesposit() {
  }
}

class Customer {
  rentVechile(vechile:Bus | Truck | Car) {
     // 下面进行断言、转换
    //<Bus>vechile <==等同==> vechile as Bus
    //vechile as unknown
    //vechile.calculateRent()
    //(vechile as Bus).checkIsOverNum(false)
  }
}
(9)任何数据类型都可以转换成 any 或 unknown 类型**,any 或 unknown 类型也可以转换成任何其他数据类型。
function add(one: string | number, two: string | number) {
  return one as any + two as any
}

console.log(add(3, 5))
console.log(add("3", 5))
4.类型断言存在的意义和应用场景:

场景1:顾客在执行汽车租赁项目租赁价格计算方法中调用每一个类的独有方法时使用

场景2:对象中的 Symbol 数据类型取值问题

场景3:加法计算,巧用 as any。

let symid = Symbol("objid")
let obj = { [symid]: 101, username: "wangwu", age: 23 }
let username = obj["username"]
//let objid=obj[symid]//类型“symbol”不能作为索引类型使用
// 解决:
let objid = obj[symid as any]
//let objid2 = obj[symid as unknown]//类型“unknown”不能作为索引类型使用
//let symidunknown = symid as unknown// 可以转换成unknown,正确

脚踏实地行,海阔天空飞文章来源地址https://www.toymoban.com/news/detail-758589.html

到了这里,关于TS中断言、转换的应用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端TypeScript学习day02-TS常用类型

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 TypeScript 常用类型 接口  元组  类型推论 类型断言 字面量类型 枚举 any 类型 typeof  当一个对象类型被多次使用时,一般会使用接口(interface)来描述对象的类型,达到

    2024年02月08日
    浏览(52)
  • 前端TypeScript学习day03-TS高级类型

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹)            目录 TypeScript 高级类型 class 类 class继承  extends implements  类成员可见性  public  protected  private   readonly 兼容性 类型兼容性 接口兼容性  函数兼容性  TypeScri

    2024年02月08日
    浏览(37)
  • 【wow-ts】前端学习笔记Typescript基础语法(一)

    项目地址是https://github.com/datawhalechina/wow-ts。 我选择的是ts前端课程 第一次接触ts,先去了解了下ts的内容,复制内容如下 TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准(ES6 教程)。 TypeScript 由微软开发的自由和开源的编程语言。 TypeScript 是一种给 JavaScript 添加特性的

    2024年01月16日
    浏览(57)
  • 力扣前端leetcode 2622.有时间限制的缓存 语言TypeScript(详细分析)TS

    力扣题目:2622.有时间限制的缓存 语言:TypeScript 本文是该题目的众多方法之二 如果内容有不对的地方,恳请指正 编写一个类,它允许获取和设置键-值对,并且每个键都有一个 过期时间 。 该类有三个公共方法: set(key, value, duration) :接收参数为整型键 key 、整型值 value 和

    2024年03月21日
    浏览(42)
  • 前端经典面试题 | 吊打面试官系列 之 说说你对TypeScript 和 JavaScript的理解

    🖥️ 前端经典面试题 专栏:吊打面试官系列 之 说说你对TypeScript 和 JavaScript的理解 🧑‍💼 个人简介:一个不甘平庸的平凡人🍬 ✨ 个人主页:CoderHing的个人主页 🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️ 👉 你的一键三连是我更新的最大动力❤️ 目录 一、回答

    2024年01月17日
    浏览(48)
  • TypeScript 类型断言

    简单来说类型断言就是 使用as 强行指定获取到的结果类型 应用场景 如果我们不知道一个标签是什么类型,我们可以像下面这样 用img标签举例 先创建一个img元素,然后把鼠标放到接收的变量上面(下图就是把鼠标放在result上面)就会弹出来img是HTMLImageElement类型了 总结

    2024年02月14日
    浏览(42)
  • TypeScript 非空断言

    发布于 2020-04-08 15:20:15 17.5K0 举报 一、非空断言有啥用 介绍非空断言前,先来看个示例: 对于以上代码,TypeScript 编译器会提示一下错误信息: 要解决上述问题,我们可以简单加个条件判断: 使用这种方案,问题是解决了。但有没有更简单的方式呢?答案是有的,就是使用

    2024年02月13日
    浏览(36)
  • 前端(六)——TypeScript在前端中的重要性与应用

    😊博主:小猫娃来啦 😊文章核心: TypeScript在前端中的重要性与应用 随着Web应用的复杂性不断增加,开发人员需要更强大的工具来应对这些挑战。TypeScript作为一种静态类型语言,满足了许多开发者对代码质量和可维护性的需求。下面我们将深入探讨TypeScript在前端中的定位

    2024年02月16日
    浏览(40)
  • TypeScript 在前端开发中的应用实践

    TypeScript 已经成为前端开发领域越来越多开发者的首选工具。它是一种静态类型的超集,由 Microsoft 推出,为开发者提供了强大的静态类型检查、面向对象编程和模块化开发的特性,解决了 JavaScript 的动态类型特性带来的一些问题。 在本篇博文中,我们将深入探讨 TypeScript 在

    2024年02月15日
    浏览(37)
  • TypeScript -类型断言的简单理解

    类型断言 : 是手动的给某个变量 指定类型,从而可以方便操作该类型的属性和方法。 方式一 : 变量名 as 类型 方式二 :类型 变量名 注意 : 1、类型断言只是为了方便明确变量的类型,而不是将变量的类型进行改变!!! 2、因此,类型断言在使用的时候,建议 在我们已

    2024年02月08日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包