TS的几种特殊类型,搞懂,搞透~

134 阅读6分钟

1. TS有哪些类型呢❓

JS原有的8种:string number boolean null undefined bigint symbol object

TS扩展的6种:any unknown never void tuple enum

2. 大写的Number和小写的number有啥区别吗❓

这就要说到原始类型包装对象了。原始类型numberstringboolean在JS中是简单数据类型,他们在内存中占用空间少,处理速度快。包装对象例如NumberStringBoolean是复杂类型,在内存中占⽤更多空间,在⽇常开发时很少由开发⼈员⾃⼰创建包装对象。

这里提个东西叫自动装箱,JavaScript 在必要时会⾃动将原始类型包装成对象,以便调⽤⽅法或访问属性。下面有一个🌰。

// 原始类型字符串
let str = 'hello';
// 当访问str.length时,JavaScript引擎做了以下⼯作:
let size = (function() {
 // 1. ⾃动装箱:创建⼀个临时的String对象包装原始字符串
 let tempStringObject = new String(str);
 // 2. 访问String对象的length属性
 let lengthValue = tempStringObject.length;
 // 3. 销毁临时对象,返回⻓度值
 // (JavaScript引擎⾃动处理对象销毁,开发者⽆感知)
 return lengthValue;
})();
console.log(size); // 输出: 5

3. 特殊类型用法

any

any为任意类型,⼀旦将变量类型限制为 any ,那就意味着放弃了对该变量的类型检查。 具体看下面🌰

// 明确的表示a的类型是 any —— 【显式的any】
let a: any
// 以下对a的赋值,均⽆警告
a = 100
a = '你好'
a = false
// 没有明确的表示b的类型是any,但TS主动推断出来b是any —— 隐式的any
let b
//以下对b的赋值,均⽆警
b = 100
b = '你好'
b = false

需要注意的是 any 类型的变量,可以赋值给任意类型的变量

let c:any
c = 9
let x: string

unknown

unknown 为未知类型,适⽤于:起初不确定数据的具体类型,要后期才能确定 unknown

  1. unknown 可以理解为⼀个类型安全的any。
// 设置a的类型为unknown
let a: unknown
//以下对a的赋值,均符合规范
a = 100
a = false
a = '你好'
// 设置x的数据类型为string
let x: string
x = a //警告:不能将类型“unknown”分配给类型“string”
  1. unknown 会强制开发者在使⽤之前进⾏类型检查,从⽽提供更强的类型安全性。
// 设置a的类型为unknown
let a: unknown
a = 'hello'
//第⼀种⽅式:加类型判断
if(typeof a === 'string'){
 x = a
 console.log(x)
}
//第⼆种⽅式:加断⾔
x = a as string
//第三种⽅式:加断⾔
x = <string>a
  1. 读取 any 类型数据的任何属性都不会报错,⽽ unknown 正好与之相反。
let str1: string
str1 = 'hello'
str1.toUpperCase() //⽆警告
let str2: any
str2 = 'hello'
str2.toUpperCase() //⽆警告
let str3: unknown
str3 = 'hello';
str3.toUpperCase() //警告:“str3”的类型为“未知”
// 使⽤断⾔强制指定str3的类型为string
(str3 as string).toUpperCase() //⽆警告

Tips: unknown 与 any 相比会要求在运行时判断类型以保证类型安全。

never

never 为任何值都不是,即:不能有值,例如 undefined 、 nul l 、 '' 、 0 都不⾏!

never 一般用于限制函数的返回值

// 限制throwError函数不需要有任何返回值,任何值都不⾏,像undeifned、null都不⾏
function throwError(str: string): never {
 throw new Error('程序异常退出:' + str)
}

void

void 的含义是空,即:函数不返回任何值,调⽤者也不应依赖其返回值进⾏任何操作!

  1. void 一般用于指定函数返回值。在函数没有 return 语句,返回默认值 undefined 时,void 类型时可以接受的
  2. 指定函数返回值时 undefinedvoid 的区别
// void
function logMessage(msg:string):void{
 console.log(msg)
}
let result = logMessage('你好')
if(result){ // 此⾏报错:⽆法测试 "void" 类型的表达式的真实性
 console.log('logMessage有返回值')
}
// undefined
function logMessage(msg:string):undefined{
 console.log(msg)
}
let result = logMessage('你好')
if(result){ // 此⾏⽆警告
 console.log('logMessage有返回值')
}

