TypeScript超详细入门教程（上）

Posted 2021-06-29 十九万里

TypeScript超详细入门教程（上）

 

01 开篇词：Hello~TypeScript

01 开篇词：Hello~TypeScript

更新时间：2019-10-30 13:49:46

 

既然我已经踏上这条道路，那么，任何东西都不应妨碍我沿着这条路走下去。——康德

 

同学你好，我是Lison。很高兴你对TypeScript感兴趣，或许你对TypeScript了解还不多，或许还有很多疑问，比如：

• 学 TypeScript 是不是就不需要学 javascript 了？

• Vue 用 TypeScript 改写发布 3.0 后是不是不用 TypeScript 不行？

• TypeScript 靠谱吗？

 

诸如此类疑惑，导致你一直对它犹豫不决，那么本节我将代替 TypeScript 向你做一个自我介绍。

同学你好，我是 TypeScript，如果你觉得我是 JavaScript 的孪生兄弟，或者觉得我是前端圈新扶持起来的太子，那你可能对我是有点误解了。其实我并不是一个新的语言，用大家公认的说法，我是JavaScript的超集，你可以理解为，我是加了一身装备铭文的进化版 JavaScript。JavaScript 有的，我都有，而且做得更好。JavaScript 没有的，我也有，而且我是在很长一段时间内不会被 JavaScript 赶上的。

虽然我作为超集，但是我始终紧跟 ECMAScript 标准，所以 ES6/7/8/9 等新语法标准我都是支持的，而且我还在语言层面上，对一些语法进行拓展。比如新增了枚举(Enum)这种在一些语言中常见的数据类型，对类(Class)实现了一些ES6标准中没有确定的语法标准等等。

如果你是一个追赶技术潮流的开发者，那你应该已经将 ES6/7/8/9 语法用于开发中了。但是要想让具有新特性的代码顺利运行在非现代浏览器，需要借助Babel这种编译工具，将代码转为ES3/5版本。而我，可以完全不用 Babel，就能将你的代码编译为指定版本标准的代码。这一点，我可以说和 JavaScript 打了个平手。

另外我的优势，想必你也略有耳闻了那就是我强大的类型系统。这也是为什么造世主给我起名TypeScript。如果你是一名前端开发者，或者使用过 JavaScript 进行开发，那么你应该知道，JavaScript 是在运行的时候，才能发现一些错误的，比如：

• 访问了一个对象没有的属性；

• 调用一个函数却少传了参数；

• 函数的返回值是个字符串你却把它当数值用了；

• …

这些问题在我这里都不算事。我强大的类型系统可以在你编写代码的时候，就检测出你的这些小粗心。先来简单看下我工作的样子：

interface 定义的叫接口，它定义的是对结构的描述。下面的 info 使用 ES6 的新关键字 const 定义，通过 info: Info 指定 info 要实现 Info 这个结构，那 info 必须要包含 name 和 age 这两个字段。实际代码中却只有 name 字段，所以你可以看到 info 下面被红色波浪线标记了，说明它有问题。当你把鼠标放在 info 上时，VSCode 编辑器会做出如下提示：

如果上面这个小例子中你有很多概念都不了解，没关系，Lison 在后面的章节都会讲到。

配合VSCode这类编辑器，你可以借助编辑器的提示愉快地使用 TypeScript。另外值得一提的是，深受前端开发者喜爱的 VSCode 也是使用 TypeScript 开发的哦。

很多后端开发者，在做了很久的后端开发，习惯了 C++、Java 这些语言后，可能对我会有很多误解。就拿一个函数重载来说吧，在别的这些语言里，你可以定义多个同名函数，然后不同点在于参数个数、参数类型和函数体等，你可以给同一个函数传入不同参数，编译器就会知道你要调用的是哪个函数体；而我，也是有函数重载的概念的，只不过，我的重载是为了帮助编译器知道，你给同一个函数传入不同参数，返回值是什么情况；在 JavaScript 中，我们如果有一个函数，要根据传入参数不同，执行不同的逻辑，是需要自己在函数体内自行判断的。比如下面这个JavaScript 书写的例子：

   

     

      

     
     

      

       const getResult = 
       input => {
      
     

     

      

     
     

      
    
       if (typeof 
       input === 
       'string') 
       return 
       input.length
      
     

     

      

     
     

      
    
       else 
       if (typeof 
       input === 
       'number') 
       return 
       input.toString()
      
     

     

      

     
     

      
    
       else 
       return 
       input
      
     

     

      

     
     

      

       }
      
     

     

      

     
     

      
 
      
     
   

