深入理解Typescript系列-类型系统

345 阅读2分钟

这是我参与 8 月更文挑战的第 12 天,活动详情查看: 8月更文挑战

前言

TypeScript是什么?按官方的解释是:JavaScript的超集,可以编译为纯JavaScript。我们都知道JavaScript是一门动态类型的语言,在处理一些复杂场景下难免会有考虑不周的情况,TypeScript就能很好的帮助我们完成这件事情,通过TypeScript强大的类型系统、断言系统等完成语法校验、错误校验等。

我们为什么要用TypeScript?

我们来看一段代码:

function double(num) {
    return num * 2;
}
double(1) // 2
double(2) // 4
double(3) // 6

但是,当我们的输入值因为上游分支的一些错误,导致输入的值不再是number类型的时候呢?可能你说这,这简单,改下代码

function double(num) {
    if (typeof num !== 'number') {
        return 'error'
    }
    return num * 2;
}
double(1) // 2
double(2) // 4
double(3) // 6

这么改的确可行,但是马上又会有一个新问题:有了两种类型的返回!!

那么每次调用方都要做判断吗?这显然是不合理的。代码就会变成这样:

function double(num) {
    if (typeof num !== 'number') {
        return 'error'
    }
    return num * 2;
}
const x = double(a)
if (x === 'error') {
    // TODO
} else {
    // TODO
}

这么写也太累的吧,我们来看下TypeScript怎么解决这个问题的:

function double(num: number) {
    return num * 2;
}
const x = double(a)

根据TypeScript的类型系统,如果传入double的的参数a不是number类型,直接会在编译阶段报错,代码都跑不起来,也就没有后续运行时错误了。

这种前置的检查模式,可以大大减轻开发者的心智负担。代码中的一些不严谨的地方、API的数据结构调整,都是可以通过类型系统直接完成推导校验。

基础类型

TypeScript不仅具备JavaScript的所有基础类型,还有一些额外的补充,支持的类型如下:boolean,number,string,[],Tuple,enum,any,void,null,undefined,never,Object。

let isDone: boolean = false;

let decLiteral: number = 6;

let name: string = "bob";

let list: number[] = [1, 2, 3];

let x: [string, number];

enum Color {Red, Green, Blue}

let notSure: any = 4;

function warnUser(): void {
    console.log("This is my warning message");
}

let u: undefined = undefined;
let n: null = null;

// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
    throw new Error(message);
}

declare function create(o: object | null): void;

小结

今天主要介绍了TypeScript的类型系统,借助类型系统,可以帮我们快速定位问题、发现问题。对于项目的侵略性也不强,可以JS+TS的模式混用。

不过想要在团队内大规模使用,还是需要其他成员的配合,毕竟使用一门新技术是有一定的门槛的。