Javascript 项目中使用 typescript(上)

88 阅读2分钟

JS 项目中使用 Typescript

JS 文件中一般可以自身进行类型推导,如果不能完成推导可以使用 JSDoc 语法来显式定义类型。JSDoc 可以用在声明语句的前面用来表明声明变量的类型。JSDoc Reference 页面可以找到完整的 JSDoc 语法。

如果需要在类型错误的时候文件中显示错误提示,那么需要将语句 // @ts-check 放置在文件的首行。如果有许多 javascript 文件需要做类型校验,可以使用 jsconfig.json 配置文件,不对某些文件做类型校验可以使用 //@ts-nocheck。跳过特定的行的类型校验可以使用 //@ts-ignore

image.png

上面的例子中使用了 JSDoc 语法进行类型校验,其中注释 /** @type {number} */ 用于表明 x 是 number 类型的,再使用了 // @ts-check 对整个文件进行语法检查,当 number 类型的 x 被重新赋值为 false 就会出现错误提示。

class

在 js 文件中,编译器根据 class 里面的属性赋值来推断出变量的类型。默认是按照 constructor 函数里面的赋值来确定变量的类型,如果 constructor 函数中没有进行赋值或者被赋值为 null 或者 undefined,则取其他位置赋值的类型交集。在 constructor 函数中确定的类型假定一直存在,而在 method,getter,setter 中确定的类型是可选的。

对象字面量

在 ts 中,对象字面量初始化后就可以确定类型,不能再增加新的属性。在 javascript 文件中可以使用 JSDoc 来实现校验。

image.png

obj 的定义里面只有 a 属性,直接给 obj 增加 b 属性的话会出现报错提示。

小结

本文首先讲了怎么使用 JSDoc 语法增加类型注释,再结合 // @ts-check 等注释表明需要校验该 javascript 文件。接着再说明了 class 和对象字面量中的使用场景。

参考资料:www.typescriptlang.org/docs/handbo…