乐趣区

关于程序员:TypeScript应该怎么学

作者 | 慕课网精英讲师 Lison

如果自学 TypeScript,到底要如何学呢?1.2.1 学会看文档英文官网文档始终是及时更新的。但即使是官网的文档,有一些更新在更新日志里写了,而老手指南里却没有及时同步更新,所以有时看指南也会遇到困惑,就是文档里写的和你理论验证的成果不一样。遇到这种问题,首先确定你应用的 TypeScript 版本,而后去更新日志里依据不同版本找对这部分常识的更新记录。如果找到了,看下这是在哪个版本做的降级;如果你不释怀,能够把 TypeScript 版本降到这个版本之前的一个版本,再验证一下。TypeScript 是有一个中文文档的,然而这个文档只是对英文文档的翻译。官网文档中的小疏漏,这个文档也没有做校验,而且更新是有点滞后的。

所以想理解 TypeScript 的最新动静,还是要看英文官网文档的。1.2.2 学会看报错如果咱们配置当书写的代码不符合规范,应用 error 级别来提醒时,会和 TypeScript 编译报错一样,在问题代码上面用红色波浪线标出,鼠标放上去会有谬误提醒。所有如果咱们应用了 TSLint,遇到报错的时候,首先要辨别是 TSLint 报错还是 TS 报错,来看下如何辨别:

下面这个报错能够从红色方框中看到,标识了 tslint,阐明它是 TSLint 的报错。前面括号里标的是导致这条报错的规定名,规定能够在 tslint.json 文件里配置。示例中这条报错是因为 no-console 这个规定,也就是要求代码中不能有 console 语句,然而咱们在开发时应用 console 来进行调试是很常见的,所以你能够通过配置 TSLint 敞开这条规定,这样就不会报错了。但咱们应该恪守标准,当咱们决定引入 TSLint 的时候,就阐明这个我的项目对代码品质有更高的要求,咱们不应该在书写代码遇到 TSLint 报错就批改规定,而是应该依据规定去批改代码。

下面这个报错能够从红色方框中看到,标识了 ts,阐明它是 TypeScript 编译器报的谬误。在咱们书写代码的时候,通过强类型零碎,编译器能够在这个阶段就检测到咱们的一些谬误。前面括号里跟着的 2322 是错误代码,所有的错误代码你能够在文档的错误信息列表中查看。不过你个别并不需要去看文档,因为这里都会给你标出这个错误码对应的谬误提醒,而且这个错误信息依据你的编辑器语言能够提醒中文错误信息。很显著这个谬误是因为咱们给 name 指定了类型为 string 字符串 类型,而赋给它的值是 123 数值类型。下面两种是在编写代码的时候就会遇到的谬误提醒。还有一种就是和 JavaScript 一样的,在运行时的报错,这种谬误须要在浏览器控制台查看。如果你调试的是 node 服务端我的项目,那你要在终端查看。来看这个例子:当我在代码中打印一个没有定义的变量时,在书写代码的时候会做提醒,且当程序运行起来时,在浏览器控制台也能够看到报错。你能够关上浏览器的开发者工具 (Windows 零碎按 F12,Mac 零碎按 control+option+i),在 Console 栏看到谬误提醒:

红色语句即错误信息。上面红色 at 前面有个文件门路 main.ts,蓝色框中圈出的也是个文件门路,示意这个谬误呈现在哪个文件。这里是呈现在 main.ts 中,问号前面的 cd49:12 示意错误代码在 12 行,点击这个门路即可跳到一个该文件的浏览窗口:

