TypeScript学习（一）：快速入门

一、TypeScript 简介

1、TypeScript 是什么？

TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

• 是添加了类型系统的 JavaScript，适用于任何规模的项目。
• 是一门静态类型、弱类型的语言。
• 完全兼容 JavaScript，且不会修改 JavaScript 运行时的特性。
• 可以编译为 JavaScript，然后运行在浏览器、Node.js 等任何能运行 JavaScript 的环境中。
• 拥有很多编译选项，类型检查的严格程度可通过配置文件决定。
• 可以和 JavaScript 共存，这意味着 JavaScript 项目能够渐进式的迁移到 TypeScript。
• 增强了编辑器（IDE）的功能，提供了代码补全、接口提示、跳转到定义、代码重构等能力。
• 拥有活跃的社区，大多数常用的第三方库都提供了类型声明，并且开源免费

下图显示了 TypeScript 与 JavaScript、 ES5、ES2015 和 ES2016 之间的关系：

意思是：JavaScript 和 ES 有的，TypeScirpt都有！

2、TypeScript 与 JavaScript 的区别

3、JavaScript 的缺点

首先JavaScript 是一门非常灵活的编程语言：

它没有类型约束，一个变量可能初始化时是字符串，又被赋值为数字。
由于隐式类型转换的存在，有些变量的类型很难在运行前就确定。
基于原型的面向对象编程，使得原型上的属性或方法可以在运行时被修改。
TypeScript 的类型系统，在很大程度上弥补了 JavaScript 的缺点

4、为什么使用 TypeScript

一般来说，在大型项目中，后期维护成本比前期开发成本要多得多，所以团队规范化尤为重要，包括编码规范，方法调用规范等，而TS可以通过代码的方式，约束团队开发，这样才有利于后期维护及扩展，从而达到高效的开发

两个最重要的特性——类型系统、适用于任何规模。

优势：强大的IDE支持，支持类型检测，允许为变量指定类型，语法检测，语法提示

缺点：有一定的学习成本，需要理解 接口，泛型，类，枚举类型等前端可能不是很熟悉的知识点。

接口（Interfaces）：可以用于对``对象的形状Shape`进行描述

泛型（Generics）：在定义函数，接口或类时，不预先指定具体的类型，而是在使用时在指定类型的一种特性

类（Classes）：定义了一件事物的抽象特点，包括属性和方法

二、TypeScript 开发环境搭建

1、下载Node.js

• node.js官网：Node.js (nodejs.org)
  

• 版本号 LTS：稳定版（一般开发下载这个）

• 版本号 Current：最新版

2、安装Node.js

找到下载的目录里面，打开Node.js进行无脑安装，直接下一步

怎么知道安装成功？
第一种方法：win + R 打开运行对话框，输入cmd 打开命令提示符窗口，输入node -v 回车 显示安装版本号，如以下结果即为成功！

第二种方法：win 搜索powerShell，打开PowerShell 也是一样的输入node -v 回车 显示版本号，即为成功！
　　　　

3、使用npm全局安装TypeScript

npm是node包管理器，通过这个可以安装node下面的各种应用与软件，下载完node.js就可以直接使用npm了

• 进入命令行

• 输入：npm i -g typescript
  

• 显示以上信息，反正没有报错就表示typescript就已经安装好了

• 怎么查看它有没有安装好呢？输入tsc 命令回车，如果出现一堆东西那就表示安装成功了，否则就显示没有找到这条命令。

4、创建一个ts文件

在任意一个文件夹里面新建一个后缀名为.ts的文件，用记事本或随意一个文本编辑器打开文件，输入console.log(’ hello TS！');
但是网页不认识ts文件怎么办？利用我们刚刚下载好的typescript编译器，把ts文件转化为js文件
怎么转？使用tsc命令对ts文件进行编译

5、使用tsc对ts文件进行编译

在所在文件夹里面输入cmd，在这里输入cmd的好处就是 命令行所在的路径正好就是当前所在文件的路径，就不用使用命令进入了！

输入命令：tsc 需要编译的文件名，回车执行，虽然命令提示符窗口没有发生什么变化，但是此时此刻你会发现该文件夹里面多了一个js文件！