学习TypeScript 之高级类型

简介: 学习TypeScript 之高级类型

交叉类型(符号:“&”,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 & 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);
  }
}



相关文章
|
1月前
|
前端开发 JavaScript 安全
TypeScript在React Hooks中的应用:提升React开发的类型安全与可维护性
【7月更文挑战第17天】TypeScript在React Hooks中的应用极大地提升了React应用的类型安全性和可维护性。通过为状态、依赖项和自定义Hooks指定明确的类型,开发者可以编写更加健壮、易于理解和维护的代码。随着React和TypeScript的不断发展,结合两者的优势将成为构建现代Web应用的标准做法。
|
6天前
|
JavaScript
TypeScript——不能将类型“HTMLElement | null”分配给类型“HTMLElement”
TypeScript——不能将类型“HTMLElement | null”分配给类型“HTMLElement”
18 4
|
11天前
|
JavaScript 编译器
typescript 解决变量多类型访问属性报错--工作随记
typescript 解决变量多类型访问属性报错--工作随记
|
5天前
|
JavaScript
TypeScript——Record类型
TypeScript——Record类型
11 0
|
11天前
|
JavaScript 前端开发 编译器
Typescript 回调函数、事件侦听的类型定义与注释--拾人牙慧
Typescript 回调函数、事件侦听的类型定义与注释--拾人牙慧
|
1月前
|
JavaScript 开发者 索引
TypeScript接口与类型别名:深入解析与应用实践
【7月更文挑战第10天】TypeScript的接口和类型别名是定义类型的关键工具。接口描述对象结构,用于类、对象和函数参数的形状约束,支持可选、只读属性及继承。类型别名则为复杂类型提供新名称,便于重用和简化。接口适合面向对象场景,类型别名在类型重用和复杂类型简化时更有优势。选择时要考虑场景和灵活性。
|
1月前
|
JavaScript 前端开发 安全
如何学习typescript?
【7月更文挑战第9天】1. 了解其为JavaScript超集,增加类型系统和ES6特性,提升代码安全性和效率。 2. 安装 TypeScript 全局 (`npm install -g typescript`),用`tsc -v`验证,或尝试在线的TypeScript Playground。 3. 学习类型注解、基础类型(如number、string、boolean等)、any与unknown,接口和类。 4. 探索高级特性,如泛型、模块&命名空间、装饰器。 5. 实践中巩固知识,如做小项目(如用React或Vue),阅读官方文档,参与社区讨论。持续编码和实践是关键。
19 0
|
1月前
|
JavaScript 前端开发 程序员
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
37 0
|
1月前
|
JavaScript 安全
TypeScript(十一)泛型工具类型
TypeScript(十一)泛型工具类型
23 0
|
1月前
|
JavaScript 前端开发 编译器
TypeScript(五)类型别名及类型符号
TypeScript(五)类型别名及类型符号
26 0