TypeScript介绍和使用

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第10天，点击查看活动详情 >>

什么是TypeScript

Typed JavaScript at Any Scale. 添加了类型系统的 JavaScript，适用于任何规模的项目。

TypeScript 即 Type + JavaScript。

简单说来 Js 有的 Ts 都有，所有 Js 代码都可以在 Ts 里面运行。

在项目推行TypeScript有什么好处

对于我们在团队中推行 TypeScript ，可能大家都有同样的疑问：

我们为什么要这么做？

或者说，我们这么做，有什么好处？

那么，可让我叉一会腰，我要告诉你，好处可海了去了~

因为推行 TypeScript 会在项目中取代 JavaScrip，那么我主要围绕两者之间的区别来介绍。

从语言类型检查的时机来看

我们所编写的代码在执行层面，按照类型检查的时机来分类，可以分为动态类型和静态类型

• 动态类型

动态类型是指在运行时才会进行类型检查，这种语言的类型错误往往会导致运行时错误。

• 静态类型

静态类型是指编译阶段就能确定每个变量的类型，这种语言的类型错误往往会导致语法错误。

let demo = 1;
demo.split(' ');
// Uncaught TypeError: demo.split is not a function

标准的 Js 代码是不会在编写的时候抛出异常并报错的，

所以这段代码在开发人员编写阶段，不会有任何提示和手段来告诉开发者，这段代码会引起整个网页的异常和中断，最终导致造成线上Bug。

JavaScript 是一门解释型语言，没有编译阶段，所以它是动态类型，代码在运行时才会发生报错。

TypeScript 则不同，

它在运行前需要先编译为 JavaScript，而在编译阶段就会进行类型检查，所以 TypeScript 是静态类型。

在编译阶段报错

let demo = 1;
demo.split(' ');
// Property 'split' does not exist on type 'number'.

同样的一段代码，如果是使用 Ts 来编写，

那么它在编译时会报错（数字没有 split 方法），无法通过编译，自然而然这段代码就无法通过检查提交到代码仓库并发布线上，最终避免造成线上Bug

我们为什么要推行Ts

从大型项目来看

显而易见的，对于 大型项目 来说，使用 TypeScript 的是非常适合的。

Ts 相比 Js 来说，有一个非常重要的特性，即类型系统。

类型系统可以为大型项目带来更高的可维护性以及更少的bug。

我们都知道，JavaScript是一门非常非常灵活的语言，

灵活到什么程度❓

举个栗子：

1、我们声明变量 a 并赋值，类型为数值，值为 123

2、紧接着我们又将一个对象 object 赋值给 a，此时变量 a 的类型为 对象

3、最后我们执行了运算符 + 号操作，将对象与数值相加，Js 通过隐式类型转换，将变量 a 的最终类型改变为 字符串

4、这一波花里胡哨的操作下来也并没有产生报错！！！

这一切都源于 Javascrip 灵活的特性：

• 无类型约束

他没有类型约束，一个变量可能初始化时是数值，过一会儿又被赋值为对象

• 隐式转换

由于隐式类型转换的存在，有的变量的类型很难再运行前就确定

• 基于原型

JavaScript 是基于原型的面向对象编程，原型上的属性或方法可以在运行时被修改

• 函数

JavaScript 中的函数同样也非常的灵活，可以复制给变量，也可以作为参数或者是返回值

老实说，JavaScript 的灵活性其实就是一把双刃剑，

初次接触编程工作，或者说是因为厌烦了强类型语言而突然转到这门语言的同学，会觉得非常的爽！！

一方面，如此灵活的特性使得 JavaScript 蓬勃发展，多年以来连续占据最普遍使用的言语排行榜榜首，生态也得到了爆发性完善。

另一方面，也使得它的 代码质量参差不齐，维护成本高，运行时错误多。

TypeScript 的类型系统，在很大程度上弥补了 JavaScript 的缺点。 类型系统可以为大型项目带来更高的 可维护性以及更少的Bug

TypeScript 在完整保留 JavaScript 运行时行为的基础上，通过引入静态类型系统来提高代码的可维护性，减少可能出现的 bug。

从中小型项目来看

对于在团队中推行 TypeScript 最大的障碍其实是使用它需要写大量额外的代码，降低了开发效率。

