阅读 600

TypeScript 简明教程:基本类型(二)

本文为系列文章《TypeScript 简明教程》中的一篇。

上一篇文章 基本类型(一)中,我们介绍了原始数据类型和其他几个 TypeScript 新引入的基本类型。这篇文章将会继续介绍剩下的几个基本类型,包括:列表(array)、元组(tuple)、对象(object)、字面量(literal)和枚举(enum)类型。

[TOC]

数组类型

TypeScript 提供了两种定义数组类型的方法。一种是在元素类型后加上 [] 表示这是一个数组;另一种方法是使用泛型表示:Array<T>,其中 T 为数组中元素的类型。

关于泛型,可以暂时理解为类型的参数。没有接触过强类型语言的同学,这里理解起来可能会有点困难>不过没关系,后面会有专门一篇文章讲解泛型。

// 第一种
let fruits: string[] = ['Apple', 'Banana', 'Orange']

// 第二种
let fruits: Array<string> = ['Apple', 'Banana', 'Orange']
复制代码

一般来说,对于上面例子中的这种,数组中元素都为简单类型时,我们倾向于使用第一种表示方法。第二种使用泛型的方法则用于表示更为复杂的类型。

例如:

// 「|」用于表示联合类型,这里表示数组中元素为 string 或 number 类型
let x: Array<string | number> 
x = ['Hello', 'World', 42]
复制代码

元组类型

乍看上去,元组与列表十分相似,都用于表示一组数据。它们之间的不同在于,元组的长度是有限的,而且可以分别定义每一位元素的类型。

一个常见的用法是用于保存函数的执行结果。

let status: [string, number] = submit(data, urlPath)
console.log(status)
// => ['error', 400]
复制代码

对象类型

object 表示除原始类型以外的类型。也就是说,被定义为 object 类型的变量不能被赋值为 stringnumberbooleansymbolnullundefined 类型的数据(对于 nullundefined,需开启 strictNullChecks)。

object 类型的存在允许我们进行更严格的类型定义。举个例子,对于 Object.create() 函数,标准库中的定义是这样的:

interface ObjectConstructor {
  /**
   * Creates an object that has the specified prototype or that has null prototype.
   * @param o Object to use as a prototype. May be null.
   */
  create(o: object | null): any;
 }
复制代码

Object.create() 作用是使用现有的对象或 null 来创建一个新的对象。在进行以上定义后,当你不小心传入一个 null 以外的原始值时,TypeScript 会在编译时报错。

Object.create({}) // OK
Object.create(null) // OK
Object.create('hello') // Error
Object.create(123) // Error
Object.create(true) // Error
Object.create(undefined) // Error
复制代码

字面量类型

字面量类型允许你约束某个变量可能的值,包括字符串字面量类型,数字字面量类型,布尔值字面量类型。它通常会和类型别名联合类型一起使用。

布尔值字面量类型

let lovePeace: true
lovePeace = true // OK
lovePeace = false // Error
复制代码

字符串字面量类型

用于约束某个字符串可能的取值。

type Effect = 'ease-in' | 'ease-out' | 'ease-in-out'

function animate(ele: Element, effect: Effect) {
    // ...
}

animate(document.getElementById('app'), 'ease-in')
animate(document.getElementById('app'), 'fade-in') // Error
复制代码

数字字面量类型

例如:投骰子的结果只能为 1~6 之间的值。

function rollDice(): 1 | 2 | 3 | 4 | 5 | 6 {
    // ...
}
复制代码

枚举类型

枚举是组织收集一组相关变量的方式。在 TypeScript 中,使用 enum 关键字定义。TS 支持两种枚举方式:基于数字的枚举和基于字符串的枚举。

数字枚举

首先我们来看基于数字的枚举:

enum Color {
    Red,
    Green,
    Blue
}
复制代码

上面我们定义了一个数字枚举 Color,其有三个成员 RedGreenBlue。默认情况下,第一个成员的值为 0,其余成员的值依次递增。

Color.Red === 0
Color.Green === 1
Color.Blue === 2
复制代码

你也可以自行设置枚举成员的初始值,其后的值依然会依次递增。

enum Color {
    Red = 1,
    Green,
    Blue
}
console.log(Color.Red, Color.Green, Color.Blue)
// => 1 2 3
复制代码

使用数字枚举时,TS 会为枚举成员生成反向映射。例如,对于上面的例子:

Color.Red === 1
Color[1] === 'Red'
复制代码

字符串枚举

字符串枚举允许你使用字符串来初始化枚举成员,可以是一个字符串字面量或者另一个字符串枚举成员。

enum Color {
    Red = 'RED',
    Green = 'GREEN',
    Blue = 'BLUE'
}
复制代码

字符串枚举成员不会自增长,每个成员都必须被初始化。另外,字符串枚举不会为成员生成反向映射

关于 TS 枚举类型,上面的内容基本上涵盖了常用的情况。除此以外,还有很多细节,篇幅原因,这里不再赘述,感兴趣可以参考[这篇文章](https://jkchao.github.io/typescript-book-chinese/typings/enums.html)。

小结

本篇文章主要介绍了 TS 中其他几个基础类型:列表(array)、元组(tuple)、对象(object)、字面量(literal)和枚举(enum)类型。

关注下面的标签,发现更多相似文章
评论