Typescript学习

一 什么是Typescript

简单的说，TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6 的支持，它由 Microsoft 开发，代码开源于 GitHub 上。

它的第一个版本发布于 2012 年 10 月，经历了多次更新后，现在已成为前端社区中不可忽视的力量，不仅在 Microsoft 内部得到广泛运用，而且 Google 的 Angular2 也使用了 TypeScript 作为开发语言。

对比了一下TS，实际上和现在项目中普遍用的less非常相像，都是一种工具，使用TS的规则书写JS代码，和less一样，最终会编译成普通的js文件，但是书写的时候有了一定的规则和变量类型，比较统一和方便调用。

总结一下：TS是对js的优化和升级，弥补一些js语法设计上的缺陷，让Js在工具下的帮助下转化为某种“强”类型的语言，方便开发人员的书写，重构（另外TS作者就是C#他爸）。

PS：有兴趣的话可以了解下less，也是编译前按照less的规则书写css，最终的产出仍然是css。

例子：编译前TS文件

编译后JS文件

二 使用Typescript的好处

js这门语言太宽松了，规定和约束太少，比较“浪”。

最近看PHP的时候，发现和PHP很明显的不同就是作用域的区别，在js当中函数内部是可以访问外部的全局常量的，除此之外还有命名空间、枚举类，包括ES6 let的语法，都是解决这一块的历史遗留问题，这些在TS当中都得到解决。

主要的优点总结一下：

• 基于静态类型，用 TypeScript 编辑代码有更高的预测性，更易纠错。

• 由于模块，命名空间和强大的面向对象编程支持，使构建大型复杂应用程序的代码库更加容易。

• TypeScript在编译为JavaScript的过程中，在它到达运行时间前可以捕获所有类型的错误，并中断它们的执行。

• angular2 react 以及最新的vue等前端框架，全部对Typescript做了支持。

• 兼容性问题比较少（最近在开发dsp的时候，用iframe嵌套了一个自己写的页面，由于不是在er框架里边，测试的时候发现不兼容IE和百度浏览器，因为用的一些方法和属性IE并不支持）。

• 编码风格可以较为统一，缓解了前端现在“各自为战”的状况。

三 安装和使用

TypeScript 的命令行工具安装方法如下：

npm install -g typescript （npm 是基于node的一个包管理工具，类似于jumbo 可以想象成一个应用市场）

以上命令会在全局环境下安装 tsc 命令，安装完成之后，我们就可以在任何地方执行 tsc 命令了。

编译一个 TypeScript 文件很简单：

tsc 文件名.ts

我们约定使用 TypeScript 编写的文件以 .ts 为后缀。

四 编辑器

TypeScript 最大的优势之一便是增强了编辑器和 IDE 的功能，包括代码补全、接口提示、跳转到定义、重构等。

主流的编辑器都支持 TypeScript，这里我推荐使用 Visual Studio Code。

它是一款开源，跨终端的轻量级编辑器，内置了 TypeScript 支持。

另外它本身也是用 TypeScript 编写的。

当然，大家常用的submile 也是支持的。

五 新特性（介绍部分）

简单的js大家都会写，主要介绍一些和js不同的地方。

5.1 基础类型

TS支持与JS基本一致的数据类型，但是写法上有一些调整。

Boolean:

Number:

String:

Array:

元组 Tuple: (新增)

元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。 比如，你可以定义一对值分别为string和number类型的元组。

枚举：（新增）

任意值：（新增）

有时候，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。 这些值可能来自于动态的内容，比如来自用户输入或第三方代码库。 这种情况下，我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。 那么我们可以使用any类型来标记这些变量：

空值：（新增）

Null和Undefined:(没什么用)

Never:(不常用)

类型 断言：（新增）这个很有意思 interesting

有时候你会遇到这样的情况，你会比TypeScript更了解某个值的详细信息。 通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。

通过类型断言这种方式可以告诉编译器，“相信我，我知道自己在干什么”。 类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构。 它没有运行时的影响，只是在编译阶段起作用。 TypeScript会假设你，程序员，已经进行了必须的检查。

let:ES6出现的语法 由于js没有块级作用域，只有局部和全局之分。

（来源于MDN）

最直接的例子就是常见的前端面试题

他的结果是，这样看起来很怪，这就是var声明以及js本身存在的问题之一。

let正是解决这个问题而提出的一种变量声明的方式。

类似的还有cont 。

5.2 类(没错，js现在也能这么写了)

其中的this表示访问的是类的成员。

5.3 继承 extends关键字

5.4 公共、私有与受保护的修饰符（越来越贴近和借鉴其他的语言，TS本身就是C#的作者开发的）

public

在TypeScript里，成员都默认为public。

private

protected

我们不能在Person类外使用name，但是我们仍然可以通过Employee类的实例方法访问，因为Employee是由Person派生而来的

构造函数也可以被标记成protected。 这意味着这个类不能在包含它的类外被实例化，但是能被继承。

readonly修饰符

只读属性必须在声明时或构造函数里被初始化

存取器

存入的时候校验一下密码。

使用存取器应该注意的地方：ES5以上，只带有get而没有set的存取器会自动推断为readonly

5.4 this

写js的时候经常遇见的一个问题就是判断this，并且由于this指向的问题初期的时候会出现一些逻辑上的bug，很多时候不确定this到底是哪个指向，还要console一下。

TS比js改进的地方就是能通知你错误地使用了this的地方。

更多的语法请移步这里https://www.gitbook.com/book/xcatliu/typescript-tutorial/details

六 当前项目对于TS的引入

vue是在17年10月份中旬的2.5.0版本中新增了对Typescript的支持。

实际上对于新的前端框架对TS的支持力度，一直以来都感觉有点遗憾，大概类似于饺子这么好吃你们这么大的饭店竟然不做饺子的感觉。

React和angular对TS的支持力度比较大，解决方案也比较成熟稳定。

（官方手册对于前端框架的支持）

但是通过关注社区和作者尤雨溪的一些动态来看，现在在vue项目中引用TS还不是一个特别稳妥的解决方案，引起的bug比较多。

等vue有比较稳定的对TS的支持，会考虑对生命周期和任务调度进行改进。

以上。