什么是 TypeScript

什么是 TypeScript

JavaScript 行至今日，灵活，动态让它活跃在编程语言界一线。而灵活，动态使得它又十分神秘，只有运行才能得到答案。类型的补充填充了 JavaScript 的缺点，从 TypeScript 编译到 JavaScript，多了静态类型检查，而又保留了 JavaScript 的灵活动态。

随着应用的庞大，项目中 JavaScript 的代码也会越来越臃肿，这时候许多 JavaScript 的语言弊端就会愈发明显，而 TypeScript 的出现，就是着力于解决 JavaScript 语言天生的弱势：静态类型。

什么是 TypeScript

TypeScript 简称 TS。TypeScript 是JavaScript的超集，就是在 JavaScript 上做了一层封装，封装出TypeScript 的特性，当然最终代码可以编译为JavaScript。

静态类型

简单了解一下静态数据类型和简单的类型推导，TypeScript 是以 *.ts 作为文件后缀的，我们创建一个 demo.ts 文件，写下这段代码：

let num: number

从上面的代码中，我们可以知道变量 num 是 number 类型的，如果我们给 num 赋其他类型的值，则会报错。

我们再来看看一个函数该如何表达：

let fetch = function (url: string): Promise { }

fetch() 函数接收一个 string 类型的参数 url，返回一个 Promise。

以下是一个 JavaScript 的函数，不看方法内的写法我们完全不知道这个 API 会有哪些坑。

export const fetch = function (url, params, user) {
  // dosomething

  return http(options).then(data => {
    return new Returns(null, data)
  }).catch(err => {
    return new Returns(err, null)
  })
}

这是 TypeScript 的写法：

export const fetch = function (url: string | object, params?: any, user?: User): Promise<object | Error> {
  // dosomething

  return http(options).then(data => {
    return data
  }).catch(err => {
    return err
  })
}

这个 TypeScript 包含了很多信息：

url 可能是 string 或 object 类型 params 是可以不传的，也可以传递任何类型 user 要求是 User 类型的，当然也是可以不传返回了一个 Promise，Promise 的求值结果可能是 object，也有可能是 Error 看到上面的信息后，我们大概知道可以这么调用并处理 fetch 的返回结果：

let result = await fetch('https://tasaid.com', { id: 1 })

// fetch 可能会返回 Error
if (result instanceof Error) {
  // 错误处理
}

这就是静态数据类型的意义。静态类型在越复杂的应用中，需求越强烈。

和 ECMAScript 相比

TypeScript 是 JavaScript 的超集，目标也是对齐 ECMAScript 的标准规范和提案对齐，最终 TypeScript 也是编译为 JavaScript。

同时，和 JavaScript 规范标准 ECMAScript 提案相比，TypeScript 也一直在跟进 ECMAScript 的许多新特性。

例如当前来说比较深受大家喜爱的新特性：

import() 动态表达式 decorators 装饰器 async/await 异步而这些都可以编译到 ECMAScript 3（少数细节存在兼容性问题）。

tips

使用 visual studio code 编辑器会体验到 TypeScript 强大的类型推导，毕竟两个都是微软亲儿子

一些 JavaScript 编写的大型的第三方库，都提供了 TypeScript 的类型声明文件（.d.ts 文件）, 一般都放在包目录的 types 文件夹中。或者在 @didi/ 仓库名下可以找到

babel 是将高级版本的 JavaScript 编译为目标版本的 JavaScript，TypeScript 是将 TypeScript 编译为目标版本的 JavaScript。它们的编译是重叠的，也就是说 TypeScript 可以不再依赖 babel 编译。

平凡之路。

目录

什么是 TypeScript

静态类型

和 ECMAScript 相比

tips