扩展理解一下 voidundefined

  • void 是⼀个⼴泛的概念,⽤来表达“空”,⽽ undefined 则是这种“空”的具体 实现。
  • 因此可以说 undefinedvoid 能接受的⼀种“空”的状态。
  • 也可以理解为: void 包含 undefined ,但 void 所表达的语义超越了 undefinedvoid 是⼀种意图上的约定,⽽不仅仅是特定值的限制。

tuple

元组 (Tuple) 是⼀种特殊的数组类型,可以存储固定数量的元素,并且每个元素的类型是已知的且可以不同。元组⽤于精确描述⼀组值的类型,? 表示可选元素。

// 第⼀个元素必须是 string 类型,第⼆个元素必须是 number 类型。
let arr1: [string,number]
// 第⼀个元素必须是 number 类型,第⼆个元素是可选的,如果存在,必须是 boolean 类型。
let arr2: [number,boolean?]
// 第⼀个元素必须是 number 类型,后⾯的元素可以是任意数量的 string 类型
let arr3: [number,...string[]]
// 可以赋值
arr1 = ['hello',123]
arr2 = [100,false]
arr2 = [200]
arr3 = [100,'hello','world']
arr3 = [100]
// 不可以赋值,arr1声明时是两个元素,赋值的是三个
arr1 = ['hello',123,false]

enum

枚举( enum )可以定义⼀组命名常量,它能增强代码的可读性,也让代码更好维护。

  1. 数字枚举 数字枚举⼀种最常⻅的枚举类型,其成员的值会⾃动递增,且数字枚举还具备反向映射的特点,在下⾯代码的打印中,不难发现:可以通过值来获取对应的枚举成员名称。
// 定义⼀个描述【上下左右】⽅向的枚举Direction
enum Direction {
 Up,
 Down,
 Left,
 Right
}
console.log(Direction) // 打印Direction会看到如下内容
/*
 {
 0:'Up',
 1:'Down',
 2:'Left',
 3:'Right',
 Up:0,
 Down:1,
 Left:2,
 Right:3
 }
*/
// 反向映射
console.log(Direction.Up)
console.log(Direction[0])
// 此⾏代码报错,枚举中的属性是只读的
Direction.Up = 'shang'

也可以指定枚举成员的初始值,其后的成员值会⾃动递增。

enum Direction {
 Up = 6,
 Down,
 Left,
 Right
}
console.log(Direction.Up); // 输出: 6
console.log(Direction.Down); // 输出: 7
  1. 字符串枚举
enum Direction {
 Up = "up",
 Down = "down",
 Left = "left",
 Right = "right"
}
let dir: Direction = Direction.Up;
console.log(dir); // 输出: "up"
  1. 常量枚举

官⽅描述:常量枚举是⼀种特殊枚举类型,它使⽤ const 关键字定义,在编译时会被内联,避免⽣成⼀些额外的代码。

何为编译时内联?

所谓“内联”其实就是 TypeScript 在编译时,会将枚举成员引⽤替换为它们的实际值, ⽽不是⽣成额外的枚举对象。这可以减少⽣成的 JavaScript 代码量,并提⾼运⾏时性能。

使⽤普通枚举的 TypeScript 代码如下:

enum Directions {
 Up,
 Down,
 Left,
 Right
}
let x = Directions.Up;

编译后⽣成的 JavaScript 代码量较⼤ :

"use strict";
var Directions;
(function (Directions) {
 Directions[Directions["Up"] = 0] = "Up";
 Directions[Directions["Down"] = 1] = "Down";
 Directions[Directions["Left"] = 2] = "Left";
 Directions[Directions["Right"] = 3] = "Right";
})(Directions || (Directions = {}));
let x = Directions.Up;

使⽤常量枚举的 TypeScript 代码如下:

const enum Directions {
 Up,
 Down,
 Left,
 Right
}
let x = Directions.Up;

编译后⽣成的 JavaScript 代码量较⼩:

"use strict";
let x = 0 /* Directions.Up */;