做前端挺久了，之前是一直使用JavaScript进行开发，时间长了发现现在的主流框架都已经开始向TypeScript方向靠拢了，正好公司也给了学习的机会，就把这几天的学习成果分享一下。

TypeScript与JavaScript是目前项目开发中较为流行的两种脚本语言，我们已经知道TypeScript是JavaScript的一个超集，就是覆盖了 JavaScript 的所有元素，可以载入 JavaScript 代码运行，并扩展了 JavaScript 的语法。但是他们之间又有什么样的区别呢？我带你们了解一下。

TypeScript 是 Microsoft 开发和维护的一种面向对象的编程语言。它是 JavaScript 的超集，包含了 JavaScript 的所有元素，可以载入 JavaScript 代码运行，并扩展了 JavaScript 的语法。

TypeScript具有以下特点：

JavaScript的特点就不介绍了，大家都已经非常熟悉了。

下面列举 TypeScript 相比于 JavaScript 的显著优势：

1. 静态输入

静态类型化是一种功能，可以在开发人员编写脚本时检验错误，查找并修复错误是当今开发团队的迫切需求。有了这项功能，就会允许开发人员编写更健壮的代码并对其进行维护，以便使得代码的质量更好、更清晰，后期维护更方便。

2. 大型项目的开发

有时为了改进开发项目，需要对代码库进行小的增量更改，这些小小的变化可能会产生严重的、意想不到的结果，因此有必要撤销这些变化。使TypeScript工具来进行重构，变得更容易更快捷。

3. 更好的协作

当开发大型项目时，会有许多的开发人员，此时乱码和错误的机会也会增加。类型安全是一种在编码期间检测错误的功能，而不是在编译项目时检测错误，这位开发团队创建了一个更高效的编码和调试过程。

4. 更强的生产力

干净的ECMAScript 6 代码，自动完成和动态输入等因素有助于提高开发人员的工作效率。这些功能也 有助于编译器创建优化的代码。

相比较TypeScript，JavaScript也有一些非常明显的优势：

1. 人气

JavaScript的开发者社区仍然是巨大而活跃的，在社区中可以很方便的找到大量成熟的开发项目和可用资源。

2. 学习成本

由于JavaScript 语言发展的比较早，也比较成熟，所以仍有一大批开发人员坚持使用后他们熟悉的脚本语言JavaScript，而不是学习TypeScript。更多小白先接触 JavaScript 的原因也是他的人气更足，资源更多，可以在学习的道路上少走很多弯路少踩很多坑。

3. 本地浏览器支持

TypeScript 代码需要被编译，编译后输出 JavaScript 代码，这是 TypeScript 代码执行时的一个额外的步骤。

4. 不需要注释

为了充分利用 TypeScript 特性，开发人员需要不断注释他们的代码，这可能会使项目效率降低。

5. 灵活性

JavaScript 的灵活性更足一些，一些开发人员更喜欢灵活脚本语言。

TypeScript 可以使用JavaScript 中的所有代码和编码概念，TypeScript 是为了使JavaScript 的开发变得更加容易而创建的。例如：TypeScript 使用类型和接口等概念来描述正在使用的数据，这使开发人员能够快速检测错误并调试应用程序。

TypeScript 正在成为开发大型编码项目的有力工具。因为其面向对象编程语言的结构保持了代码的清洁、一致和简单的调试。因此在应对大型开发项目时，使用 TypeScript 更加合适。如果有一个相对较小的编码项目，似乎没有必要使用 TypeScript，只需使用灵活的 JavaScript 即可。

数据类型

JavaScript的数据类型分为2大类：原始数据类型和引用数据类型 原始数据类型：object（对象）、number（数值）、string（字符串）、boolean（布尔值）、null、undefined。 引用数据类型：object类型的Array（数组）、Data、function。

JavaScript中的变量

js 中变量的声明： var 变量名 = 值 js 中变量的使用注意事项：

JavaScript中的函数

在ES3 里面定义函数的关键字是 function，而在ES6 里面定义函数是可以不需要function关键字的。 在ES3 到 ES6 之间定义函数的使用function关键字。

