【TypeScript】为什么选择 TypeScript

女爷i 2022-05-27 04:48 254阅读 0赞

转载自：[从 JavaScript 到 TypeScript 1 - 什么是 TypeScript][JavaScript _ TypeScript 1 - _ TypeScript]

### 为什么选择 TypeScript ###

几个月前，团队里觉得很多项目跑的越来越臃肿，团队协作遇到了一个很大的难题：如何让一个别人提供的方法产出一个一目了然的文档？因为一个项目总会涉及到多人协作：同学 A 编写了函数 a()，而 同学 B 在调用函数 a() 的时候得一直撸着 API 文档才能知道 a() 需要什么参数，会返回什么参数。

而 同学 A 后续又改动了函数 a()，但是却忘记了更新文档，这时候新接手项目的 同学 C 看着 API 文档和函数 a() 一脸懵逼，问题浮出水面：团队协作中，提供的接口如何描述自身？

这其中涉及到的问题有：

1.  接口如何描述自己的参数和返回值？
2.  接口参数和返回值在无数需求迭代中改变了多次，而这个API对应的文档该如何更新？
3.  数据格式如何描述？

我们意识到 JavaScript 在逐渐复杂的 Web 应用中缺少一个很重要的东西：静态类型。

因为需要有静态类型我们才可以知道这个函数需要的参数是什么，有什么类型，返回值是什么类型，哪些字段是可能空，哪些字段又需要什么样的格式。

首先想到的是业界融合于 JavaScript 的方案：Flow

后来对比之后发现：

1.  生态圈，TypeScript 的生态圈明显在 Flow 之上，各大主流类库都提供了 TypeScript 的类型声明文件，配合 visual studio code 编码体验上比 Flow 强太多。
2.  Flow 是侵入 JavaScript 的，对 JavaScript 做了一层增强；而 TypeScript 则为 JavaScript 超集，在 JavaScript 之上进行的语言抽象，最终编译成 JavaScript。

其中第二点很重要，因为团队成员对添加了 Flow 的 JavaScript 语法想当排斥，而我个人同样觉得 Flow 侵入 JavaScript 太过强烈，不如 TypeScript 直接做语言超集好，虽然二者出发点上没有太大区别，但从设计思想上来说 TypeScript 更吸引人。

TypeScript 的定位是做静态类型语言，而 Flow 的定位是类型检查器。

毕竟写着 Flow 的时候心里想的是我在写 JavaScript，而写 TypeScript 心里想的是我在写 TypeScript

### 什么是 TypeScript ###

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

TypeScript 早期的目标是为了让习惯编写强类型语言的后端程序员，能够快速的编写出前端应用（微软大法好），因为 JavaScript 没有强数据类型，所以 TypeScript 提供了静态数据类型，这是 TypeScript 的核心。

随着项目工程越来越大，越来越多的前端意识到静态数据类型的重要性，随着 TypeScript 的逐渐完善，支持者越来越多，静态数据类型的需求越来越强。于此同时， angular 2.x 这个领头羊率先使用 AtScript 开辟了静态数据类型战场。

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

简单来说：动态代码一时爽，重构全家火葬场。

#### 静态类型 ####

TypeScript 凭借 Microsoft 深厚的语言设计功底，设计的十分优雅和简单易用，学习成本非常低。

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

let num: number

从上面的代码中，我们可以知道变量 num 是 number 类型的，如果我们给 num 赋其他类型的值，则会报错：  
![这里写图片描述][70]  
是不是很简单？是的，这就是 TypeScript 的核心。

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

const 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 data
        }).catch(err => {
            return err
        })
    }

这是 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 包含了很多信息：

1.  `url` 可能是 `string` 或 `object` 类型
2.  `params` 是可以不传的，也可以传递任何类型
3.  `user` 要求是 `User` 类型的，当然也是可以不传
4.  返回了一个 `Promise`，`Promise` 的求值结果可能是 `object`，也有可能是 `Error`

看到上面的信息后，我们大概知道可以这么调用并处理 `fetch` 的返回结果：

let result = await fetch('https://tasaid.com', { id: 1 })
    
    // fetch 可能会返回 Error
    if (result instanceof Error) {
        // 错误处理
    }

是不是很有意思？鹅妹子嘤！TypeScript 在说话，TypeScript 在让代码描述自身。  
![这里写图片描述][70 1]  
这就是静态数据类型的意义。静态类型在越复杂的应用中，需求越强烈。

这是 `react` 对于数据类型的约束：

import PropTypes from 'prop-types'
    
    component.propTypes = { optionalArray: PropTypes.array, optionalBool: PropTypes.bool, optionalFunc: PropTypes.func, requiredFunc: PropTypes.func.isRequired, }

这是 `vue` 对于数据类型的约束：

Vue.component('component', {
        props: {
            optionalArray: Array,
            optionalBool: Boolean,
            optionalFunc: Function,
            requiredFunc: {
                type: Function,
                required: true
            }
      }
    })

而引入了 TypeScript 之后，就会感受到真正流畅的数据类型约束：

class Component { 
        optionalArray?: Array<string> // string 类型的 数组
        optionalBool?: boolean // 写上 ? 号，就表示着这个属性可能为空
        optionalFunc?: (foo: string, bar: number) => boolean // 函数的参数，返回值都一目了然
        requiredFunc: () => void 
    }

[JavaScript _ TypeScript 1 - _ TypeScript]: https://tasaid.com/Blog/20171011231943.html
[70]: /images/20220527/ae9eee6f47794ba681d041d29a3abfe8.png
[70 1]: /images/20220527/8259f71d714f4c1aa35858e3e784f657.png