欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-07-12 15:54:01
...

本文为系列文章《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)类型。

转载于:https://juejin.im/post/5c9f263ef265da30a726dc2c