当我们在VSCode编辑器中编写js代码时,会提供类型提示。VSCode会推断变量的类型,并在您输入内容时提供相应的API属性或方法补全。如下图所示,在js文件中,arr变量被判断为number[]类型,所以当我们键入arr.时,会提供一个数组可以访问的属性。JavaScriptLanguageService的能力来自JavaScriptLanguageService,由TypeScript团队开发和维护。类型推导和派生的智能提示是基于TypeScript的。TypeScript可以在不显式编写类型注释的情况下进行自动类型推导。JavaScript正是利用了这一点,在一定程度上能够获取类型。聪明,但不完全聪明。基于TS的智能推理无法识别运行时变量类型的变化。看下面的例子。与TypeScript相比,JavaScript是不可预测的,即类型是可以改变的。类型改变后,arr还是推导为原来的number[]。另外,我们还可以基于JSDoc做智能提示。只需在变量上方添加JSDoc格式的注释即可。格式大致是这样的:/**@label{typeannotation}*/在下图中,我们声明了一个rect变量的对象结构。如您所见,出现了类型声明中属性的智能感知。然后是函数参数的注释声明:需要注意的是,JavaScriptLanguageService只提供智能提示,并不进行真正的类型检查。所以假设你将一个变量声明标记为数值类型,如果将结果赋值给一个对象,则不会提示错误。如果你想做类型检查(编辑器级别),你可以使用@ts-check。@ts-check然后@ts-check使js文件被视为ts文件。在文件开头添加//@ts-check以启用它。看,现在我们不能用其他不兼容的类型初始化number[]。/Users/watermelon/Library/ApplicationSupport/typora-user-images/image-20230127235510088.png但这只是编辑器层面的提示,依然是js的正确写法,可以正常运行。然后rect变量也报错,因为它声明的时候只有x,缺少其他属性:在实际应用中,我个人基本都是写TS,但偶尔需要在项目外写一些简单的脚本或者写一些小demo。如果用TS就太重了,而且TS配置也很繁琐。这时候直接用js会更简单。虽然VSCode可以支持一些简单的类型推导,但它并不总是很聪明。例如,声明一个函数时,无法推导出传入参数的类型。这时候通过JSDoc声明类型可以提供很好的类型提示。通过智能提示减少错误输入属性名称的低级错误。另外,打包工具的配置文件一般都是js,换成ts会很麻烦。使用VSCode的智能推导是一个不错的选择。以下是汇总工具的配置文件。@ts-check和@type的组合非常有效。结局很好用,建议大家试试,很酸。
