学习TypeScript 之高级类型

前端小鑫同学

发布于 2022-12-26 09:25:06

1940

发布于 2022-12-26 09:25:06

Dear，大家好，我是“前端小鑫同学”，😇长期从事前端开发，安卓开发，热衷技术，在编程路上越走越远～

交叉类型（符号：“&”，Intersection Types）：

交叉类型的作用同样是将多个类型合并叠加为一种类型来使用，叠加后的类型包含了所有类型特性。在TypeScript中有很多方案可以实现类型的扩展，如混入，继承，实现等，当我们的实际操作环境不适合面向对象来操作的时候，就应当考虑使用交叉类型来实现了。

案例分析：我们还是定义一个Person类作为基础，定义一个拳击的接口，我们最后要定义一个运动员，这个运动员由Person类和拳击接口叠加而成。

// Person
class Person {
  name: string;
  gender: boolean;
  age?: number;
  constructor(name: string, gender: boolean, age: number) {
    this.name = name;
    this.gender = gender;
    this.age = age;
  }
}

// Boxing
interface Boxing {
  punches(): void;
}

// sportsman
const sportsman: Person &amp; Boxing = {
  name: "MMA大师",
  gender: true,
  age: 35,
  punches: () => {
    console.log("出拳💪");
  },
};

联合类型（符号：“|”，Union Types）

联合类型的应用是在我们定义一些函数的时候需要传入的参数类型并非特定，如可以传入的形参类型为string，number，boolean，这个时候我们就可以通过“|”来实现类型的联合。

class Person {
  name: string;
  gender: boolean;
  age?: number;
  constructor(name: string, gender: boolean, age: number) {
    this.name = name;
    this.gender = gender;
    this.age = age;
  }
}

class Animal {
  name: string;
  gender: boolean;
  age?: number;
  constructor(name: string, gender: boolean, age: number) {
    this.name = name;
    this.gender = gender;
    this.age = age;
  }
}

function say(arg: Person | Animal): void {
  console.log(arg.name, arg.gender);
}

类型保护&类型区分

上面的联合类型是当我们在需要传入多种类型的形参的定义方式，定义好后我们在实际使用的时候如何可以直接调用多种类型中相同的属性，函数，但是不同的内容要区分清楚是哪种类型所特有的。通常就是通过检测属性或函数是否存在后执行，如下：

function say(arg: Person | Animal): void {
  if (arg.name) {
    console.log(arg.name);
  }
}

我们来看类型断言怎么做：

  function say(arg: Person | Animal): void {
    console.log((<Person>arg).name);
    console.log((<Animal>arg).name);
  }

typeof类型保护：

instanceof类型保护：

function say(arg: Person | Animal): void {
  if (arg instanceof Person) {
    console.log(arg.name);
  }
  if (arg instanceof Animal) {
    console.log(arg.name);
  }
}

下一篇接着学习一下类型保护相关的一下内容

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2021-11-12，如有侵权请联系 cloudcommunity@tencent.com 删除

typescript