视频位置 TypeScript快速梳理_上篇 25:35

类型总览

JavaScript 中的数据类型(8个)

① string
② number
③ boolean
④ null
⑤ undefined
⑥ bigint
⑦ symbol
⑧ object
备注:其中 object 包含: Array 、 Function 、 Date 、 Error 等……

TypeScript 中的数据类型

总结起来,就三点。

1. 上述所有 JavaScript 类型(8个)

2. 六个新类型(ts新增 6个)

① any
② unknown
③ never
④ void
⑤ tuple
⑥ enum

3. 2个⽤于⾃定义类型的⽅式(ts新增 2个)

① type
② interface

注意点

原始类型 VS 包装对象

先看看 string 和 String 的区别:

let str1: string    //ts官方推荐的写法。 string类型只能存 基本类型的字符串。
str1 = 'hello'                //√
//str1 = new String('hello')//报错: 不能将类型"String"分配给类型"string"。
                            //      string"是基元,但"String"是包装器对象。如可能首选使用"string"。
                            //分析: new String('hello')生成的是一个 包装对象。

let str2: String    //str2可以写2种东西:字符串 或 包装对象。
str2 = 'hello'        //√ 更简洁 字面量直接给。
str2 = new String('hello')    //√

console.log(typeof str1) //string
console.log(typeof str2) //object

在 JavaScript 中的这些内置构造函数: Number 、 String 、 Boolean ,⽤于创建对应的包装对象, 在⽇常开发时很少使⽤,在 TypeScript 中也是同理,所以在 TypeScript 中进⾏类型声明时,通常都是⽤⼩写的 number 、 string 、 boolean 。

原始类型:如 number 、 string 、 boolean ,在 JavaScript 中是简单数据类型,它们在内存中占⽤空间少,处理速度快。

包装对象:如 Number 对象、 String 对象、 Boolean 对象,是复杂类型,在内存中占⽤更多空间,在⽇常开发时很少由开发⼈员⾃⼰创建包装对象。

⾃动装箱

该功能是js就有的。
JavaScript 在必要时会⾃动将原始类型包装成对象,以便调⽤⽅法或访问属性。
举例:

let str = 'hello'; //原始类型字符串

// 当访问str.length时,JavaScript引擎做了以下⼯作:
let size = (function() {
    // 1. ⾃动装箱:创建⼀个 临时的 String对象 包装 原始字符串。
    let tempStringObject = new String(str);    //str = 'hello'

    // 2. 然后从包装对象tempStringOjbect中取出.length属性
    let lengthValue = tempStringObject.length;

    // 3. 销毁临时对象,返回⻓度值
    // (JavaScript引擎 ⾃动 处理对象 销毁,开发者⽆感知)
    return lengthValue;
})();

console.log(size); // 输出: 5