这个例子很简单。如果输入的值是字符串类型，返回这个字符串的长度；如果是数值类型，返回这个数值变成字符串的结果；如果都不是，原样返回。可以看到，输入不同类型的值，返回的结果类型是不一样的。所以如果你要使用这个函数的返回值，就可能一不小心用错，比如输入123，应该返回字符串 ‘123’。如果你在结果上调用 toFixed 方法，如 getResult(123).toFixed()，运行后就会报错，因为字符串是没有这个方法的。如果你使用我来书写，结果就不同了，我会在你写代码的时候就告诉你。来看怎么使用我来书写上面的例子：

   

     

      

     
     

      

       function getResult (input: string): number
      
     

     

      

     
     

      

       function getResult (input: number): 
       string
      
     

     

      

     
     

      

       function getResult <T>(input: T): T
      
     

     

      

     
     

      

       function getResult (input: any): any {
      
     

     

      

     
     

      
  
       if (typeof 
       input === 
       'string') 
       return 
       input.length
      
     

     

      

     
     

      
  
       else 
       if (typeof 
       input === 
       'number') 
       return 
       input.toString()
      
     

     

      

     
     

      
  
       else 
       return 
       input
      
     

     

      

     
     

      

       }
      
     

     

      

     
     

      
 
      
     
   

前三行组成了函数重载，第四行开始是实际函数体，之后你再调用 getResult 来看下效果：
这里输入123结果应该是字符串’123’，结果访问 toFixed 方法，字符串是没有这个方法的。

这里输入字符串’abc’，返回应该是他的长度数值3，结果访问它的length属性，数值是没有length属性的。

这里你传入一个对象，既不是字符串也不是数值，所以原样返回这个对象，编译器就知道你的res是对象 { a: ‘a’, b: ‘b’ } 啦。所以当你输入res然后输入 . 后，VSCode 就会给你列出有哪些属性可以访问。

是不是和你理解的函数重载有点不一样？所以一定要注意哦，不要用学习其他语言的思维来认识我哦，否则你会钻牛角尖的。上面例子的语法你可以不用在意，因为 Lison 都会详详细细地给你讲哒。

对了，另外还有一个我的好搭档，TSLint，也是追求极致的你不可或缺的。它和 ESLint 相似，都是能够对你的代码起到约束和提示作用，特别是团队协作的项目中，使用它可以让你们多个开发者都能够遵循相同的代码规范——大到各种语法，小到标点空格。搭配使用 VSCode 和 TSLint，再加上我强大的类型系统，写代码简直不要太嗨~

好了，向你介绍得差不多了，相信你对我已经有了一个大致的了解。下面让 Lison 向你客观地介绍下，我的发展趋势以及你为什么要与我为伴。

相信你在听完 TypeScript 的自我介绍之后，它的亮点你已经了解一二了。或许你还有些顾虑，毕竟学习 TypeScript 是需要时间的，你可能会担心 TypeScript 像 CoffeeScript 一样，随着 ES标准 的不断更新，渐渐退出大家的视线。下面让我们来看下 TypeScript 的发展趋势，来打消你的顾虑，同时让你对它有进一步的了解。

我们都知道 TypeScript 最主要的亮点是它的类型系统，这使得在编写代码的时候就能够检测到一些错误。而 JavaScript 是一门动态脚本语言，它不需要编译成二进制代码运行。Node 服务端代码也不需编译即可在服务器起一个服务，你甚至可以直接在服务器修改你的服务代码然后重启就可以，不需要编译等操作。这一切特点使得 JavaScript 的所有调试都需要在运行时才能进行，在编写代码的时候很多问题是无法提前知晓的，而且就JavaScript目前的使用场景来看，它在至少很长一段时间内会保持这样的特点。

