TypeScript 简介与优势

àì夳堔傛蜴生んèń 2023-07-24 08:39 120阅读 0赞

# TypeScript 简介与优势 #

本节首先介绍了 TypeScript 与 JavaScript 的关系，梳理清楚 TypeScript、JavaScript、ECMAScript 这三个名词所代表的具体含义。另外通过三个方向的阐述说明了为什么要使用 TypeScript，以及现在学习 TypeScript 的必要性。

## 0. 写在前面 ##

TypeScript 不是一门全新的语言，TypeScript 是 JavaScript 的超集，它对 JavaScript 进行了一些规范和补充。学习本教程，请务必拥有 JavaScript 基础。**没有 JavaScript 基础的同学，请先学习相关 JavaScript 相关基础知识。**

## 1. TypeScript 与 JavaScript ##

### 1.1 TypeScript 简介 ###

> 官方定义：  
> TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.  
> Any browser. Any host. Any OS. Open source.

*  TypeScript 是 JavaScript 的超集，它可以编译成纯 JavaScript。
 *  TypeScript 基于 ECMAScript 标准进行拓展，支持 ECMAScript 未来提案中的特性，如装饰器、异步功能等。
 *  TypeScript 编译的 JavaScript 可以在任何浏览器运行，TypeScript 编译工具可以运行在任何操作系统上。
 *  TypeScript 起源于开发较大规模 JavaScript 应用程序的需求。由微软在2012年发布了首个公开版本。

从以上特性中可以看到，TypeScript 与 JavaScript 、ECMAScript 有着非常深入的联系。在详细介绍 TypeScript 之前，先来简单了解一下 ECMAScript 与 JavaScript的发展。

### 1.2 ECMAScript ###

`ECMA International`: 一个制定技术标准的组织。

`ECMA-262`：由 ECMA International 发布。它包含了脚本语言的标准。

`ECMAScript`: 由 ECMA International 以 ECMA-262 和 ECMA-402 规范的形式进行标准化的。

`JavaScript`: 通用脚本编程语言，它遵循了 ECMAScript 标准。 换句话说，JavaScript 是 ECMAScript 的方言。

通过阅读 ECMAScript 标准，你可以学会怎样实现一个脚本语言；而通过阅读 JavaScript 文档，你可以学会怎样使用脚本语言编程。

2019年6月，ECMA-262 第10版定义了 ECMAScript 2019 通用编程语言。

### 1.3 JavaScript版本 ###

> 说 JavaScript 的版本，实际上就是说它实现了 ECMAScript 标准的哪个版本

![图片描述][format_png]

## 2. 为什么要用 TypeScript ##

### 2.1 静态类型 ###

> 我已经熟练使用 JavaScript，为什么要用 TypeScript 呢？

回答这个问题前，先来看看下面这些 JavaScript 中的常见错误：

*  Uncaught TypeError: Cannot read property
 *  TypeError: ‘undefined’ is not an object
 *  TypeError: null is not an object
 *  TypeError: Object doesn’t support property
 *  TypeError: ‘undefined’ is not a function
 *  TypeError: Cannot read property ‘length’

仔细看下不难发现，这些错误大都是一些比较初级的类型错误。

JavaScript 只会在 `运行时` 才去做数据类型检查，而 TypeScript 作为静态类型语言，其数据类型是在 `编译期间` 确定的，编写代码的时候要明确变量的数据类型。使用 TypeScript 后，这些低级错误将不再发生。

### 2.2 三大框架支持 ###

我们学习一门新技术会关心它的生命力问题，如果这门技术在较短时间内就要被淘汰，那花费大量的时间学习也是不划算的。TypeScript 能够保持长久生命力的另一个原因，就是统治前端的三大框架对 TypeScript 的支持。

*  Angular 是 TypeScript 最早的支持者，Angular 官方推荐使用 TypeScript 来创建应用。
 *  React 虽然经常与 Flow 一起使用，但是对 TypeScript 的支持也很友好。
 *  Vue3.0 正式版即将发布，由 TypeScript 编写。

从国内的氛围来看，由前端三大框架引领的 TypeScript 热潮已经涌来，很多招聘要求上也都有了 TypeScript 的身影。

### 2.3 兼容 JavaScript 的灵活性 ###

TypeScript 虽然严谨，但没有丧失 JavaScript 的灵活性，TypeScript 非常包容：

*  TypeScript 通过 `tsconfig.json` 来配置对类型的检查严格程度。
 *  可以把 `.js` 文件直接重命名为 `.ts`。
 *  可以通过将类型定义为 `any` 来实现兼容任意类型。
 *  即使 TypeScript 编译错误，也可以生成 JavaScript 文件。

这里先简单介绍下 any 类型，后续会详细讲解。比如一个 string 类型，在赋值过程中类型是不允许改变的：

let brand: string = 'imooc'
    brand = 1  // Type '1' is not assignable to type 'string'.ts(2322)

如果是 `any` 类型，则允许被赋值为任意类型，这样就跟我们平时写 JavaScript 一样了：

let brand: any = 'imooc'
    brand = 1

基于上面这些特点，一个熟悉 JavaScript 的工程师，在查阅一些 TypeScript 语法后，即可快速上手 TypeScript，加油！

## 3. 小结 ##

本节主要介绍了：

*  TypeScript 与 JavaScript 的关系，知道了 TypeScript 是 JavaScript 的超集，可以支持 ECMAScript 的各种新特性。
 *  从三个方面论述了“为什么要用 TypeScript”，从中可以看出 TypeScript 已经是当前大前端技术栈中非常重要的一环了。

[format_png]: /images/20230528/d6dfd8d8f0324e9cb36c2271b1a815d8.png