TypeScript：老手也容易迷惑的地方

站长

2022年09月17日 22:59 · 阅读数 34

首先需要说明下，因为 TypeScript 的类型系统最终是服务于 JavaScript 的，所以任何 js 写出来的代码，ts 都必须能声明出对应的类型约束，这就导致 ts 可能会出现非常复杂的类型声明。而一般的强类型语言则没这样的问题，因为在一开始设计之初，那些无法用类型系统声明出来的接口压根就不允许创建。

并且，TypeScript 是结构化类型，有别于名义类型，任何类型是否契合取决于它的结构是否契合，而名义类型则是必须有严格的类型对应。

下面很多内容都是基于上面两点去思考的，下面进入正题。

一、关于枚举

除了正常枚举的声明，在面对不同场景时，枚举声明也会有一些不同。

动态枚举

允许在枚举中初始化动态的数值，但字符串不行

// 动态数值
enum A { 
    Error = Math.random(),
        Yes = 3 * 9
}

// 当带有字符串时则不可以
enum A {
    Error = Math.random(), // Error：含字符串值成员的枚举中不允许使用计算值
    Yes = 'Yes',
}

加 const 前缀

// 枚举加 const 前缀，将会在编译器直接用字符串代替变量引用
const enum NoYes { No='No', Yes='Yes' }

// 编译前:
const a = NoYes.NO
// 编译后:
const a = 'No'

作为对象

// 因为 ts 是结构性类型系统，所以枚举也可以作为对象传入，但总感觉怪怪的
enum NoYes {
  No = 'No',
  Yes = 'Yes',
}
function func(obj: { No: string }) {
    return obj.No;
}
func(NoYes); // 编译通过

数字和字符串枚举的检查宽松度不同

// 数字枚举的宽松检查
enum NoYes { No, Yes }
function func(noYes: NoYes) {}
func(33); // 并不会报类型错误！

// 字符串枚举却报错
enum NoYes { No='No', Yes='Yes' }
function func(noYes: NoYes) {}
func('NO'); // Error: 类型“"NO"”的参数不能赋给类型“NoYes”的参数

之所以允许数字随意赋值给枚举，我猜也是因为允许动态数值枚举的关系。

二、重载为什么不能分开写

ts 中的函数重载：

function foo(p: string);
function foo(p: number);
function foo(p: string | number) { ... };

java中的重载：

public class Overloading {
    public int foo(){
        System.out.println("test1");
        return 1;
    }
 
    public void foo(int a){
        System.out.println("test2");
    }   
}

不支持分开写重载的原因是：

传统的重载是在编译时将重载函数拆分命名（func 拆分为 func1、func2），再在调用处修改命名，从而达到通过参数区分调用的效果。而 JavaScript 在运行时可以随时修改类型，如果依然采用传统重载的编译规则，可能会导致不可预期的问题。
ts 与 js 可交互性受影响，如果像传统重载那样，将函数拆分，在 js 脚本里调用 ts 中的重载方法将会有问题。

所以比起传统的重载，ts 的重载更像一个类型注释。

三、为什么要有 any

设想一个场景，一个函数需要接受一个数组，数组内数据可以是任意类型，到这如果想用泛型是没法完美解决的，所以还得引入any，而unkown是后来引入来代替 any 的。但在一般的强类型语言通常不具备那么多灵活性，比如数组只允许一种类型，那就可以通过泛型来解决。

TypeScript：老手也容易迷惑的地方

JSON.parse 的类型声明也是 any，因为当初还没有 unkown，不然应该返回 unkown 更合理。

四、图灵完备的类型系统

TypeScript 为了不减弱 JavaScript 的灵活性，同时又能提供足够的类型约束，就带来了图灵完备的类型系统。

下面用类型来实现一个自动声明 N 个长度的数字元组，过程需要用到递归

type ToArr<N, Arr extends number[] = []>
    = Arr['length'] extends N // 判断数组长度是否达到
                ? Arr // 长度够则直接返回
                : ToArr<N, [...Arr, number]>; // 长度不够则递归

type Arr1 = ToArr<3>; // [number, number, number]

更进一步，甚至可以基于上面的 ToArr 再实现加法：

type Add<A extends number, B extends number> = [...ToArr<A>, ...ToArr<B>]['length'];
type Res = Add<3, 4>; // 7

甚至有人用 ts 的类型系统实现了象棋规则。

五、readonly 和 as const

readonly 和 as const 都能将类型声明为仅可读，而 as const 还能将类型转换成常量。下面再看看两者的一些细节。

interface Foo {
    readonly a: {
        b: number,
    },
}

