我想写一个专栏，以专门介绍Typescript为主。随着时间的推移，现在越来越多的前端小伙伴多少会用到TS了,一些基础的应用后期会随笔带过，主要介绍下TS的进阶用法，也计划着是在第三章之后开始，希望大家多多支持。
- 什么是
TS，他为何会诞生。 - 为什么说
TS是JS的超集,优势有哪些。 TS的编译过程。TS概念的常见的面试题。
什么是
TS，他为何会诞生。
说起TS不得不要说一下JS，JS最早定位是：网页中添加一些微不足道的小型的脚本语言。随着20多年的发展，现在JS的地位在前端里是不能撼动的在后端中JS也有着举足轻重的地位，但由于JS的最初设计，他没有表达不同代码之间关系的能力，使得JS开发无法成可为大规模管理的任务。程序员编写最常见的错误就是类型错误，如何解决这个问题你，这时有了TS。为了解决类型判断，TS添加了自己新的语法。TS的目标就是成为JS程序的静态类型检查器，确保我们的类型正确。
其实在TS提出前，也有很多对JS类型的约束和检查解决方案比如：
ESlintTSLint，二者都是可以突出代码中可能出现的错误，只是没为检查过程添加新的语法。CoffeScript，2012年发布，目的是想改进JS的语言添加一些特性，随着时间推移它提出的语法和特性成为了另一种script语言，开发人员也慢慢的摒弃掉了。flow，它是FaceBook的JS类型检查工具，像TS一样，也添加了些语法便于检查类型，在编译时再清除。Vue2使用的类型检查器就是flow。
为什么说
TS是JS的超集，优势有哪些。
超集可以理解为包含关系，[1,2] 1是[1,2]的子集，或者[1,2]是1的超集。
先聊聊JS的历史，1995年，网景公司的navigator浏览器非常流行，他们想在静态的HTML页面中添加一些动态效果，找到了Brendan Eich,花了两个星期，写出了JavaScript，由于当时Java很火，想借助java的名气推广JavaScript，为了让JavaScript成为全球的标准，几个公司组织成立了ECMAScript（欧洲计算机制造商协会），自1997年6月发布第一版到2014年，17年发布了五个版本，第五个版本就是ES5，直到2015年，发布了第六个版本，也是我们最常提到的ES6，以后ES每年发布一个版本，命名规则也发生了变化，是按年份命名。
在2015年TS诞生了，它包含JS的所有语法，可运行JS且扩展了JS的语法，比如静态类型，类，模块，接口，类型注解，类型断言等等，更易于大型项目的开发，TS也持续提供JS的最新语法和特性。总结下来是：ECMAScript是JS的标准，TS是JS的超集。
优势
| JavaScript | TypeScript |
|---|---|
| 运行时类型 | 静态类型 |
| 程序运行时进行类型类型检查 | 编译期间进行类型检查 |
| 开发环境无法提供帮助 | 开发环境提供丰富的信息 |
| 需要进行大量测试，才能保证代码的覆盖率 | 大部分检查由语言自身完成 |
| Class扩展较弱 | 拥有很强的Class扩展 |
| 新语法特性需要高版本浏览器 | 支持所有浏览器 |
| 无访问控制权限 | 拥有完整的成员访问控制权限 |
| 无高级特性 | 静态成员等特性 |
TS的编译过程
之间也写过有关V8是如何执行JS的，大家感兴趣链接放这 #浅谈V8脚本引擎的工作原理
现在简单聊聊TS时如何执行的：
-
预处理器：预处理器是将要编译的源文件生成一个
源文件列表，构成编译上下文。编译列表中包含：1.待编译文件。2，依赖文件。3.@type文件 -
语词法分析器：将得到的
源文件列表解析生成AST和含有额外信息（文件名称等）的SourceFile对象。 -
联合器：它遍历并处理
语词法分析器生成的AST，并将AST中的声明结合放到一个Symbol中，继续返回一个SourceFile对象。 一个Symbol对应一个命名实体。几个声明节点可能会是名字相同的实体，也就是说不同的Node会有相同的Symbol，并且每个Symbol保持跟踪它的声明节点，联合器会处理作用域，以确保每个Symbol都在正确的封闭作用域里创建。比如一个名称相同的Class和namespace就可以合并，并拥有相同的Synbol。 -
类型解析器与检查器 通过调用
createProgramAPI创建Program,（Program包含All SourceFile和CompilerOptions）。再通过Program实例创建TypeChecker。TypeChecker是TS的类型系统的核心，他负责计算出不同文件里的Symbol之间的关系，将Type赋给Symbol，并生成判断语句如：error。 处理内容： -
TypeChecker根据Symbol中declarations属性合并不同的SourceFile里的Symbol到一个单独的视图，创建单一的Symbol表（囊括所有文件的全局Symbol视图 ） -
类型检查
Symbol 合并到一张表后，TypeChecker就可以解决关于这个程序的任何问题了。
比如我们第一行声明了一个let a:string，这时生成一个Symbol，在遇见相同变量a = '技术直男星辰'时再生成一个Symbol,在Symbol的declarations属性记录的内容是一致的（对应变量的声明节点），通过它的合并来检查类型是否一直保持一致，declarations一般是一个包含一个对象的数组，其中违背这一原则的是interface，TS中的interface声明可以合并。这也是类型别名type和接口interface的区别之一。
- 生成器
通过
Program创建一个Emitter，Emitter将给定的SourceFile生成编译后的文件（.js,.jsx...）
再简单描述下JS的执行过程，1.代码通过解析器：1）通过词法分析，生成最小可分割字符Token，2）语法分析，将Token生成AST，再经过解释器将AST翻译成字节码。3）优化编译器 忽略
整体看下来TS编译生成JS，跟JS编译执行逻辑相同，但TS通过添加Symbol来进行了类型检查，这是比JS多了一个类型检查环节，来规范JS的类型约束。
TS概念的常见的面试题
网上找的几个题：
1.TypeScript的主要特点是什么？
- 面向对象的语言：
TS提供提供所有标准的OOP功能，如类，接口 - 静态类型检查：
TypeScript使用静态类型并帮助在编译时进行类型检查。因此，你可以在编写代码时发现编译时错误，而无需运行脚本。 - 跨平台：
TypeScript编译器可以安装在任何操作系统上，包括Windows、macOS和Linux。 - ES6 特性：
TypeScript包含计划中的ECMAScript2015 (ES6) 的大部分特性，例如箭头函数。 - TS在调试阶段就可以发现问题，规避类型变化导致的未知错误。
2.使用TypeScript有什么好处？
TS添加了可选的静态类型和基于类的面向对象编程，拓展了JS的语法短板。- 静态类型的
TS比动态类型的JS更易于阅读和结构化。 - 由于通用的转译，它可以在客户端和服务端跨平台使用。
3.TypeScript和JavaScript的区别是什么？
TS是JS的超集，可以被编译成JS，用JS编写的合法代码，在TS中依然有效。TS是纯面向对象的编程语言，包含类，接口，模块，泛型，枚举类型等概念
个人总结一下，问到TS概念相关的问题，主要围绕着这几点来回答：
TS是JS的超集，支持JS最新特性，同时又拓展出自己语法的强类型语言。TS是面向对象的语言，JS是基于对象的，提供了完善的面向对象的语法。- 支持静态类型检查和可选的静态类型。
TS在调试过程就可以发现问题，而JS只有在运行时才能发现问题。
接下来我会分享些TS基础知识，基础类型，接口，类型别名，类型断言，请大家持续关注。
如果此文章对您有帮助或启发，那便是我的荣幸
