1 今⾮昔⽐的 JS（了解）

  • JavaScript 当年诞⽣时的定位是浏览器脚本语⾔，⽤于在⽹⻚中嵌⼊简单的逻辑，且代码量很少。
  • 随着时间的推移，JavaScript 变得越来越流⾏，如今的 JavaScript 已经可以全栈编程了。
  • 现如今的 JavaScript 应⽤场景⽐当年丰富的多，代码量也⽐当年⼤很多，随便⼀个JavaScript 项⽬的代码量，可以轻松的达到⼏万⾏，甚⾄⼗⼏万⾏！
  • 然⽽ JavaScript 当年“出⽣简陋”，没考虑到如今的应⽤场景和代码量，逐渐就出现了很多困扰。

2 JS 中的困扰

2.1 不清楚的数据类型

//定义了一个字符串变量
let welcome = 'hello'

//演示：错把字符串变量当做了函数调用
welcome() // 此⾏报错：TypeError: welcome is not a function

2.2 有漏洞的逻辑

//如果  Date.now() % 2 有余数,则将 奇数 字符串给str, 否则 将 偶数 字符串给 str 。
const str = Date.now() % 2 ? '奇数' : '偶数'

//如果 str 的值 不等于 奇数，那么弹窗输出 hello。
//逻辑错误: 假设 str='奇数',不会进入下面的任何一个if函数体; 假设str='偶数',会进入 alert('我不是奇数') 函数体。 所以永远不会执行到 alert('永远不会执行该行') 函数体。
if (str !== '奇数') {
    alert('我不是奇数')
} else if (str === '偶数') {
    alert('永远不会执行该行') //逻辑错误表现在：该行永远不会被执行。
}

2.3 访问不存在的属性

const obj = { width: 10, height: 15 };
const area = obj.width * obj.heigth;  //如果将属性 height 错写为 heigth ，那么JS编辑中没有提示。

2.4 低级的拼写错误

const message = 'hello,world'
message.toUperCase() //如果此时将 .toUpperCase() 错写为 .toUperCase(), JS编辑时也没有提示。

3 静态类型检查

  • 在代码运⾏前(即：编辑状态时)进⾏检查，发现代码的错误或不合理之处，减⼩运⾏时出现异常的⼏率，此种检查叫『静态类型检查』，TypeScript 和核⼼就是『静态类型检查』，简⾔之就是把运⾏时的错误前置。

  • 同样的功能，TypeScript 的代码量要⼤于 JavaScript(∈缺点)，但由于 TypeScript 的代码结构更加清晰，在后期代码的维护中 TypeScript 却胜于 JavaScript(∈优点)。