Typescript 类型的本质是什么

发表于 3年以前 | 总阅读数：194 次

类型

类型指的是变量的类型，而变量是一块内存空间，不同类型的变量会占用不同的字节数，而且可以做的操作也不同。number、boolean、string 等类型的变量会占用不同的内存大小。

类型分为基础类型和引用类型，基础类型分配在栈上，而引用类型分配在堆上，之所以有引用类型是因为这种类型是复合出来的，比如对象，它可能有任意多个属性，这种就放在可动态分配内存的堆上，然后在栈上记录下该地址，这就是引用类型。

类型是运行时的变量的内存空间大小和可以做的操作的标识，但是代码中不一定包含，根据代码中是否有类型的标识，语言分为了静态类型语言和动态类型语言。

静态类型、动态类型、类型安全

动态类型语言的代码中没有记录变量的类型，对什么变量赋什么值做什么操作都是可以的，这样写代码时不用考虑类型的问题，比较简单，但是也有隐患，就是运行时变量赋值时发现类型不一致，或者调用了没有的方法等，这是动态类型语言的缺点。

静态类型语言则是把类型的标识保存在了代码里，也就是有静态类型系统。声明的变量的类型在运行时会分配相应的内存空间，就会赋相同类型的值，就会调用该类型有的方法，如果不是，在编译时就能检查出来。

这种同样类型的变量只赋值同类型的值，只做该类型允许的操作就叫做类型安全，显然，动态类型是类型不安全的，会在运行时有各种类型相关问题，而静态类型则通过类型系统在编译期间就把类型不安全的操作检查了出来进行报错，所以是类型安全的。

typescript 就是给动态类型的 javascript 添加了一套静态类型系统，是 javascript 的超集。

静态类型系统的 3 个层次

其实静态类型系统分为 3 个层次：

纯静态的类型系统

第一种就是纯静态的类型系统，变量的类型都是定义时声明的，但有一个问题就是遇到参数的类型可能是多种类型的时候会比较麻烦。一些古老的语言是这种。

比如：

int add(int a, int b) {
    return a + b;
}

double add(double a, double b) {
    return a + b;
}

带泛型的静态类型系统

第二种是带泛型的静态类型系统，泛型也叫类型参数，具体的类型可以通过泛型参数来动态确定，多了一定的灵活性。java 是这种。

比如：

T add<T>(T a, T b) {
    return a + b;
}

支持高级类型的静态类型系统

第三种是支持高级类型的静态类型系统，高级类型就是生成类型的类型，它除了可以传泛型参数外还可以支持分支、递归、取属性等操作，可以通过复杂的逻辑来生成类型。typescript 是这种。

比如下面的高级类型：

type RepeatN<Item, N extends number, Tuple extends any[] = []> = Tuple['length'] extends N ? Tuple : RepeatN<Item, N, [...Tuple, Item]>;

它的作用是当传入泛型参数时，返回该参数重复 n 次的元组：

type res = RepeactN<'a', 3>;
// res 为 ['a', 'a', 'a']

高级类型支持类型编程，甚至是图灵完备的，图灵完备的意思就是说提供的语言特性可以描述所有可计算的逻辑。也就是所有用 javascript 写的逻辑在 typescript 中用类型都可以实现，只不过具体语法有不同。

高级类型示例

就拿上面这个把参数重复 n 次的代码来说，如果用 javascript 我们会这样写：

function repeactN(item, n) {
    const res = [];
    for (let i = 0; i< n; i++) {
        res[i] = item;
    }
    return res;
}

用 typescript 的类型系统怎么写呢？

图灵完备意味着两者都能实现同样的逻辑，只不过实现方式不同。我们只要把逻辑想清楚，然后用类型支持的语法实现即可。

首先，函数参数在 ts 类型里就是泛型参数，变量在 ts 类型里也用泛型参数来存储，循环在 ts 类型利用递归来实现，所以就是这样的：

首先定义类型，Item 是重复的目标， n 是个数，然后第三个参数 Tuple 用来存储结果

type RepeatN<Item, N extends number, Tuple extends any[] = []>

然后具体的实现就是要不断的往 Tuple 里放 Item，递归构造

RepeatN<Item, N, [...Tuple, Item]>

直到 Tuple 的 length 到了 N

Tuple['length'] extends N ? Tuple : RepeatN<Item, N, [...Tuple, Item]>;

所以，完整的类型就是这样的：

type RepeatN<Item, N extends number, Tuple extends any[] = []> = Tuple['length'] extends N ? Tuple : RepeatN<Item, N, [...Tuple, Item]>;

通过这个高级类型我们可以感受到，typescript 的静态类型系统就是第三种，可以支持类型编程，可以实现各种复杂逻辑，最终生成目标类型。

tyepscript 类型系统复杂度的原因

为什么 tyepscript 要设计这么复杂的类型系统呢？

静态类型的目的就是把运行时的行为在编译时就检查出来，那么就要在编译期间就要确定最终类型，而 javascript 逻辑又很灵活，所以想还没运行就确定类型就需要各种类型的推导来生成最终类型，所以也就设计出了带高级类型的静态类型系统。

tyepscript 静态类型系统的复杂度主要是因为 javascript 比较灵活导致的，是不可避免的。

总结

类型本质上是运行时变量的内存大小和可对它进行的操作，变量只赋值同类型的值就是类型安全，动态类型在源码中没有类型信息，没法保证类型安全，而静态类型则是在源码中有类型信息，可以在编译期间检查出类型的错误，保证类型安全。

javascript 就是动态类型语言，虽然写代码比较简单，但是运行时很容易出类型安全问题，typescript 就是解决了 javascript 没有静态类型系统的问题而做的扩展。ts 的类型系统是支持泛型、支持高级类型的静态类型系统，而且类型的语法是图灵完备的，也就是各种逻辑都可以表达，只不过和 js 中的语法会有不同。这也是 ts 给 js 扩展的这套类型系统中最复杂的部分，被大家戏称为类型体操，但是这种复杂度是为了让 javascript 变得类型安全不可避免的。

其实高级类型的所谓类型体操也没有那么难，只要想清楚要表达的逻辑，然后一步步用相应的语法实现即可，只不过语法会有一些别扭，比如变量用泛型参数实现、循环用递归实现等，但只要理清逻辑，实现起来还是不难的。