为什么我们需要TypeScript？
什么是TypeScript？
在我们学习一项技能前，我们应该先了解这是个什么东西。TypeScript（后文简称为TS）是JavaScript（后文简称为JS）的超集。支持JS包括实验特性的所有写法，你也可以在TS文件中写纯JS代码。此外，TS也有很多JS没有的新特性，比如抽象类，枚举等等。而TS相较JS最重要的功能就是类型，实际上你可以认为TS就是带类型的JS。
当然，在JS中也有如string，number等基本类型，而对于一个对象，它的类型都是object，而在TS中，允许你声明对象的类型。可能你会觉得这很麻烦，跟JS相比太不灵活了，但实际上TS的类型并不死板，你可以使用泛型让其变得灵活。
TS的出现解决了什么？
有些人认为JS的初衷就是能够简单快速的编写web应用，而TS相对来说复杂太多。而伴随着web应用的功能的增多，代码复杂度也相应的增加。JS作为动态类型的缺点就大于优点了。在JS中如果是由于类型而导致的错误，我们得在运行后才能找到问题，但是使用TS我们能够在写代码时就发现问题，这带来的时间收益无疑是巨大的。
我能用TS来干什么？
有很多朋友想要使用一种编程语言做一个完整的web项目，因为这样我们能够少花很多精力。要知道，JS是一门一专多能的语言，而TS是JS的超集，你能在任何可以使用JS的地方使用TS。你可以使用TS来构建web应用，使用vue，react来编写前端（在浏览器中js几乎是你的唯一选择），使用node+nestjs来编写后端（在大多数时候完全够用，并且你能够通过TS学习设计模式）。你也可以使用electricon来编写桌面端程序（比如vscode就是使用electricon+ts编写的），使用babylon.js来写web游戏或者在web中进行模型展示等等。
TS编写起来太慢了？
光看代码，TS确实比JS写得更多。但在vscode中，我们使用TS能够得到完善的代码补全的提示，比如这个数组的元素为number类型，我们得到的代码补全提示都是number类型的方法：
而且我们写程序时，写代码的时间占少数，有很多时间是在找bug或者进行测试。而TS能够帮助我们在编写代码时就提前避免错误，也大大减少了bug数，要让编程的效率高，我们应该在减少bug和进行测试下功夫。而不是单纯的看代码量的多少。
比如我们这里的函数有可能就没有返回值，在JS中我们是没有这个提示的，（当然，这需要配置tsconfig.json文件。在后面的文章中会提到这个配置）
所以为了让项目遵循"软件工程学"，我们得学习TS并且在项目中使用它。并且，你可以发现各个框架，库都开始使用TS来代替JS了。而我们使用TS能够得到更好的代码补全的提示。
TS的安装
npm install -g typescript我们先使用npm或者pnpm来全局安装ts
如何运行TS文件
首先我们需要知道的是ts暂时还不能在浏览器上直接运行（TS团队正在为此做出努力），也就是说所有ts文件最后都是要编译成js文件的。我们使用ts的编译器只是为了使用它的类型检测以及一些特性。在项目中，我们会借助打包工具（如vite，webpack）将其编译成js文件并打包。但在我们学习ts时，使用ts的tsc指令进行编译就行了。
生成js文件（一次性）
tsc 文件名然后使用node指令来运行js文件
node demo.js监听，每次保存会自动编译后修改js文件
tsc 文件名 -w或者安装ts-node
npm install -g ts-node
npm install -D tslib @types/node然后使用ts-node指令运行文件
ts-node demo.tstsconfig.json文件配置
tsconfig.json文件是ts编译器的配置文件，我们可以通过这个配置文件来规范我们的代码，比如：“如果重写方法必须使用override关键字”。这将能够使我们能够写出更加规范的代码。
下面我们做一些简单的配置：
- 生成tsconfig文件
在终端输入
tsc --init - "target": "es2016"
输出的js文件的标准，建议使用es2016
- "rootDir": "./src",
ts的根文件目录
- "outDir": "./dist",
ts生成的js文件的目录
- "removeComments": true,
如果报错，不生成js文件
- "sourceMap": true,
为编译好的js文件创建相应的映射文件（使用debug和断点）
debug与lunch.json文件
VS Code中的debug是一个非常好用工具，此外，VS Code对Node.js运行时具有内置的调试支持（其他语言需要额外下载扩展），并且可以调试 JavaScript、TypeScript 或任何其他转换为 JavaScript 的语言。
那我们该怎样使用它呢？
在vscode中点击debug，并创建lunch.json文件，在program下添加"preLaunchTask": "tsc: 构建 - tsconfig.json",
注意：tsc后对于中文用户是构建，而对于其他语言的用户可能的是其他的字符，如英文为build
你可以使用ctrl+shift+B来查看任务（如果你使用的搜狗输入法，请先切换输入法，因为有按键的冲突）
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${file}",
"preLaunchTask": "tsc: 构建 - tsconfig.json",
"outFiles": [
"${workspaceFolder}/**/*.js"
]
}
]
}现在我们配置好了文件，打开demo.ts文件，写入下面的代码：
let age: number = 20;
if (age < 50) age += 10;我们将第一行加入断点，这时候debug（可以使用F5快捷键）将会从第一行进行
左侧有VARLABLES/变量
其中，我们可以看到当前的age为undefined，那是因为let age = 20实际上是两行代码：let age; age = 20;
我们可以在watch/监视中指定想要监视的变量age
通过F10（第二个蓝色按钮）来执行下一行
现在我们进行到第二行，可以看到age的值变成了20
但我们想看到age变为30，不过由于程序结束了，我们无法在debug中得到age:30
我们可以新加一行代码，让debug拿到age变化的值后再结束程序
