背景

任何新技术的出现都是为了解决原有技术的某个痛点。

JS缺点

  • 由于各种历史因素，JavaScript语言本身存在很多的缺点

    • 比如ESS以及之前的使用的var关键字关于作用域的问题
    • 比如最初JavaScript设计的数组类型并不是连续的内存空间
    • 比如直到今天JavaScript也没有加入类型检测这一机制

      类型带来的问题

      错误出现越早越好

  • 编程开发中有一个共识：错误出现的越早越好

    • 能在写代码的时候发现错误，就不要在代码编译时再发现（IDE的优势就是在代码编写过程中帮助我们发现错误）。
    • 能在代码编译期间发现错误，就不要在代码运行期间再发现（类型检测就可以很好的帮助我们做到这一点)。
    • 能在开发阶段发现错误，就不要在测试期间发现错误，能在测试期间发现错误，就不要在上线后发现错误。

      有的问题编译后才发现

  • 如何在代码编译期间发现代码的错误

    • JavaScript可以做到吗？不可以
      1. function getLength(str){
      2. return str.length
      3. }
      4. getLength('hello') // 正确调用 返回5
      5. getLength() // 错误调用 但编辑器不会报错 运行时才会报错

  • 这是一个常见的错误

    • 这个错误很大的原因就是因为JavaScript没有对我们传入的参数进行任何的限制，只能等到运行期间才发现这个错误
    • 并且当这个错误产生时，会影响后续代码的继续执行，也就是整个项目都因为一个小小的错误而陷入崩溃
  • 当我们写像我们上面这样的简单的demo时，这样的错误很容易避免，并且当出现错误时，也很容易检查出来
  • 但是当我们开发一个大型项目时呢？你能保证自己一定不会出现这样的问题吗﹖而且如果我们是调用别人的类库，又如何知道让我们传入的到底是什么样的参数呢﹖

  • 如果我们可以给JavaScript加上很多限制，在开发中就可以很好的避免这样的问题了

    • 比如我们的getLength函数中str是一个必传的类型，没有调用者没有传编译期间就会报错
    • 比如我们要求它的必须是一个String类型，传入其他类型就直接报错
    • 那么就可以知道很多的错误问题在编译期间就被发现，而不是等到运行时再去发现和修改

      类型思维的缺失

  • 体会到没有类型检查带来的一些问题，JavaScript因为从设计之初就没有考虑类型的约束问题，所以造成了前端开发人员关于类型思维的缺失

    • 前端开发人员通常不关心变量或者参数是什么类型的，如果在必须确定类型时，我们往往需要使用各种判断验证
    • 从其他方向转到前端的人员，也会因为没有类型约束，而总是担心自己的代码不安全，不够健壮

  • 所以我们经常会说JavaScript不适合开发大型项目，因为当项目一旦庞大起来，这种宽松的类型约束会带来非常多的安全隐患，多人员开发它们之间也没有良好的类型契约。

    • 比如当我们去实现一个核心类库时，如果没有类型约束，那么需要对别人传入的参数进行各种验证来保证我们代码的健壮性
    • 比如我们去调用别人的函数，对方没有对函数进行任何的注释，我们只能去看里面的逻辑来理解这个函数需要传入什么参数，返回值是什么类型

      描述

  • TypeScript是 JavaScript的一个超集，TypeScript 可以运行于任何系统，并且是开源免费的。

  • 并且TypeScript最终会被编译成JavaScript代码，所以并不需要担心它的兼容性问题，在编译时也不需要借助于Babel这样的工具。用户运行也是运行JS，只是在编写代码阶段，就可以进行类型验证，有问题时，IDE就会立刻报错，不会流到编译
  • TypeScript语法遵循 ES 规范，更细速度快，不断支持最新的 ECMAScript 新特性，如装饰器、public/private修饰符
  • TypeScript支持 OOP（面向对象）的接口，抽象类，多态特性
  • TypeScript可以为 IDE 提供更好的代码补全、接口提示、跳转到定义
  • 并且在语言层面上，不仅仅增加了类型约束，而且包括一些语法的扩展，比如枚举类型(Enum )、元组类型(Tuple)等
  • 所以，我们可以把TypeScript理解成更加强大的JavaScript，不仅让JavaScrip更加安全，而且给它带来了诸多好用的好用特性
  • 还有重要一点是众多科技公司已经采用 TypeScript进行开发，也是前端工程师需要掌握的就业技能
    • 比如Vue3源码也采用了TypeScript进行重写
    • 包括在React中已经使用的ant-design的UI库，也大量使用TypeScript来编写
    • 目前公司非常流行Vue3+TypeScript、React+TypeScript的开发模式
    • 包括小程序开发，也是支持TypeScript的

介绍 - 图1