而 TypeScript 和 JavaScript 不同的就是，它可以在你编写代码的时候，就对一些错误进行提示，还能在你使用某个数据的时候，为你列出这个数据可以访问的属性和方法。在 TypeScript 的自我介绍中我们已经看过几个简单的例子，想必你也知道它实现这些的效果了。当我们的项目较为庞大，需要由多人合作开发时，多人协作是需要沟通成本和 review 成本的。一些接口的定义，一些方法的使用，都可能因为个人习惯或沟通不畅导致逻辑实现的差异。而如果引入TypeScript，则会对一些实现进行强校验。如果不按接口实现，编译就没法通过，如果对代码质量要求较高，可以将严格检查全部打开，效果更好。

那么哪些项目适合用 TypeScript 开发呢，我总结了几类：

• 需要多人合作开发的项目

• 开源项目，尤其是工具函数或组件库

• 对代码质量有很高要求的项目

来看几个广为人知的使用 TypeScript 开发的经典项目：

• VSCode：开源的高质量代码编辑器VSCode使用TypeScript开发，所以它天生就支持 TypeScript；

• Angular & React & Vue3.0：现在三足鼎立的三个前端框架，Angular 和 React 已经使用 TypeScript编写，而在我编写专栏的同时，Vue3.0 将使用 TypeScript 进行重构，届时三个前端框架都使用TypeScript编写，如果使用TypeScript开发将会得到很好的类型支持。也可以看出，TypeScript 已经被广为接受。当然了，你依然可以使用JavaScript来开发前端项目，但是相信随着 Vue3.0 发布，TypeScript将会被越来越多的开发者所接受；

• Ant Design：使用 React 开发项目的开发者大多应该都知道蚂蚁金服开源UI组件库Ant Design，同样使用TypeScript进行编写。保证了代码质量的同时，也能很好地支持开发者使用TypeScript进行React项目的开发。如果你使用 Vue 进行开发，Ant Design 也提供了Vue 版的组件库，风格和功能和 React 版的保持一致，共享单元测试和设计资源，对TypeScript的支持也一样很好。

TypeScript 在实现新特性的同时，时刻保持对ES标准的对齐。一些ECMAScript标准没有确定的内容，在 TypeScript 中已经率先支持了。所以在语法标准方面，可以说TypeScript是略微领先的，比如类的私有属性和方法。ES6标准对类的相关概念的定义中，并没有私有属性的概念，如果想实现私有属性，需要使用一些方法hack（可以参考阮一峰的《ECMAScript 6 入门》- 私有方法和私有属性）；但是TypeScript是支持私有属性的，可以直接使用 private 指定一个私有属性。虽然ECMAScript新的提案提供了定义私有属性的方式，就是使用 # 来指定一个属性是私有的，但是到目前为止现在还没有编译器支持这种语法。

以上便是对 TypeScript 的大致介绍，接下来我们来看下本小册有哪些内容。

本小册共7大章节，7个章节的内容主要为：

1. 入门准备：讲解学习 TypeScript 和使用 TypeScript 进行开发的一些方法和技巧，是授你以鱼之前的授你以渔，虽然后面章节会学习 TypeScript 的所有语法，但是掌握自学TypeScript的方法技巧，可以帮助你更好更快地学习 TypeScript，也方便你遇到问题时能够快速找到解决方案。

2. 基础部分：这一章都是一些较为基础的知识，只要你有JavaScript的基础就能上手，学习起来不会有太大压力；学习完本章后，你就可以自己使用 TypeScript 写一些基本的日常开发中使用的逻辑了。

3. 进阶部分：这一章你要做好心理准备了。作为进阶知识，不仅内容多一些，而且有些知识较为抽象，不好理解，需要你紧跟着 Lison 多练习多思考。这一章的知识有一些在平常的业务开发中很少用到，但是你也不可以掉以轻心，以免以后需要用到了，都不知道还有这高级内容。

4. 知识整合：这一章是对前面学习的基础和进阶部分的知识的整合。学习这一章，需要前面章节的知识作为铺点，所以一定要把前面章节的知识掌握好哦。

