一、什么是 TypeScript
先看一下官网上对 TypeScript 的介绍。
关键词：超集
言外之意 JavaScript 的所有用法 TypeScript 都支持。
如下图所示：
关键词：Type
TypeScript 强调也是其优点之意是【类型】
何为类型：不同的类型未各司其职，混为一谈就显得凌乱且不规范
为什么需要 Ts 呢？举个小例子： 一个杯子可以装水，也可以当笔筒装杂物。但是，拿装杂物的杯子些许显得不太干净。物有所用，各司其职。 Js 是弱类型可以定义 number 类型，可以定义 string 类型，这就并未各司其职。 所以，这就诞生了 Ts
【前端经常遇见的类型问题]
-
它没有类型约束，一个变量可能初始化时是字符串，过一会儿又被赋值为数字。
-
由于隐式类型转换的存在，有的变量的类型很难在运行前就确定。
-
基于原型的面向对象编程，使得原型上的属性或方法可以在运行时被修改。
-
函数是 JavaScript 中的一等公民，可以赋值给变量，也可以当作参数或返回值。
二、TypeScript 的安装及运行
安装：npm install -g typescript 或者 yarn add global typescript
确认是否安装成功: tsc -v
先全局安装一下，在vscode配置，找到新建ts的目录下，创建 tsconfig.json 文件（当前目录执行 tsc --init 生成配置文件）
打开编辑器（确保在node/npm/typescript都成功的前提下）
第一步：新建文件夹 Text
第二步：Text下面新建一个index.html文件。
在若src="./app.ts"会报错
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="./app.js"></script>
</body>
</html>
第三步：在Text下面新建一个app.ts文件
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
let greeter = new Greeter("world");
let button = document.createElement('button');
button.textContent = "Say Hello";
button.onclick = function() {
alert(greeter.greet());
}
document.body.appendChild(button);
要想在浏览器运行起来，需要将 app.ts 编译转换为 app.js。 此时就要进行此命令: **tsc app.ts运行完此命令之后，会自动生成一个 app.js 文件。此时浏览器打开，效果如下：
浏览器会识别 html / css / js。识别不了 ts，所以 ts 编译转变为为 js。
*如果想同时运行多个 ts 文件该如何操作。*
此时需要进行此命令 tsc --init
命令执行成功之后，会自动生成一个 tsConfig.json 文件，此文件则会将帮助所有的 ts 文件编译转换为相应的 js 文件。
运行所有 ts 文件，** tsc** 即可，则会全部转换
三 总结：
-
TypeScript 是添加了类型系统的 JavaScript，适用于任何规模的项目。
-
TypeScript 是一门静态类型、弱类型的语言。
-
TypeScript 是完全兼容 JavaScript 的，它不会修改 JavaScript 运行时的特性。
-
TypeScript 可以编译为 JavaScript，然后运行在浏览器、Node.js 等任何能运行 JavaScript 的环境中。
-
TypeScript 拥有很多编译选项，类型检查的严格程度由你决定。
-
TypeScript 可以和 JavaScript 共存，这意味着 JavaScript 项目能够渐进式的迁移到 TypeScript。
-
TypeScript 增强了编辑器（IDE）的功能，提供了代码补全、接口提示、跳转到定义、代码重构等能力。
-
TypeScript 拥有活跃的社区，大多数常用的第三方库都提供了类型声明。
-
TypeScript 与标准同步发展，符合最新的 ECMAScript 标准（stage 3）