在这里咱们就能间接看到咱们的错误代码被红色波浪线标记了,这样你批改起谬误来就很明确晓得是哪里出错了。1.2.3 学会看申明文件咱们晓得原来没有 TypeScript 的时候,有很多的 JS 插件和 JS 库,如果应用 TypeScript 进行开发再应用这些 JS 编写的插件和库,就得不到类型提醒等个性的反对了,所以 TypeScript 反对为 JS 库增加申明文件,以此来提供申明信息。咱们应用 TypeScript 编写的库和插件编译后也是 JS 文件,所以在编译的时候能够抉择生成申明文件,这样再公布,使用者就仍然能失去 TypeScript 个性反对。一些 JS 库的作者曾经应用 TypeScript 进行了重写,有些则是提供了申明文件,一些作者没有提供申明文件的,大部分库都有社区的人为他们补充了申明文件,如果应用了本身没有提供申明文件的库时,能够应用 npm install @types/{模块名} 来装置,或者使用咱们前面讲到的常识自行为他们补充。看这些库的申明文件可能帮你进步对 TypeScript 的理解水平。因为可能你在理论开发中所接触的场景不是很简单,使用到的 TypeScript 语法点也不是很全面,所以就会导致常常用的你很相熟,不常常用的缓缓就忘掉了,甚至有的从头至尾你都没有应用过。很多常识你只看理论知识,或者看简略的例子,是没法真正了解并粗浅记忆的,只有在理论场景中去应用一下,能力加深了解。所以咱们能够从这些库的申明文件动手,还有就是从 TypeScript 内置的 lib 申明文件动手。装置好 TypeScript 后,咱们能够在 node_modules 文件夹下找到 typescript 文件夹,外面有个 lib 文件夹,lib 文件夹根目录下有很多以 lib. 结尾的 .d.ts 文件。这些文件,就是咱们在开发时如果须要用到相干内容,须要在 tsconfig.json 文件里配置引入的库的申明文件,这个配置咱们前面会讲到。先简略举个例子,比方咱们要应用 DOM 操作相干的语法,比方咱们获取了一个 button 按钮的节点,那么咱们就能够指定它的类型为 HTMLButtonElement,那么咱们再拜访这个节点的属性的时候,编辑器就会给你列出 button 节点领有的所有属性办法了;如果咱们要用到这个类型接口,那咱们就须要引入 lib.dom.d.ts 也就是 dom 这个 lib。这里如果你对一些提到的概念不明确,你能够先疏忽,因为前面都会讲到。这里我要通知你的就是,你应该学着看这些申明文件,看看它们对于一些内容的申明是如何定义的,可能帮你见识到各种语法的使用。1.2.4 学会搜问题和发问理论开发中,有时候你难免会遇到一些文档里没有提到的各种各样的奇怪问题。解决问题的路径有很多,求教有教训的人是最简略的啦,但前提是你身边有个随叫随到的大神,可这样的人个别很少有,所以还是看看我举荐给你的解决问题的路径吧:路径 1:百度 or Google 一般来说公众的问题都能在百度找到,然而开发问题 Google 可能帮你找到一些高质量的国外答疑帖,所以这两个搜索引擎你都能够试试,这个路径是你遇到问题之后的首选。路径 2:看 issueTypeScript 的问答的确要比很多框架或者基础知识的少很多。如果搜索引擎找不到,你能够到 github 上 TypeScript 的官网仓库,在 issues 里能够通过问题关键字搜寻,看看有没有人反馈过这个问题。这里要留神,搜寻的是关键字,而不是把你的报错信息残缺输进去,这样根本很难搜到。你应该挑选出错误信息中比拟具备代表性的单词进行搜寻,因为这和搜索引擎不一样,issues 提供的搜寻还不是很弱小。路径 3:去发问如果下面两个路径都没找到,你只能自行发问了,这也是一个造福前人的办法。比拟受欢迎的发问网站:国内你能够试试 segmentFault,国外能够试试 stackOverflow,还有就是 TypeScript 的 issues 了。但要留神如果在 stackOverflow 和 issues 中发问,最好最好用英文。1.2.5 看优良我的项目源码这个学习办法是比拟高阶的了,看一些优良的开源我的项目源码能够为你提供思路。你还能够借鉴到同一个逻辑不同人的实现形式。源码去哪里找呢,当然首选是 Github 了,进入 Github 后,你能够在顶部的搜寻栏搜寻你想要找的我的项目关键字,比方你想找个 Todo 利用的我的项目源码,那就搜 ”todo”。而后在语言栏抉择 TypeScript,这样就会筛选出应用 TypeScript 编写的我的项目:

最初抉择 star 较多的我的项目,阐明这个我的项目受到了更多人的认可:

好了,以上就是自学 TypeScript 的一些办法路径。

退出移动版