一、什么是TypeScript
TypeScript是JavaScript的超集，是一种建立在JavaScript上的编程语言，同时它还在JavaScript的基础上添加了一些特性和优势。但是TypeScript不能直接运行在各大浏览器中，而是需要将其编译成JavaScript，因为浏览器内嵌的引擎目前只支持识别JS代码。
二、为什么需要TypeScript
既然TypeScript最终还是要编译成JavaScript才能运行，那为什么还需要TypeScript呢？
下面以一个例子，来详细讲述一下。
2.1 描述
描述：在页面中有两个input按钮，分别进行数字输入，然后点击Add按钮，计算出两数之和。
2.2 代码
// index.html
<body>
<input type="number" id="num1" placeholder="Number 1">
<input type="number" id="num2" placeholder="Number 2">
<button>Add</button>
总数：<span id="sum"></span>
</body>
// index.js
const buttonAdd = document.querySelector("button");
const input1 = document.getElementById("num1");
const input2 = document.getElementById("num2");
const span = document.getElementById("sum")
function add(num1, num2) {
span.innerText = num1 + num2;
}
buttonAdd.addEventListener("click", function () {
add(input1.value, input2.value)
})
2.3 界面
2.4 结果
我们在两个input中分别输入4和4，预期得到的结果应该是8，可最终显示在页面上的确是44，这是为什么呢？
通过一步步调试发现，真是由于JavaScript弱类型导致的。因为input1.value和input2.value的值是string类型，而JavaScript代码并没有识别出我们期望的number类型，导致其最终的结果是 "4"+"4"="44" 。
而TypeScript的设计目的就是为了解决JavaScript的“痛点”：弱类型和没有命名空间，导致很难模块化，不适合大型程序开发。另外，它还提供了一些语法来帮助开发者更方便地实践面向对象的编程。后面，我们将用TypeScript语言来重新改写这个逻辑，看看它是如何避免这个问题的。
三、 安装
在使用TypeScript之前，我们先进行安装。通过官方文档可知，可以使用NPM(Node package Manager)来进行快速的安装。（ps：如果不知道如何安装NPM的，可以参考NPM教程一）
3.1 安装
npm install -g typescript
3.2 编译
tsc xxx.ts
四、 使用
4.1 TypeScript改写
我们把index.js代码直接拷贝到index.ts文件中，并为add函数的参数指定为number类型，接下来会发现编译器中会出现一系列红色的波浪线错误提示。下面我们将对该错误提示进行一一分析和解决。
提示1：
分析：通过官方的issue，我们知道这是一个设计问题。TypeScript使用的DOM Typings作为全局执行上下文，全局环境下就极有可能随时出现命名重复的问题，所以Typescript会提示这样的错误。
解决方案：官方提供了两种解决方案：第一种：使用模块；第二种：不要包含BOM Typings。这里采用第一种方案。
提示2：
分析：TypeScript判断通过id获取的input1元素可能是为null，因此进行了错误提示。
解决方案：在变量后面加一个not null的断言操作符(!)，告诉编译器只需要知道这个东西，不需要进行运行时检查。
提示3：
分析：input1默认为HTMLElement类型，导致在获取value时候，编译器提示其获取不到；
解决方案：在变量后面加一个确切的类型断言；
提示四：
分析：input1.value的值是一个string类型，而add函数接收的参数是number类型，出现类型不匹配。
解决方案：将input1.value转化为number类型。
提示五：
分析：span.innerText需要的值是一个string，而赋值给它的是一个number。
解决方案：将num1+num2转化为string类型。
4.2 最终TypeScript代码
//index.ts
const buttonAdd = document.querySelector("button") ! as HTMLButtonElement;
const input1 = document.getElementById("num1") ! as HTMLInputElement;
const input2 = document.getElementById("num2") ! as HTMLInputElement;
const span = document.getElementById("sum")! as HTMLSpanElement;
function add(num1:number, num2:number) {
span.innerText = num1 + num2 + '';
}
buttonAdd.addEventListener("click", function () {
add(+input1.value, +input2.value)
})
export {}
4.3 将TypeScript转化为JavaScript
// index.js
var buttonAdd = document.querySelector("button");
var input1 = document.getElementById("num1");
var input2 = document.getElementById("num2");
var span = document.getElementById("sum");
function add(num1, num2) {
span.innerText = num1 + num2 + '';
}
buttonAdd.addEventListener("click", function () {
add(+input1.value, +input2.value);
});
4.4 结果
五、总结
通过上述的分析和研究，我们知道TypeScript是JavaScript的超集，并在其基础上提供了一系列特性和优势(类型校验、命名空间、)，但是TypeScript代码不能直接运行在浏览器中，需要最终编译成JavaScript代码。
