这篇文章在“母校网”上发行，想知道更多的IT干货内容。正在程序员圈子里听到热门消息。欢迎关注！

作者|慕课网络精英讲师Lison

我来教你如何自学这篇文章，TypeScript。TypeScript更新后，您可以毫无压力地迎接新功能。好了，我们开始吧。

1.2.1学会阅读文件

英语官方文件总是及时更新。但是，即使是正式文件，部分更新也写在更新日志中，新手指南不会及时同步更新，所以偶尔看到指南会感到困惑。也就是说，文件中写着与实际验证不同的效果。如果出现问题，请首先确认使用的TypeScript版本，然后在更新日志中根据不同的版本找到这部分知识的更新记录。如果找到了，看看这是哪个版本的升级。如果你不放心，可以将TypeScript版本降低到此版本之前的版本，然后再次确认。

TypeScript有中文文档，但该文档只是对英文文档的翻译。官方文件的小遗漏，这个文件也没有验证，更新也有些滞后。写这篇文章的时候，TypeScript的最新发行版是3.4，但中文文档仍然是3.1。所以想知道TypeScript的最新动态，还是需要看英语官方文件？但是我们还是要感谢提供中文文件的翻译人员。这对英语不好的开发者的帮助仍然很大。

1.2.2学会看错误

创建项目时，需要使用TSLint规范验证代码样式，根据TSLint配置的不同，提示效果也有所不同。如果您编写的代码不符合规范，使用error级别显示提示，则与TypeScript编译一样，问题代码下方会显示红色波浪线，鼠标上方会显示错误提示。如果我们使用TSLint，当报告错误时，首先要查看TSLint是报告错误，还是TS报告错误，如何区分。

以上的此错误可在红色框中查看，标识tslint，表示这是TSLint中的错误。后面括号中标记的是报告此错误的规则的名称，规则可以在文件中配置。TSLint的使用将在“构建开发环境”部分进行说明。在本例中，此错误是由于无法在no-console规则(即请求代码)中使用console语句而发生的。但是，开发时通常使用控制台调试，因此可以配置TSLint关闭此规则。这样就不会报告错误。但是我们要遵守规范。当我们决定引入TSLint时，说明这个项目对代码质量的要求更高。我们写代码时如果出现TSLint错误，就不应该修改规则。相反，应该根据规则修改代码。

上面的这个错误可以在红色框中看到，它标识ts，表示这是TypeScript编译器报告的错误。在编写代码时，强大的类型系统使编译器能够在这个阶段检测到我们的错误。后面括号中的2322是错误代码，所有错误代码都可以在文档的错误消息列表中查看。但是，通常不需要查看文档。因为此处显示与此错误代码相对应的错误提示，此错误消息可以根据编辑器语言显示中文错误消息。显然，这个错误是因为name指定了字符串类型，指定了123数字类型。

以上两种类型是编写代码时出现的错误提示。另一个是与JavaScript一样，在运行时报告错误。必须在浏览器控制台中确认此错误。调试Node服务器端项目时，必须在终端中确认。请看这个例子。

如果打印代码中未定义的变量，则在编写代码时会出现提示，程序运行时，浏览器控制台也会报告错误。如果打开浏览器的开发人员工具(Windows系统为F12，Mac系统为Console option I)，控制台列中将显示错误消息。

红色语句即错误信息。下面红色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 文件。这些文件，就是我们在开发时如果需要用到相关内容，需要在 文件里配置引入的库的声明文件，这个配置我们后面会讲到。先简单举个例子，比如我们要使用 DOM 操作相关的语法，比如我们获取了一个 button 按钮的节点，那么我们就可以指定它的类型为 HTMLButtonElement，那么我们再访问这个节点的属性的时候，编辑器就会给你列出 button 节点拥有的所有属性方法了；如果我们要用到这个类型接口，那我们就需要引入 lib.dom.d.ts 也就是dom这个 lib。这里如果你对一些提到的概念不明白，你可以先忽略，因为后面都会讲到。这里我要告诉你的就是，你应该学着看这些声明文件，看看它们对于一些内容的声明是如何定义的，能够帮你见识到各种语法的运用。

1.2.4 学会搜问题和提问

实际开发中，有时候你难免会遇到一些文档里没有提到的各种各样的奇怪问题。解决问题的途径有很多，请教有经验的人是最简单的啦，但前提是你身边有个随叫随到的大神，可这样的人一般很少有，所以还是看看我推荐给你的解决问题的途径吧：

途径1：百度 or Google

一般来说大众的问题都能在百度找到，但是开发问题 Google 能够帮你找到一些高质量的国外答疑帖，所以这两个搜索引擎你都可以试试，这个途径是你遇到问题之后的首选。

途径2：看issue

TypeScript 的问答确实要比很多框架或者基础知识的少很多。如果搜索引擎找不到，你可以到 github 上 TypeScript 的官方仓库，在issues里可以通过问题关键字搜索，看看有没有人反馈过这个问题。这里要注意，搜索的是关键字，而不是把你的报错信息完整输进去，这样基本很难搜到。你应该挑选出错误信息中比较具有代表性的单词进行搜索，因为这和搜索引擎不一样，issues 提供的搜索还不是很强大。

途径3：去提问

如果上面两个途径都没找到，你只能自行提问了，这也是一个造福后人的方法。比较受欢迎的提问网站：国内你可以试试 segmentFault，国外可以试试stackOverflow，还有就是 TypeScript的issues 了。但要注意如果在 stackOverflow 和 issues 中提问，最好最好用英文。

1.2.5 看优秀项目源码

这个学习方法是比较高阶的了，看一些优秀的开源项目源码可以为你提供思路。你还可以借鉴到同一个逻辑不同人的实现方式。源码去哪里找呢，当然首选是 Github 了，进入 Github 后，你可以在顶部的搜索栏搜索你想要找的项目关键字，比如你想找个Todo应用的项目源码，那就搜"todo"。然后在语言栏选择 TypeScript，这样就会筛选出使用 TypeScript 编写的项目：

最后选择 star 较多的项目，说明这个项目受到了更多人的认可：

好了，以上就是自学 TypeScript 的一些方法途径。

欢迎关注「慕课网」，发现更多IT圈优质内容，分享干货知识，帮助你成为更好的程序员！