Typescript第一章：TS的诞生，由来与介绍

技术直男星辰
2,168 阅读8分钟

我想写一个专栏，以专门介绍Typescript为主。随着时间的推移，现在越来越多的前端小伙伴多少会用到TS了,一些基础的应用后期会随笔带过，主要介绍下TS的进阶用法，也计划着是在第三章之后开始，希望大家多多支持。

  1. 什么是TS，他为何会诞生。
  2. 为什么说TS是JS的超集,优势有哪些。
  3. TS的编译过程。
  4. TS概念的常见的面试题。

什么是TS，他为何会诞生。

说起TS不得不要说一下JS，JS最早定位是：网页中添加一些微不足道的小型的脚本语言。随着20多年的发展，现在JS的地位在前端里是不能撼动的在后端中JS也有着举足轻重的地位，但由于JS的最初设计，他没有表达不同代码之间关系的能力，使得JS开发无法成可为大规模管理的任务。程序员编写最常见的错误就是类型错误，如何解决这个问题你，这时有了TS。为了解决类型判断，TS添加了自己新的语法。TS的目标就是成为JS程序的静态类型检查器，确保我们的类型正确。

其实在TS提出前，也有很多对JS类型的约束和检查解决方案比如：

  1. ESlint TSLint，二者都是可以突出代码中可能出现的错误，只是没为检查过程添加新的语法。
  2. CoffeScript，2012年发布，目的是想改进JS的语言添加一些特性，随着时间推移它提出的语法和特性成为了另一种script语言，开发人员也慢慢的摒弃掉了。
  3. flow，它是FaceBook的JS类型检查工具，像TS一样，也添加了些语法便于检查类型，在编译时再清除。Vue2使用的类型检查器就是flow。

为什么说TS是JS的超集，优势有哪些。

超集可以理解为包含关系，[1,2] 1是[1,2]的子集，或者[1,2]是1的超集。

screenshot-20220516-181814.png

先聊聊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的超集。

优势

JavaScriptTypeScript
运行时类型静态类型
程序运行时进行类型类型检查编译期间进行类型检查
开发环境无法提供帮助开发环境提供丰富的信息
需要进行大量测试，才能保证代码的覆盖率大部分检查由语言自身完成
Class扩展较弱拥有很强的Class扩展
新语法特性需要高版本浏览器支持所有浏览器
无访问控制权限拥有完整的成员访问控制权限
无高级特性静态成员等特性

TS的编译过程

之间也写过有关V8是如何执行JS的，大家感兴趣链接放这 #浅谈V8脚本引擎的工作原理

v2-4f4017f944fb4ef89084df4bcdc79d3c_1440w.jpg

现在简单聊聊TS时如何执行的：

  1. 预处理器：预处理器是将要编译的源文件生成一个源文件列表，构成编译上下文。编译列表中包含：1.待编译文件。2，依赖文件。3.@type文件

  2. 语词法分析器：将得到的源文件列表解析生成AST和含有额外信息（文件名称等）的SourceFile对象。

  3. 联合器：它遍历并处理语词法分析器生成的AST，并将AST中的声明结合放到一个Symbol中，继续返回一个SourceFile对象。 一个Symbol对应一个命名实体。几个声明节点可能会是名字相同的实体，也就是说不同的Node会有相同的Symbol，并且每个Symbol保持跟踪它的声明节点，联合器会处理作用域，以确保每个Symbol都在正确的封闭作用域里创建。比如一个名称相同的Class和namespace就可以合并，并拥有相同的Synbol。

  4. 类型解析器与检查器 通过调用createProgramAPI创建Program,（Program包含All SourceFile 和 CompilerOptions）。再通过Program实例创建TypeChecker。 TypeChecker是TS的类型系统的核心，他负责计算出不同文件里的Symbol之间的关系，将Type赋给Symbol，并生成判断语句如：error。 处理内容：

  5. TypeChecker 根据Symbol中declarations属性合并不同的 SourceFile 里的 Symbol 到一个单独的视图，创建单一的Symbol表（囊括所有文件的全局Symbol视图 ）

  6. 类型检查

Symbol 合并到一张表后，TypeChecker就可以解决关于这个程序的任何问题了。

比如我们第一行声明了一个let a:string，这时生成一个Symbol，在遇见相同变量a = '技术直男星辰'时再生成一个Symbol,在Symbol的declarations属性记录的内容是一致的（对应变量的声明节点），通过它的合并来检查类型是否一直保持一致，declarations一般是一个包含一个对象的数组，其中违背这一原则的是interface，TS中的interface声明可以合并。这也是类型别名type和接口interface的区别之一。

  1. 生成器 通过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 包含计划中的 ECMAScript 2015 (ES6) 的大部分特性，例如箭头函数。
  • TS在调试阶段就可以发现问题，规避类型变化导致的未知错误。

2.使用TypeScript有什么好处？

  • TS添加了可选的静态类型和基于类的面向对象编程，拓展了JS的语法短板。
  • 静态类型的TS比动态类型的JS更易于阅读和结构化。
  • 由于通用的转译，它可以在客户端和服务端跨平台使用。

3.TypeScript和JavaScript的区别是什么？

  • TS是JS的超集，可以被编译成JS，用JS编写的合法代码，在TS中依然有效。
  • TS是纯面向对象的编程语言，包含类，接口，模块，泛型，枚举类型等概念

个人总结一下，问到TS概念相关的问题，主要围绕着这几点来回答：

  1. TS是JS的超集，支持JS最新特性，同时又拓展出自己语法的强类型语言。
  2. TS是面向对象的语言，JS是基于对象的，提供了完善的面向对象的语法。
  3. 支持静态类型检查和可选的静态类型。
  4. TS在调试过程就可以发现问题，而JS只有在运行时才能发现问题。

接下来我会分享些TS基础知识，基础类型，接口，类型别名，类型断言，请大家持续关注。

如果此文章对您有帮助或启发，那便是我的荣幸

avatar
文章
阅读
粉丝