TS --- 基础数据类型

140 阅读5分钟

「这是我参与2022首次更文挑战的第18天,活动详情查看:2022首次更文挑战

布尔类型

布尔类型 只有true和false两个值,所以布尔类型也可以被认为是 联合类型true | false的别名

let bool: boolean = true

数值类型

在JavaScript中,所有的数值使用浮点数,所以在JavaScript中只有一种数值类型,也就是number类型

let num: number = 123

// TypeScript和JavaScript一样,同样支持其它进制数据
num = 0b1111011
num = 0o173
num = 0x7b

字符串类型

在TypeSCript中,支持单引号,双引号形式的字符串和模板字符串

let name: string = 'Klaus'
let str: string = `name: ${ name }`

数组

在TypeScript中,支持两种形式的数组

  1. type[] --- 例如: number[]
  2. Array<type> --- 例如: Array<number>
let arr: number[]
let list: Array<string>

元组

元组(tuple)是TypeScript中特有的数据类型,可以被看成是一种特殊的数组

元组和数组的区别如下:

  1. 元组的长度是确定的
  2. 元组各个位置上的元素的数据类型是确定的
let tuple: [number, string, boolean] = [1, 'Alex', true]

枚举

枚举(enum)是TypeScript中特有的数据类型,目的是为一组变量起一组可读性强的别名

// 在约定中,枚举名一般大写
enum Direction {
  left,
  top,
  right,
  bottom
}

默认情况下,枚举值从零开始依次递增

console.log(Direction.left) // => 0
console.log(Direction.top) // => 1
console.log(Direction.right) // => 2
console.log(Direction.bottom) // => 3

和TypeScript中的其它数据类型不同的是,在默认情况下,TypeScript中的枚举值会改变JavaScript的运行时

// 上述的enum 在运行时 会被编译为如下代码
"use strict";
var Direction;
(function (Direction) {
    Direction[Direction["left"] = 0] = "left";
    Direction[Direction["top"] = 1] = "top";
    Direction[Direction["right"] = 2] = "right";
    Direction[Direction["bottom"] = 3] = "bottom";
})(Direction || (Direction = {}));

从上述编译后的代码可以看出,在TypeScript中的枚举既支持通过别名去取索引值,也支持通过索引去取枚举值

// 通过枚举值 去取 索引值
console.log(Direction.left) // => 0

// 通过索引值 去取 枚举值
console.log(Direction[2]) // => 'right'

在TypeScript中,枚举可以分为数值枚举 和 字符串枚举

在数值枚举中,可以在任意索引值处指定索引值

enum Direction {
  left, // 设置之前的值 依旧是默认索引值 --- 0
  top = 2, // 2
  right = 5, // 5
  bottom // 设置之后的值 会依据之前所设置的索引值 自动进行递增 --- 6
}

在字符串枚举中,因为枚举值所对应的值并不是数值,所以在字符串枚举中,枚举值无法依次进行自主的递增

因此,在字符串枚举中,需要为每一个枚举显示的指定对应的枚举值

enum Direction {
  left = 'left',
  top = 'top',
  right = 'right',
  bottom = 'bottom'
}

object

object类型用于表示对象类型(包括普通对象,数组,函数等)

将一个变量的类型设置为object,TypeScript的类型检测系统只能知道该变量是对象,

并不能知道该对象上有哪些属性和方法,此时我们只能使用对象上公共的属性和方法

在实际开发中,我们需要TypeScript对我们的对象的属性和方法进行检测

所以在实际使用的时候,推荐使用接口的形式来定义对象,而不是object

let o: object = {
  name: 'Klaus',
  age: 23
}

void

void表示的是空类型,当一个函数没有返回值的时候,可以使用void类型来指定该函数的返回值类型

function foo(): void {
  console.log('foo')
  // 因为在JavaScript中,如果一个函数不返回任何的值,那么这个函数默认返回undefined
  // 所以在TypeScript中,undefined可以被视为是void类型的子类型
}

never

never表示的是那些不存在或者不可能达到的值,一般作为会抛出异常或者存在死循环代码的函数的返回值

function fun(): never {
  throw new Error('error')
}

function func(): never {
  while(true) {
    // ....
  }
}

never类型也可以用来确保所有的类型都已经被处理

function demo(v: number | string) {
  switch(typeof v) {
    case 'number':
      // ...
      break;
      
    case 'string':
      // ....
      break;
    
    default:
      // 如果在之前的处理逻辑中,我们已经将v的所有可能的类型都进行了判断
      // 那么进入default中的v的类型 一定是never
			// 那么下述语句是不会报错的,否则会出现错误
      let n: never = v
  }
}

never类型是其它任意类型的子类型,包括 null 和 undefined

没有任何类型是never的子类型

let n = (() => {
  while(true) {
	 // ...
  }
})()

let un: undefined
let nul: null

un = n
nul = n

undefined / null

undefined 和 null 是TypeScript中两个比较特殊的类型

undefined类型只有一个值 即undefined

null类型只有一个值 即 null

在默认情况下,null和undefined是其它任意类型的子类型

但是在开启strictNullChecks的时候,null和undefined只能赋值给自己类型的值,不可以作为其它任意类型的子类型(undefined是void的子类型除外)

let nul: null = null
let und: undefined = undefined

any

为了方便JavaScript程序迁移成TypeScript类型,TypeScript类型提供了一个特殊的类型any

如果一个变量的值的类型被设置成了any,那么TypeScript的类型检测系统便不会对这个变量进行类型检测

如果在项目中为每个变量的类型都指定为any,那么TypeScript的表现形式就和JavaScript基本没有任何的区别

所以如无特殊情况,不推荐在项目中将变量的数据类型设置为any

在开发中,推荐打开noImplicitAny,这个配置可以在我们将变量设置为any类型或者某个变量的数据类型被推导为any的时候,即使给予我们警告

类型断言

TypeScript认为编写者一定比TypeScript的编译器更明白自己所编写的代码

而且在某些特定情况下,因为一些限制,可能导致TypeScript编辑器无法正确的为我们推导出正确的数据类型

此时就可以使用类型断言, 而类型断言可以被认为是在TypeScript中进行强制类型转换的一种形式

有两种方式可以使用类型断言

  1. 变量 as 类型 --- 推荐 可以在JSX中使用

  2. <类型> 变量 --- 不推荐 不可以在JSX中使用

let num: number
let str: string = num as string
str = <string>num