【TypeScript】从零开始玩转typescript - typescript入门

前言

小伙伴们大家好。从今天开始我们将从零开始系统的学习一些TypeScript相关的知识。相信小伙伴们或多或少应该也都听说过这玩意了，那么这家伙是干嘛的呢，已经有JavaScript了为什么又要搞出个TypeScript，接下来就为大家一一揭晓。

TypeScript

TypeScript是个啥，它跟JavaScript又有啥区别？

• TypeScript是由微软团队开发的一种开源、自由的编程语言。
• TypeScript是JavaScript的一个超集，支持ES6的所有标准。
• TypeScript是一种能给JavaScript添加特性的扩展语言。
• TypeScript的设计一般是针对开发大型应用或者大型开发团队。因为它能够让你的代码更规范，类型更明确，维护更方便。尤其是多人合作开发一个功能模块，或者是封装一套公共的组件库时效果尤为显著。
• TypeScript最后可以编译成JavaScript，然后在各种浏览器上运行。
• TypeScript扩展了JavaScript的语法，因此JavaScript和TypeScript可以共同工作，并且TypeScript能够完全识别JavaScript的代码。
• TypeScript的适用场景：TypeScript的设计一般是针对开发大型应用或者大型开发团队。因为它能够让你的代码更规范，类型更明确，维护更方便。尤其是多人合作开发一个功能模块，或者是封装一套公共的组件库时效果尤为显著。
• 另外个人理解：TypeScript更类似于后端的强类型语言（如Java），因为它可以在声明变量时指定类型，可以指定函数是否有返回值以及返回值的类型，还可以定义类、枚举、泛型，接口等等。

说了这么多理论还是不便于大家理解，TypesScript到底是个啥玩意，下面我们就先从它的使用开始一边coding一边学习把。

TypeScript安装

要想使用TypeScript首先得先把它安装在我们的环境中，然后才能够使用。TypeScript的安装也是非常简单的，只需要在命令行中运行：npm install typescript -g 即可将其安装在我们的全局环境中。那么安装完成后还需要看下是否安装成功，同样在命令行中运行：tsc -v 如果输出了版本号则表示对应版本号的TypeScript已经安装成功。

npm install typescript -g

## 安装完成后查看是否成功
tsc -v
# 输出："对应的版本"

TypeScript语法及与JavaScript的区别

TypeScript的语法跟JavaScript的是一样的：

• 用var、let或const声明定义一个变量/常量
• 用function个定义一个函数
• 用class声明一个类
• 用new来创建一个对象
• 支持if/else判断条件
• 支持for/for…of/for…in/while循环
• 用console.log在控制台打印数据
• 用//进行单行注释，用/**/多行注释等等

但与JS不同的是：

• TS在声明变量时可以同时限定变量的类型，而JS是在赋值时才能够确定变量的数据类型
• TS在定义函数时可以同时指定函数的参数类型，返回值及返回值类型，而JS的参数类型是函数调用时才能够确定，返回值类型则是由return决定

下面我们用代码来演示一下：

TypeScript 声明变量的语法： var/let/const 变量名:类型 = 值

//声明一个指定类型的变量/常量 
let