20.【TypeScript 教程】类型别名

简介: 20.【TypeScript 教程】类型别名

TypeScript 类型别名

本节介绍的类型别名,就是通过关键字 type 给类型起个别名,类型别名较多应用于联合类型、交叉类型这种复合类型。


1. 解释

类型别名会给类型起个新名字。类型别名有时和接口很像,但是可以作用于原始值,联合类型,元组以及其它任何你需要手写的类型。

用关键字 type 定义类型别名。


2. 举例说明

类型别名不会新建一个类型,而是创建一个新名字来引用此类型

先看下面几个例子,

原始类型:

type brand = string
type used = true | false
 
const str: brand = 'mybj'
const state: used = true

联合类型:

type month = string | number
 
const currentMonth: month = 'February'
const nextMonth: month = 3

交叉类型:

interface Admin {
  id: number,
  administrator: string,
  timestamp: string
}
 
interface User {
  id: number,
  groups: number[],
  createLog: (id: number) => void,
  timestamp: number
}
 
type T = Admin & User

同接口一样,类型别名也可以是泛型:

type Tree<T, U> = {
  left: T,
  right: U
}


3. 接口 vs. 类型别名

类型别名看起来和接口非常类似,区别之处在于:

  • 接口可以实现 extends 和 implements,类型别名不行。
  • 类型别名并不会创建新类型,是对原有类型的引用,而接口会定义一个新类型。
  • 接口只能用于定义对象类型,而类型别名的声明方式除了对象之外还可以定义交叉、联合、原始类型等。

类型别名是最初 TypeScript 做类型约束的主要形式,后来引入接口之后,TypeScript 推荐我们尽可能的使用接口来规范我们的代码。


4. 小结

类型别名在定义交叉类型、联合类型时特别好用,要注意类型别名与接口的区别。

相关文章
|
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