这是我参与 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的模式混用。
不过想要在团队内大规模使用,还是需要其他成员的配合,毕竟使用一门新技术是有一定的门槛的。