5. 项目配置及书写声明文件：这一章会详细讲解项目的配置项，也就是对 tsconfig.json 里的配置逐条讲解它的作用。之所以放到后面讲，是因为我们前面学习不需要用到这么多配置，但是学习所有配置，可以帮助你在开发自己项目时满足自己的开发需求。书写声明文件需要用到前面的语法知识，学会书写声明文件，我们就可以在使用了一些冷门的没有声明文件的JS库时，自行为它们书写声明文件，以便我们开发使用。

6. 项目实战：这一章是实战部分，通过使用 TypeScript+Vue 开发一个简单后台。我会带着你从零创建一个项目，并实现目录中列出的功能，帮助你将学到的知识在实际开发中进行运用。即是对前面知识的复习，也是对理论知识到实践的转化，做完这个项目，相信你会对TypeScript项目开发有一个新的认识，再去独立开发项目，会轻松很多。

7. 写在最后：这一章是一个总结。相信学到这一章的时候，你已经对 TypeScript 有了整体认知了。我将会在本章分享一些我的开发经验，帮助你在项目开发中少走弯路。

好了，在听完 TypeScript 的自我介绍和发展趋势的了解之后，让我们一起愉快地进入TypeScript 的学习中去吧。

 

 

02 TypeScript应该怎么学

02 TypeScript应该怎么学

更新时间：2019-11-26 09:50:53

 

理想必须要人们去实现它，它不但需要决心和勇敢而且需要知识。——吴玉章

 

如果你看过了本专栏的大纲，那你应该会有一种，哇，官方文档里列出的知识基本都讲了，这个专栏太细了的感觉。这一个小节我会教给大家如何去自学TypeScript。虽然你在学习本专栏的时候，Lison会手把手的带着你学习TypeScript的语法和实战。但我还是想给你讲讲如何自学TypeScript，在授你以鱼之前也会授你以渔的，这样TypeScript即使更新了，你也能毫无压力地迎接它的新特性。好，接下来让我们开始吧。

 

1.2.1 学会看文档

英文官方文档始终是及时更新的。但即便是官方的文档，有一些更新在更新日志里写了，而新手指南里却没有及时同步更新，所以有时看指南也会遇到困惑，就是文档里写的和你实际验证的效果不一样。遇到这种问题，首先确定你使用的TypeScript版本，然后去更新日志里根据不同版本找对这部分知识的更新记录。如果找到了，看下这是在哪个版本做的升级；如果你不放心，可以把TypeScript版本降到这个版本之前的一个版本，再验证一下。

TypeScript 是有一个中文文档的，但是这个文档只是对英文文档的翻译。官方文档中的小疏漏，这个文档也没有做校验，而且更新是有点滞后的。在写本专栏的时候，TypeScript最新发布的版本为3.4，但是中文文档还是在3.1。所以想了解TypeScript的最新动态，还是要看英文官方文档的。不过我们还是要感谢提供中文文档的译者，这对于英文不是很好的开发者帮助还是很大的。

1.2.2 学会看报错

我们在前面的例子中展示了 TypeScript 在编写代码的时候如何对错误进行提示。后面我们讲到项目搭建的时候，会使用 TSLint 对代码风格进行规范校验，根据 TSLint 配置不同，提示效果也不同。如果我们配置当书写的代码不符合规范，使用 error 级别来提示时，会和 TypeScript 编译报错一样，在问题代码下面用红色波浪线标出，鼠标放上去会有错误提示。所有如果我们使用了TSLint，遇到报错的时候，首先要区分是 TSLint 报错还是 TS 报错，来看下如何区分：
上面这个报错可以从红色方框中看到，标识了 tslint，说明它是TSLint的报错。后面括号里标的是导致这条报错的规则名，规则可以在 tslint.json 文件里配置。关于 TSLint的使用，我们会在搭建开发环境一节讲解。示例中这条报错是因为 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：看issue

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

途径3：去提问

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

1.2.5 看优秀项目源码

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

最后选择 star 较多的项目，说明这个项目受到了更多人的认可：
好了，以上就是自学 TypeScript 的一些方法途径。当然了，我们的 TypeScript 知识还是会由我带着大家一起学习哒，所以只要跟紧了别掉队，不怕你学不会。

 

03 VSCode揭秘和搭建开发环境

03 VSCode揭秘和搭建开发环境

