学习TypeScript 之高级类型
2023-02-18 16:41:29 时间
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 & 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);
}
}
下一篇接着学习一下类型保护相关的一下内容
相关文章
- 给你的眼睛也放个假
- 一文吃透哈希
- 线程交替打印
- 今天给大家推荐的是一款非常强大的开源堡垒机,JumpServer
- 我是没想到这个公司的笔试编程题这么难
- java解释器虚拟机-java 虚拟机内存/线程共享情况
- 为什么time_wait状态默认是2MSL
- 3d打相机-创想三维:3D扫描在3D打印机上的运用
- 字节一道笔试题记录
- css易忘知识点换行
- java解释器虚拟机-Java代码如何运行在Java虚拟机中
- java解释器虚拟机-【Java解释器和编译器】解释器和编译器的深入理解
- 软链接和硬链接
- c语言之父是谁-第一章 C语言概述 - 1.2 C语言的前世今生?
- Spring Boot3.0升级,踩坑之旅,附解决方案(二)
- ES6中Promise简单记一下笔记
- 腾讯9.5第二批后端笔试牛客大佬全AC记录
- c语言之父是谁-知名编程语言的发展简史
- 取消css事件
- 初学LeetCode算法题电话号码的字母组合(虽然不难但是做出来还是很爽的)