TypeScript支持与JavaScript几乎相同的数据类型，在JavaScript的基础上增加了枚举类型方便我们使用。

布尔值

最基础的数据类型就是简单true和false值，在TypeScript和JavaScript里面叫做Boolean值。 定义变量的语法：

number（数字类型）

这个和JavaScript里面的是一样的，TypeScript里面的所有数字都是浮点数，这些浮点数的类型都是number，吃了支持十进制和十六进制字面量，TypeScript还支持ECMAScript 2015中引入的二进制和八进制的字面量。

例如：

string（字符串）

在这里和JavaScript里面定义字符串的数据可以用单引号引起来也可以用双引号引起来。

语法：

你还可以使用模板字符串，它可以定义多行文本和内嵌表达式。这种字符串是被反引号包围，并且以${} 这种形式嵌入表达式。

举例：

这个与下面定义sentence的效果相同：

数组

在Typescript中定义数组有两种方法，一种方法是：

第二种方法是：

Tuple（元组）

这个在JavaScript中是没有的，这个元组类型允许表示一个一直元素数量和类型的数组，个元素的类型不必相同。

例如：

enum（枚举）

枚举类型是对JavaScript标准数据类型的一个补充。像C#等其他语言一样，使用枚举类型可以为一组数值赋予友好的名字。

例如：

默认情况下，从0开始为元素编号。手动的指定成员的赋值开始的编号，也可以手动的随意指定成员编号值。

例如：

Any（交给编译阶段的检查）

这个就是将你需要检查的代码及数据交给编译阶段的时候进行自行检查，我们就可以使用any类型来标记这些变量。

例：

在对现有代码进行改写的时候，any类型是十分有用的，他允许你在编译时可选择的包含或一处类型检查。你可能认为object 有相似的作用，就像它在其他语言中那样。但是object类型的变量只是允许你给他赋任意值，但是却不能够在他上面调用任意的方法，即便他真的有这些方法。

例如：

void(无返回值)

某种程度上来说，void类型像是与any类型相反，他表示没有任何类型。当一个函数没有返回值时，你通常会见到其返回值类型是void。

例如：

Null和Undefined

TypeScript里，undefined和null两者各自有自己的类型分别叫做undefined和null。 和 void相似，它们的本身的类型用处不是很大。

默认情况下null和undefined是所有类型的子类型，就是说你可以把null和undefined赋值为别的数据类型的变量的。

Never（永远不存在的值得类型）

never类型表示的是那些永不存在的值的类型。never类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never的子类型或可以赋值给never类型（除了never本身之外）。 即使 any也不可以赋值给never。

例如：

Object（对象）

object表示非原始类型，也就是除number（数字），string（字符串），boolean（布尔），symbol（符号），null或undefined之外的类型。使用object类型，就可以更好的表示像Object.create这样的API.

例如:

类型断言

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

例如：

第二种是as的方法，例如：

声明变量和常量

在JavaScript里面定义变量和常量的关键字是一样的。 定义变量的关键字是var和let。

他们的区别就是： var定义的变量可能会被别的方法使用给调用的使用，然后有一个弊端就是会出现一个变量的全局污染。var定义的变量他会变量提前然后会程序没有到定义变量的那一行的时候会出现给其变量给赋undefined值。

let声明变量

const声明常量

TypeScript里面定义函数的方法和JavaScript里面定义函数的方法是差不多的，同样也是可以使用ES6里面的箭头函数的。 正常定义函数的语法：

还可以这样用：

可选参数和默认参数

注意：编译器还会假设只有这些参数会被传递进函数。简短地说，传递给一个函数的参数个数必须与函数期望的参数个数一致。

例如：

JavaScript里，每个参数都是可选的，可传可不传。 没传参的时候，它的值就是undefined。

在TypeScript里我们可以在参数名旁使用 ?实现可选参数的功能。 比如，我们想让last name是可选的。

例如：

还有在es6中的 … 运算符使用也是一样的，例如：

注意事项

后续会持续更新关于TypeScript的相应内容…