更新时间：2019-11-26 09:50:59

 

宝剑锋从磨砺出，梅花香自苦寒来。——佚名

 

这节课我们要做的就是在砍柴之前先磨刀，学习如何借助VSCode愉快高效地开发TypeScript项目，我们来一步一步让VSCode对TypeScript的支持更强大。如果你已经习惯了使用别的编辑器，那你也可以自行搜索下，本节课提到的内容在你使用的编辑器是否有对应的替代品。

 

1.3.1 安装和基本配置

如果你还没有使用过VSCode，当然先要去官网下载了，下载安装我就不多说了，安装好之后，我们先来配置几个基本的插件。

（1）汉化

如果你英语不是很好，配置中文版界面是很有必要的，安装个插件就可以了。打开VSCode之后在编辑器左侧找到这个拓展按钮，点击，然后在搜索框内搜索关键字"Chinese"，这里图中第一个插件就是。直接点击install安装，安装完成后重启VSCode即可。

（2）编辑器配置

有一些编辑器相关配置，需要在项目根目录下创建一个.vscode文件夹，然后在这个文件夹创建一个settings.json文件，编辑器的配置都放在这里，并且你还需要安装一个插件EditorConfig for VS Code这样配置才会生效。配置文件里我们来看几个简单而且使用的配置：

   

     

      

     
     

      

       {
      
     

     

      

     
     

      
    
       "tslint.configFile": 
       "./tslint.json",
      
     

     

      

     
     

      
    
       "tslint.autoFixOnSave": 
       true,
      
     

     

      

     
     

      
    
       "editor.formatOnSave": 
       true
      
     

     

      

     
     

      

       }
      
     

     

      

     
     

      
 
      
     
   

tslint.configFile用来指定tslint.json文件的路径，注意这里是相对根目录的；

tslint.autoFixOnSave设置为true则每次保存的时候编辑器会自动根据我们的tslint配置对不符合规范的代码进行自动修改；

tslint.formatOnSave设为true则编辑器会对格式在保存的时候进行整理。

（3）TypeScript相关插件

TSLint(deprecated)是一个通过tslint.json配置在你写TypeScript代码时，对你的代码风格进行检查和提示的插件。关于TSLint的配置，我们会在后面讲解如何配置，它的错误提示效果在我们之前的例子已经展示过了。

TSLint Vue加强了对Vue中的TypeScript语法语句进行检查的能力。如果你使用TypeScript开发Vue项目，而且要使用TSLint对代码质量进行把控，那你应该需要这个插件。

（4）框架相关

如果你使用Vue进行项目开发，那Vue相关的插件也是需要的，比如Vue 2 Snippets。

Vetur插件是Vue的开发辅助工具，安装它之后会得到代码高亮、输入辅助等功能。

（5）提升开发体验

Auto Close Tag插件会自动帮你补充HTML闭合标签，比如你输完<button>的后面的尖括号后，插件会自动帮你补充</button>；

Auto Rename Tag插件会在你修改HTML标签名的时候，自动帮你把它对应的闭标签同时修改掉；

Bracket Pair Colorizer插件会将你的括号一对一对地用颜色进行区分，这样你就不会被多层嵌套的括号搞晕了，来看看它的样子：

Guides插件能够帮你在代码缩进的地方用竖线展示出索引对应的位置，而且点击代码，它还会将统一代码块范围的代码用统一颜色竖线标出，如图：

1.3.2 常用功能

（1）终端