const f: Foo = {
    a: { b: 1 },
};

f.a = { b: 2 }; // Error: 无法分配到 "a" ，因为它是只读属性

f.a.b = 2; // 这里则没问题

上面可以看出，readonly 只对当前对象有效，对其属性无效。但 readonly 对数组却能做到完全不可修改。

const arr: readonly number[] = [2];
arr.push(1); // Error: 类型“readonly number[]”上不存在属性“push”

as const 将数组转化成元组，把一个可变长度的数组声明变成一个固定长度的数组：

const args = [8, 5]; // number[]
const func = (x: number, y: number) => {};
const angle = func(...args); // 这里会提示错误，因为ts不确定args是否有两个数

const args = [8, 5] as const; // 加上as const，将args转换成[number, number]即可
args.push(2) // Error: 类型“readonly [8, 5]”上不存在属性“push”

六、类型约束重置

在回调函数中已收窄的类型约束将被重置，因为该回调可能会在异步代码后调用，里面通过闭包访问的变量有被更改的风险，所以约束重置是合理的。

具体看下面例子：

type MyType = {
    prop?: number | string,
};
function func(arg: MyType) {
    if (typeof arg.prop === 'string') {
        const a = arg.prop; // string

        [].forEach(() => {
                        // 如果这里是异步回调，下面重写变量将会导致这里的arg改变，所以约束重置是合理的
            const b = arg.prop; // string | number | undefined
            console.log(b);
        });

                (() => {
                        // 立即执行函数则不会重置类型约束
            const d = arg.prop;  // string
            console.log(d);
        })();

                // 重写变量
                arg = {};
    }
}

这也是为了应对 js 的灵活性而需要的严谨。

七、协变和逆变

协变：子类型兼容父类型，即 Array<Father>.push(Son)，这是可以成立的，因为 Son 是 Father的子类型，继承了所有 Father 的属性，所以对其兼容；
逆变：父类型兼容子类型，与上面相反，具体看下面例子；

declare let animalFn: (x: Animal) => void;
function walkdog(fn: (x: Dog) => void) {}
walkdog(animalFn); // OK

这里 animalFn 的参数声明需要的是 Dog，但实际传入的是 Animal，上面的本质就是 (x: Dog) => void = (x: Animal) => void ，所以参数是将 Animal 赋值给了 Dog，所以是 Animal 对 Dog 兼容，即逆变，如果将这个场景反过来，反而会出错。所以函数的参数是逆变，返回值是协变。

但 ts 的函数类型其实是双向协变的，但这并不安全，具体看下面例子：

declare let animalFn: (x: Animal) => void
declare let dogFn: (x: Dog) => void
animalFn = dogFn // OK，但这不安全
dogFn = animalFn  // OK

// 虽然在 ts 里像上面那样双向赋值（双向协变）是可以通过的，但这是不安全的

const animalSpeak = (fn: AnimalFn) => {
    fn(animal); 
};
animalSpeak((x: Dog) => {
    x.汪汪() // 这里运行会报错，因为传入的 Animal，不具备 dog.汪汪 方法
});

上面 animalSpeak 的调用，实际是将 Animal 作为参数赋值给了 Dog，这不满足函数参数逆变的原则，但在 ts 中却是可以通过编译的。

为什么 ts 允许函数双向协变：因为 ts 是结构化语言，如果 Array(Dog) 可以赋值给 Array(Animal)，那么就意味着 Array(Dog).push 可以赋值给 Array(Animal).push ，从而导致设计上就允许了双向协变，这是 ts 设计者为了维持结构化类型兼容的一种取舍。但毕竟双向协变是不安全的，所以在 2.6 版本后，开启严格模式，函数参数协变将会报错。关于双向协变具体可以看下面的例子：

interface Animal { eat: '' }
interface Dog extends Animal { wang: '' }

let animalArr: Animal[] = [];
let dogArr: Dog[] = [];
 
animalArr = dogArr; // OK

// Array<Animal>.push(Animal): number = Array<Dog>.push(Dog): number（参数协变）
animalArr.push = dogArr.push; // OK

八、除了类型约束，TypeScript 还带来了更完整的面向对象

因为前端一部分的复杂度被 MVVM 框架消解了，并且过往 js 模拟的面向对象多少有点问题，所以我常常忽略了面向对象的价值，然而 ts 带来了更加完整、安全的封装、继承和多态。所以以后写 ts 的时候，多提醒自己编码可以多往这方面思考。

参考：https://exploringjs.com/tackl...https://www.zhihu.com/questio...https://jkchao.github.io/type...https://zhuanlan.zhihu.com/p/...