事实上，由于 TypeScrip 拥有 类型推论 的特性，大部分的类型其实都不需要你去手动的声明。

类型推论

如果没有明确的指定类型，那么 TypeScript 会依照类型推论（Type Inference）的规则推断出一个类型。

以下代码虽然没有指定类型，但是会在编译的时候报错：

let demo = 'hellow world';
demo = 1;

// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

事实上，它等价于：

let demo: string = 'hellow world';
demo = 1;

// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

TypeScript 会在没有明确的指定类型的时候推测出一个类型，这就是类型推论。

如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成 any 类型而完全不被类型检查：

let demo; // 该行代码等价于 let demo: any;
demo = 'hellow world';
demo = 1;

TypeScript 在中小型项目中的优势

• 编辑器（IDE）赋能

IDE 为我们提供了代码补全、接口提示、跳转到定义、代码重构等功能 这在非常大的程度上提高了开发效率。

• 足够完善且可以自定义的编译选项

如果你认为 TypeScript 的类型检查过于严格，那么可以通过修改编译选项来降低类型检查的标准。

对于初学者，我同样建议你从 AnyScript 角度入手

尽管这样做会失去 TypeScript 的类型保护优势，但是这样做确实可以降低入门门槛，让你以最快的速度上手，并且体验其独有魅力。

如果要使用 any ，你可以这样做：

• 声明变量不提供类型也不提供默认值
• 定义函数时，参数不给类型

let demo； 
// 等价于 let demo: any;

const function1 = （arg, arg2）{}
// 等价于 const function1 = (arg: any, arg2: any){}

TypeScrip 和 JavaScript 共存

如果你有一个使用 JavaScript 开发的旧项目，比如我们正在开发的 His 项目就是完全用它来开发的。

与此同时，你也希望和我一样尝试 TypeScript 的特性，

你并不需要需要着急把整个项目都迁移到 TypeScript， 你可以使用 TypeScript 编写新文件，即使新文件使用.ts、.tsx 结尾，老文件、使用JavaScript的文件，保持使用 .js、 .jsx 结尾。

你可以再后续的日常迭代中逐步的迁移旧文件

TypeScript 的发展已经深入到前端社区的方方面面了，任何规模的项目都或多或少得到了 TypeScript 的支持。

对于你，可能至今为止，你都还没有学习过 TypeScript

但是实际上，你已经在不知不觉中使用到了TypeScript ...

VSCode 编辑器中编写 JavaScript 时，代码补全和接口提示等功能就是通过 TypeScript Language Service 实现的。

一些第三方库原生支持了 TypeScript， 在使用的时候就能获得代码补全了，比如我们常用的 Element

TypeScript 与标准同步发展

TypeScript 的坚持与 ECMAScript 标准同步发展。

ECMAScript 是 JavaScript 核心语法的标准，自 2015 年起，每年都会发布一个新版本，包含一些新的语法。

新的语法从提案到变成正式的标准，一共会经历一下几个步骤：

• Stage 0：展示阶段

仅仅是提供了讨论、想法，尚未正式提案

• Stage 1：征求意见阶段

提供抽象的 API 描述，讨论可行性，关键算法等

• Stage 2：草案阶段

使用正式的规范语言精确描述其语法和语义

• Stage 3：候选人阶段

语法的设计工作已经完成，需要浏览器、Node.js等环境支持，搜集用户的反馈

• Stage 4：定案阶段

已经准备好讲其添加到正式的 ECMAScript 标准中

一个语法进入到 Stage 3 阶段后，TypeScript 就会实现它

在团队中推行 TypeScript，

1、 让我们可以尽早的使用到最新的语法，帮助它进入到下一个阶段

2、 处于 Stage 3 阶段的语法已经比较稳定了，基本不会有语法的变更，这使得我们能够放心的使用它

总结

软件研发是一份在任何时候需要持续性学习的工作，

在阿里，马老师最常说的一句话就说 —— “拥抱变化”。

面对爆炸性发展的大前端环境，

我们需要既需要保持圣徒的心态，对一切新技术的诞生，对仿如朝圣一般。

与此同时，

亦需要怀着逢敌必亮剑的亮剑精神，对一切新生的事物，敢于发起挑战，如同勇者拔出宝剑，挥剑斩向TypeScript 这条恶龙。

何况，TypeScript 已经不新了~