在VSCode中有终端窗口，点击菜单栏的【查看】-【终端】，也可以使用快捷键 ”control+`“ 打开。这样可以直接在编辑器运行启动命令，启动项目，边写代码边看报错。

（2）用户代码片段

一些经常用到的重复的代码片段，可以使用用户代码片段配置，这样每次要输入这段代码就不用一行一行敲了，直接输入几个标示性字符即可。在VSCode左下角有个设置按钮，点击之后选择【用户代码片段】，在弹出的下拉列表中可以选择【新建全局代码片段文件】，这样创建的代码片段是任何项目都可用的；可以选择【新建"项目名"文件夹的代码片段文件】，这样创建的代码片段只在当前项目可用。创建代码片段文件后它是一个类似于json的文件，文件有这样一个示例：

   

     

      

     
     

      

       {
      
     

     

      

     
     

      
    
       // Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
      
     

     

      

     
     

      
    
       // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
      
     

     

      

     
     

      
    
       // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
      
     

     

      

     
     

      
    
       // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
      
     

     

      

     
     

      
    
       // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
      
     

     

      

     
     

      
    
       // Placeholders with the same ids are connected.
      
     

     

      

     
     

      
    
       // Example:
      
     

     

      

     
     

      
    
       // "Print to console": {
      
     

     

      

     
     

      
    
       // 	"scope": "javascript,typescript",
      
     

     

      

     
     

      
    
       // 	"prefix": "log",
      
     

     

      

     
     

      
    
       // 	"body": [
      
     

     

      

     
     

      
    
       // 		"console.log('$1');",
      
     

     

      

     
     

      
    
       // 		"$2"
      
     

     

      

     
     

      
    
       // 	],
      
     

     

      

     
     

      
    
       // 	"description": "Log output to console"
      
     

     

      

     
     

      
    
       // }
      
     

     

      

     
     

      

       }
      
     

     

      

     
     

      
 
      
     
   

我们来看一下其中的几个关键参数：

• Print to console是要显示的提示文字

• scope是代码片段作用的语言类型

• prefix是你输入这个名字之后，就会出现这个代码片段的选项回车即可选中插入

• body就是你的代码片段实体

• $1是输入这个片段后光标放置的位置，这个$1不是内容，而是一个占位

• description是描述。如果你要输入的就是字符串lt;$

好了，暂时VSCode的相关介绍就是这么多，剩下的一些配置tslint等工作，我们会在搭建开发环境和后面的开发中讲到。

1.3.3 搭建开发环境

接下来我们开始从零搭建一个开发环境，也就是一个基础前端项目。后面课程中讲到的语法知识，你都可以在这个项目中去尝试，接下来我们就一步一步来搭建我们的开发环境啦。

在开始之前，你要确定你的电脑有node的环境，如果你没有安装过node，先去Node.js下载地址下载对应你系统的node.js安装包，下载下来进行安装。我在专栏中使用的是v10.15.3版本，你可以尝试最新稳定版本。如果发现启动项目遇到问题，可能是一些安装的依赖不兼容新版本，那你可以安装和我一样的版本。

node安装好之后，可以在命令行运行node -v来查看node的版本号。如果正确打印出版本号说明安装成功。npm是node自带的包管理工具，会在安装node的时候自动进行安装，可以使用npm -v来查看npm的版本，检验是否安装成功。我们会使用npm来安装我们所需要的模块和依赖，如果你想全局安装一个tslint模块，可以这样进行安装：

   

     

      

     
     

      

       npm 
       install -g tslint
      
     

     

      

     
     

      
 
      
     
   

如果这个模块要作为项目依赖安装，去掉-g参数即可。更多关于node的知识，你可以参考node官方文档或node中文文档，更多关于npm的使用方法，可以参考npm官方文档或npm中文文档。

（1）初始化项目

新建一个文件夹“client-side”，作为项目根目录，进入这个文件夹：

   

     

      

     
     

      

       mkdir 
       client-side
      
     

     

      

     
     

      

       cd 
       client-side
      
     

     

      

     
     

      
 
      
     
   

我们先使用 npm 初始化这个项目：

   

     

      

     
     

      

       # 使用npm默认package.json配置
      
     

     

      

     
     

      

       npm 
       init 
       -y
      
     

     

      

     
     

      

       # 或者使用交互式自行配置，遇到选项如果直接敲回车即使用括号内的值
      
     

     

      

     
     

      

       npm 
       init
      
     

     

      

     
     

      

       package name: 
       (client-side) 
       # 可敲回车即使用client-side这个名字，也可输入其他项目名
      
     

     

      

     
     

      

       version: 
       (1.0.0) 
       # 版本号，默认1.0.0
      
     

     

      

     
     

      

       description: 
       # 项目描述，默认为空
      
     

     

      

     
     

      

       entry point: 
       (index.js) 
       # 入口文件，我们这里改为./src/index.ts
      
     

     

      

     
     

      

       test command: 
       # 测试指令，默认为空
      
     

     

      

     
     

      

       git repository: 
       # git仓库地址，默认为空
      
     

     

      

     
     

      

       keywords: 
       # 项目关键词，多个关键词用逗号隔开，我们这里写typescript,client,lison
      
     

     

      

     
     

      

       author: 
       # 项目作者，这里写lison<[e-mail]>
      
     

     

      

     
     

      

       license: 
       (ISC) 
       # 项目使用的协议，默认是ISC，我这里使用MIT协议
      
     

     

      

     
     

      

       # 最后会列出所有配置的项以及值，如果没问题，敲回车即可。
      
     

     

      

     
     

      
 
      
     
   

这时我们看到了在根目录下已经创建了一个 package.json 文件，接下来我们创建几个文件夹：

• src：用来存放项目的开发资源，在 src 下创建如下文件夹：

  • utils：和业务相关的可复用方法

  • tools：和业务无关的纯工具函数

  • assets：图片字体等静态资源

  • api：可复用的接口请求方法

  • config：配置文件

• typings：模块声明文件

• build：webpack 构建配置

接下来我们在全局安装typescript，全局安装后，你就可以在任意文件夹使用tsc命令：

   

     

      

     
     

      

       npm 
       install typescript -g
      
     

     

      

     
     

      
 
      
     
   

如果全局安装失败，多数都是权限问题，要以管理员权限运行。

安装成功后我们进入项目根目录，使用typescript进行初始化：

   

     

      

     
     

      

       tsc 
       --init
      
     

     

      

     
     

      
 
      
     
   

注意：运行的指令是tsc，不是typescript。

这时你会发现在项目根目录多了一个 tsconfig.json 文件，里面有很多内容。而且你可能会奇怪，json 文件里怎么可以使用//和/**/注释，这个是 TS 在 1.8 版本支持的，我们后面课程讲重要更新的时候会讲到。

tsconfig.json 里默认有 4 项没有注释的配置，有一个需要提前讲下，就是"lib"这个配置项，他是一个数组，他用来配置需要引入的声明库文件，我们后面会用到ES6语法，和DOM相关内容，所以我们需要引入两个声明库文件，需要在这个数组中添加"es6"和"dom"，也就是修改数组为[“dom”, “es6”]，其他暂时不用修改，接着往下进行。

然后我们还需要在项目里安装一下typescript，因为我们要搭配使用webpack进行编译和本地开发，不是使用tsc指令，所以要在项目安装一下：

npm install typescript
   

（2）配置TSLint

接下来我们接入TSLint，如果你对代码的风格统一有要求，就需要用到TSLint了，另外TSLint会给你在很多地方起到提示作用，所以还是建议加入的。接下来我们来接入它。

首先需要在全局安装TSLint，记着要用管理员身份运行：

npm install tslint -g
   

然后在我们的项目根目录下，使用TSLint初始化我们的配置文件：

tslint -i
   

运行结束之后，你会发现项目根目录下多了一个tslint.json文件，这个就是TSLint的配置文件了，它会根据这个文件对我们的代码进行检查，生成的tslint.json文件有下面几个字段：

   

     

      

     
     

      

       {
      
     

     

      

     
     

      
  
       "defaultSeverity": 
       "error",
      
     

     

      

     
     

      
  
       "extends": [
      
     

     

      

     
     

      
    
       "tslint:recommended"
      
     

     

      

     
     

      

         ],
      
     

     

      

     
     

      
  
       "jsRules": {},
      
     

     

      

     
     

      
  
       "rules": {},
      
     

     

      

     
     

      
  
       "rulesDirectory": []
      
     

     

      

     
     

      

       }
      
     
   

• defaultSeverity是提醒级别，如果为error则会报错，如果为warning则会警告，如果设为off则关闭，那TSLint就关闭了；

• 以上是关于TypeScript超详细入门教程（上）的主要内容，如果未能解决你的问题，请参考以下文章

  超详细的TypeScript入门教程！

  TypeScript 超详细入门讲解

  TypeScript 超详细入门讲解

  TypeScript 超详细入门讲解

  TypeScript超详细讲解

  TypeScript超详细讲解