景风

Appearance

TypeScript 简介 ​

以下将TypeScript简称为TS, JavaScript简称为JS

  1. TS是由微软公司开发, 基于JS的一个扩展语言
  2. TS包含了JS的所有内容, 即: TS是JS的超集
  3. TS增加了: 静态类型检查, 接口, 泛型等很多现代开发特性, 因此更适合大型项目开发
  4. TS需要编译为JS, 然后交给浏览器或者其他JS运行环境执行

为何使用 TS ​

今非昔比的 JS ​

  • JS 诞生时的定位是浏览器脚本语言, 用于在网页中嵌入一些简单的逻辑, 而且代码量很少
  • 随着时间的推移, JS 变得越来越流行, 如今的 JS 已经可以进行全栈编程了
  • 现如今的 JS 应用场景比以前丰富得多, 代码量也比当年大很多, 随便一个 JS 项目的代码量, 可以轻松达到几万行甚至更多
  • 然而 JS 当年出生简陋, 没考虑到如今的应用场景和代码量, 逐渐就出现很多困扰

JS 中的困扰 ​

以下JS代码放到TS文件中会之间爆红提示报错

  • 不清不楚的数据类型
js
let welcome = 'hello'
welcome() // 报错: TypeError: welcome is not a function
  • 有漏洞的逻辑
js
const str = Date.now() % 2 ? '奇数' : '偶数'

if (str !== '奇数') {
  alert('Halo')
} else if (str === '偶数') { // 此条件永远不会成立
  alert('World')
}
  • 访问不存在的属性
js
const obj = { width: 10, height: 15 }
const area = obj.width * obj.weight // 不存在的属性
  • 低级的拼写检查
js
const msg = 'Halo World'
msg.toUperCase() // 没有拼写检查

静态类型检查 ​

  • 在代码运行前进行检查, 发现代码的错误或者不合理之处, 减少运行时异常出血的几率, 这种检查称为静态类型检查, TS的核心就是静态类型检查, 简而言之就是将运行时的错误前置
  • 同样的功能, TS的代码量要大于JS, 但由于TS的代码结构更加清晰, 在后期代码的维护中TS远胜于JS