18.【TypeScript 教程】交叉类型

简介: 18.【TypeScript 教程】交叉类型

本节起开始介绍 TypeScript 高级类型,依次是交叉类型、联合类型、类型别名、索引类型、映射类型、条件类型。


本节介绍交叉类型的语法和应用,跟数学集合里的相交不一样,TypeScript 的交叉类型并不是指每个类型的交集,& 的意思理解成 and ,A & B 表示同时包含 A 和 B 的结果。

1. 解释

交叉类型是将多个类型合并为一个类型。

这让我们可以把现有的多种类型叠加到一起成为一种类型,它包含了所需的所有类型的特性。

语法为:类型一 & 类型二

2. 简单示例

先来看一个简单示例:

interface Admin {
  id: number,
  administrator: string,
  timestamp: string
}
 
interface User {
  id: number,
  groups: number[],
  createLog: (id: number) => void,
  timestamp: number
}
 
let t: Admin & User
 
t!.administrator // 合法 Admin.administrator: string
t!.groups        // 合法 User.groups: number[]
t!.id            // 合法 id: number
t!.timestamp     // 合法 timestamp: never

代码解释: 交叉类型 Admin & User 包含了原类型的所有属性,但是要注意两个接口都拥有 id 和 timestamp 属性,且 id 类型相同,timestamp 类型不同。在此交叉类型中,timestamp 属性类型冲突,不可被赋值。

3. 应用场景

我们大多是在混入(Mixins)或其它不适合典型面向对象模型的地方看到交叉类型的使用。下面是合并两传入对象的成员属性的例子:

function extend<T, U>(first: T, second: U): T & U {
  for(const key in second) {
    (first as T & U)[key] = second[key] as any
  }
  return first as T & U
}

函数返回结果的类型是两个对象的交叉类型。调用 extend 函数,实现两个对象的合并:

class Person {
  constructor(public name: string) { }
}
class ConsoleLogger {
  log() {}
}
 
let jim = extend(new Person('Jim'), new ConsoleLogger())
let n = jim.name
jim.log()

代码解释:

通过 extend() 函数合并了两个类的实例,我们知道交叉类型是 and 的意思,那么合并后即可访问 Person 类实例的 name 属性,也可以调用 ConsoleLogger 类实例的 log() 方法。

4. 小结

本节介绍了高级类型中的交叉类型,把 & 的意思理解成 and 即可轻松记忆,下一节开始介绍联合类型。


相关文章
|
24天前
|
JavaScript 前端开发 Java
TypeScript 类型兼容性
TypeScript 类型兼容性
|
24天前
|
JavaScript 前端开发
typescript 混合类型
typescript 混合类型
|
8天前
|
JavaScript 前端开发 IDE
TypeScript中的声明文件(.d.ts):扩展类型系统
TypeScript的`.d.ts`声明文件为JS库提供类型信息,增强IDE支持,如自动完成和类型检查。通过声明合并,可在全局作用域定义类型。示例包括为`my-library`创建声明模块,导出函数和接口。声明文件通常存于`@types`或指定`typeRoots`。用于旧JS代码的类型注解,如`myGlobalObject`。学习更多,参阅TypeScript官方文档。分享你的TS声明文件经验!
|
20天前
|
JavaScript 前端开发 安全
TypeScript:静态类型的动态语言
【6月更文挑战第9天】TypeScript是JavaScript的静态类型超集,解决JS类型安全问题,提供更强的代码组织和维护。它引入静态类型、接口和类,增强类型安全,减少运行时错误。TS与JS无缝集成,兼容现有库和框架,拥有丰富的开发工具和活跃社区。广泛应用在各种规模项目中,尤其提升复杂前端应用的代码质量。学习TypeScript对提升开发效率和代码可靠性极具价值。
26 10
|
18天前
|
前端开发 JavaScript 安全
TypeScript作为一种静态类型的JavaScript超集,其强大的类型系统和面向对象编程特性为微前端架构的实现提供了有力的支持
【6月更文挑战第11天】微前端架构借助TypeScript提升开发效率和代码可靠性。 TypeScript提供类型安全,防止微前端间通信出错;智能提示和自动补全加速跨代码库开发;重构支持简化代码更新。通过定义公共接口确保一致性,用TypeScript编写微前端以保证质量。集成到构建流程确保顺利构建打包。在微前端场景中,TypeScript是强有力的语言选择。
30 2
|
1天前
|
JavaScript 安全 开发者
Vue3 中更好地利用 TypeScript 的类型系统来提高代码质量
Vue3 中更好地利用 TypeScript 的类型系统来提高代码质量
|
24天前
|
JavaScript
TypeScript 泛型类型
TypeScript 泛型类型
|
26天前
|
JavaScript 编译器
35.【TypeScript 教程】编译选项
35.【TypeScript 教程】编译选项
16 2
|
4天前
|
JavaScript 安全
TypeScript类型(数字、字符串、字面量、数组、元组、枚举、对象等)
TypeScript类型(数字、字符串、字面量、数组、元组、枚举、对象等)
5 0
|
4天前
|
JavaScript
TypeScript类型申明
TypeScript类型申明
6 0