美文网首页js css html
Typescript类型断言

Typescript类型断言

作者: wyc0859 | 来源:发表于2022-03-14 10:05 被阅读0次

类型断言

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

以下几种场景都属于重叠关系

1、如果 A,B 都是类并且有继承关系
无论 A,B 谁是父类或子类, A 的对象变量可以断言成 B 类型,B的对象变量可以断言成A类型。
但注意一般在绝大多数场景下都是把父类的对象变量断言成子类。

class Parent {
  public xingshi!: string;
  constructor() {}
}
class Son extends Parent {
  public name!: string;
  public sex = "男";
  game() {
    console.log("喜欢游戏");
  }
}
class Daughter extends Parent {
  public name!: string;
  public sex = "女";
  picture() {
    console.log("喜欢图画");
  }
}
let parent = new Parent();
let res1 = parent as Daughter; // 类型断言,父类转子类
res1.picture(); //编译执行后找不到,是报错的。但现在未编译时是正确的,真实应用:结合多态,泛型

let res2 = <Son>parent; // 类型转换
res2.game(); //未编译时是正确,vscode也没报错

多个类组成的联合类型如何断言?

class Student {
  school(param: Son | Daughter) {
    <Son>param;
    param as Daughter;
    param as any;
    param as unknown;
    (param as Son).game(); //断言成功,未编译时是正确, 编译执行后报错
  }
}
let student = new Student();
let lisa = new Daughter();
student.school(lisa);
  1. 如果 A,B 都是类,但没有继承关系
    两个类中的任意一个类的所有的 public 实例属性【不包括静态属性】加上所有的 public实例方法 和
    另一个类的所有public 实例属性加上所有的 public 实例方法完全相同或是另外一个类的子集
    则这两个类可以相互断言。否则这两个类就不能相互断言
  2. 如果 A 是类,B 是接口,并且 A 类实现了 B 接口【implements】,则AB可相互断言
  3. 如果 A 是类,B 是接口,A 类没有实现 B接口,断言关系和第2项的规则完全相同
  4. 如果 A 是类,B 是 type 定义的数据类型【就是引用数据类型,例如 Array, 对象,不能是基本数据类型】
    并且有 A 类实现了 B type 定义的数据类型【 implements】,则AB可相互断言
  5. 如果 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;
}

let people: People = {
  username: "Lilei",
  age: 23,
  address: "xxx",
  phone: "111",
};
let result = people as Stu; //断言成功,Stu并未实现type类型数据,但满足子集规则

let stu = new Stu();
stu as People; // 也正确
  1. 如果 A 是一个函数上参数变量的联合类型,例如 string |number,那么在函数内部可以断言成 string 或number 类型
function total(value: string | number) {
  //value + 3   //这样是报错的,断言一下就不报错了
  const res = (value as number) + 3;
  console.log("total:", res);
}
total("30"); //303 明显,断言后没报错,但仍然是字符串 + 3
total(45); //48
  1. 任何数据类型都可以转换成 any 或 unknown 类型,any 或 unknown 类型也可以转换成任何其他数据类型。

相关文章

  • ES6 之后 typescript 类

    1.0 typescript 类型断言 letsomeValue:any="this is a string";l...

  • TypeScript 类型断言

    类型断言(Type Assertion)可以用来手动指定一个值的类型。 语法 <类型>值 或者 值 as 类...

  • typescript 类型断言

    有时候会遇到这样的情况,你会比TypeScript更了解某个值的详细信息。 通常这会发生在你清楚地知道一个实体具有...

  • TypeScript类型断言

    类型断言 类型断言(Type Assertion)可以用来手动指定一个值的类型。 语法 在 tsx 语法(Reac...

  • TypeScript 类型断言

    语法 <类型>值 或者 值 as 类型 在 tsx 语法(React 的 jsx 语法的 ts 版)中必须用后一种...

  • TypeScript类型断言

    类型断言(Type Assertion)可以用来手动指定一个值的类型 自己理解,在联合类型的时候,只能访问联合类型...

  • Typescript类型断言

    语法 <类型>值 或者 值 as 类型 在 tsx 语法(React 的 jsx 语法的 ts 版)中必须用后一种...

  • typescript类型断言

    类型断言 有时候你会遇到这样的情况,你会比TypeScript更了解某个值的详细信息。 通常这会发生在你清楚地知道...

  • Typescript类型断言

    类型断言 TS 类型断言定义:把两种 有重叠关系的 数据类型 进行相互转换,把其中一种数据类型 转换成 另外一种数...

  • TypeScript的类型断言

    本文摘自 https://ts.xcatliu.com/basics/type-assertion[https:/...

网友评论

    本文标题:Typescript类型断言

    本文链接:https://www.haomeiwen.com/subject/dexddrtx.html