竹笋

注册

 

发新话题 回复该主题

开启TypeScript之旅的简便方式 [复制链接]

1#

不可否认,TypeScript凭着智能感知、静态分析(又名“类型检查”)、以及内联文档等功能,已经在JavaScript社区中占据了一席之地。这些功能虽然并非TypeScript独有,但是能够在如下方面提高开发团队的生产力,并改进的代码质量:

通过实时的、自动完成的代码建议,实现更快的代码编写。

发现并提示代码中的拼写错误。

方便新的成员熟悉代码库。

方便不同编程能力的团队成员更好地协作。

可以防止破损的代码被自动部署。

方便更加便捷、安全地修改和维护旧的代码。

可用于项目的自动文档化。

下面,我将分不同的阶段,向您深入浅出地介绍如何开启TypeScript之旅。

阶段1:在JavaScript文件中启用TypeScript

作为一种最为普及的代码编辑器,VisualStudioCode被广泛地用来编写JavaScript。不过,VSCode也内置了TypeScript,能够提供上面提到的智能感知和自动建议等基本功能。例如,我们可以创建一个带有属性hello的对象world。当我们试着去访问该对象的属性时,VSCode会自动推荐hello。不仅如此,它还会告诉我们该属性是一个字符串(string)类型。

这是一个非常基本但挺实用的类型检查。而且,就算代码库中存在少许错误,这样的类型检查也能够识别出来。例如,如果我们不小心将数字传递给了需要字符串类型的函数,那么就会被及时发现。因此,为了启用针对JavaScript文件的全面类型检查,您只需将注释//

ts-check添加到待检查的JavaScript文件的顶部便可。

据此,针对前面的例子,如果我们尝试着用数字类型覆盖对象的hello属性,那么我们将会收到一条“Type‘number’isnotassignabletotype‘string”的警告。我们之前的函数之所以不会给出任何错误提示,是因为TypeScript并不知道输入只能是字符串类型。为此,我们可以使用JSDoc向JavaScript添加各种类型。

此处的JSDoc是一个通过使用注释,将上下文文档添加到源代码中的系统。它可以被用于自动生成文档站点。TypeScript支持解析JSDoc的各项注释。对于前面的示例函数,我们可以告诉TypeScript,yell函数的第一个参数是str(字符串)类型,及该函数是一个“字符串”。

现在,当我们向函数传递一个数字时,就会看到一个红色的波浪形警告,而在将鼠标悬停其上方时,会出现“Argumentoftype‘number’isnotassignabletoparameteroftype‘string’.”的具体警告内容。您可以通过jsdoc.app,学习如何使用JSDoc记录各项内容。

阶段2:在JavaScript项目中启用TypeScript

如果您处理的是大型JavaScript项目,那么逐一添加//

ts-check到每个文件中,显然过于繁琐。幸运的是,VSCode提供了一些方法,来自动化此类工作。其中的一种方法是将“CheckJS”配置设置为true。也就是说,我们在settings.json文件中设置为"javascript.implicitProjectConfig.checkJs":true。

如果您想在项目级别上为团队中彼此协作的每个人都启用此功能,则可以通过将tsconfig.json文件添加到项目的根目录来实现。有关tsconfig.json中各种配置选项的详细信息,请参阅--

分享 转发
TOP
发新话题 回复该主题