攀爬TS之路(六) 类型别名、字面量类型、枚举

简介: 攀爬TS之路(六) 类型别名、字面量类型、枚举

类型别名

类型别名就是给一个类型起一个新名字。使用关键字type

type Name = string


const myname1: Name = 'clz'
const myname2: Name = 123

上面的例子中,使用了类型别名,所以后续可以直接使用类型别名Name来当成string使用。

如果给比较复杂的类型使用类型别名,后续使用就会很方便。

type SumType = (a: number, b: number) => number

const sum: SumType = (a, b) => a + b

console.log(sum(11, 22))
console.log(sum(11, ''))    // 报错:类型“string”的参数不能赋给类型“number”的参数。

字面量类型

可以使用字面量类型来约束取值只能为特定的字面量。

type Name = 'clz' | 123 | true | { name: 'clz' }

const myname1: Name = 'clz'
const myname2: Name = 123
const myname3: Name = true
const myname4: Name = {
    name: 'clz'
}

const myname5: Name = 'ccc'
const myname6: Name = 124
const myname7: Name = false
const myname8: Name = {
    name: 'czh'
}

nullundefined不受限制

type Name = 'clz' | 123 | true | { name: 'clz' }

const myname1: Name = null
const myname2: Name = undefined

枚举

枚举一般用来表示一组常量,比如一周的七天,方向有东南西北等。

基本使用

使用方法很简单:

enum Direction {
    East,
    South,
    West,
    North
}

console.log(Direction['East'])     // 0
console.log(Direction['South'])    // 1
console.log(Direction['West'])     // 2
console.log(Direction['North'])    // 3

枚举成员会被赋值从0开始递增数字,所以上面的例子会依次打印0、1、2、3。
另外,还会对枚举值到枚举名进行反向映射,如枚举成员East的值是0,那么Direction[0]的值就是East

console.log(Direction['East'])     // 0
console.log(Direction[0])          // East

那么,这是怎么实现的呢?
先打印Direction瞧瞧。

发现这个枚举对象的键和值都是该对象的属性。接下来当然得看看编译成JS后究竟是怎么实现的。

发现还挺简单。就是赋值的时候,把另一个赋值表达式当成键来赋值,这样子就会拿那个表达式的结果来当成键来使用。

手动赋值

enum Direction {
    East = 4,
    South = 1,
    West,
    North
}

console.log(Direction)

手动赋值的时候,枚举项的值将不再是从0开始递增了,而是会接着上一个枚举项递增。比如上面的例子中,South的值是1,而后面的West没有手动赋值,所以它的值是2,同理,North的值是3。

注意:非手动赋值的枚举项和手动赋值的重复的时候,后面的会把前面的给覆盖掉。

enum Direction {
    East = 2,
    South = 1,
    West,
    North
}

console.log(Direction[2])   // West
console.log(Direction)      // 键为2时的结果是West。键为2,值为East的被覆盖掉了

常数枚举

常数枚举就是使用const enum定义的枚举类型。它和普通枚举不同,它会在编译阶段被删除。

所以下面这段代码编译出来是什么东西都没有。

const enum Direction {
    East,
    South,
    West,
    North,
}

console.log([Direction.East, Direction.South, Direction.West, Direction.North])

当我们使用时,编译的结果后面会有该枚举项的键作为注释。

其他使用方式

枚举项是小数或负数

手动赋值的枚举项还可以是小数或负数,递增步长仍然是1

enum Direction {
    East = -4,
    South = -1.5,
    West,
    North
}

console.log(Direction)     

枚举项不是数字

手动赋值的枚举项可以不是数字

enum Direction {
    East = "E",
    South = "S",
    West = "W",
    North = "N"
}

console.log(Direction)  

这个时候没有反向映射了,如果枚举项不是数字,但是还是想要有反向映射的话。需要使用类型断言来让tsc无视类型检查,并且全部都要并且只能断言为any

enum Direction {
    East = "E" as any,
    South = "S" as any,
    West = "W" as any,
    North = "N" as any
}

console.log(Direction)     

手动赋值的枚举项不是数字时,后面不能有非手动赋值项

目录
相关文章
|
1月前
|
JavaScript
typeScript进阶(9)_type类型别名
本文介绍了TypeScript中类型别名的概念和用法。类型别名使用`type`关键字定义,可以为现有类型起一个新的名字,使代码更加清晰易懂。文章通过具体示例展示了如何定义类型别名以及如何在函数中使用类型别名。
36 1
typeScript进阶(9)_type类型别名
|
1月前
|
JavaScript
typeScript基础(2)_any任意值类型和类型推论
本文介绍了TypeScript中的`any`任意值类型,它可以赋值为其他任何类型。同时,文章还解释了TypeScript中的类型推论机制,即在没有明确指定类型时,TypeScript如何根据变量的初始赋值来推断其类型。如果变量初始化时未指定类型,将被推断为`any`类型,从而允许赋予任何类型的值。
52 4
|
9天前
|
JavaScript 前端开发 安全
深入理解TypeScript:增强JavaScript的类型安全性
【10月更文挑战第8天】深入理解TypeScript:增强JavaScript的类型安全性
18 0
|
9天前
|
JavaScript 前端开发 开发者
深入理解TypeScript:类型系统与实用技巧
【10月更文挑战第8天】深入理解TypeScript:类型系统与实用技巧
|
1月前
|
JavaScript
typeScript基础(5)_对象的类型-interfaces接口
本文介绍了TypeScript中接口(interfaces)的基本概念和用法,包括如何定义接口、接口的简单使用、自定义属性、以及如何使用`readonly`关键字定义只读属性。接口在TypeScript中是定义对象形状的重要方式,可以规定对象的必有属性、可选属性、自定义属性和只读属性。
34 1
|
1月前
|
存储 JavaScript
typeScript进阶(11)_元组类型
本文介绍了TypeScript中的元组(Tuple)类型,它是一种特殊的数组类型,可以存储不同类型的元素。文章通过示例展示了如何声明元组类型以及如何给元组赋值。元组类型在定义时需要指定数组中每一项的类型,且在赋值时必须满足这些类型约束。此外,还探讨了如何给元组类型添加额外的元素,这些元素必须符合元组类型中定义的类型联合。
41 0
|
1月前
|
JavaScript
typeScript进阶(10)_字符串字面量类型
本文介绍了TypeScript中的字符串字面量类型,这种类型用来限制变量只能是某些特定的字符串字面量。通过使用`type`关键字声明,可以确保变量的值限定在预定义的字符串字面量集合中。文章通过示例代码展示了如何声明和使用字符串字面量类型,并说明了它在函数默认参数中的应用。
30 0
|
4天前
|
JavaScript 前端开发
TypeScript【类型别名、泛型】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第11天】TypeScript【类型别名、泛型】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
6天前
|
JavaScript 前端开发 安全
TypeScript【基础类型】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第9天】TypeScript【基础类型】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
9天前
|
JavaScript 前端开发 开发者
深入理解TypeScript:类型系统与最佳实践
【10月更文挑战第8天】深入理解TypeScript:类型系统与最佳实践