TS学习系列01 --- 认识TS

1、TS是什么？

TypeScript官网：https://www.typescriptlang.org/ TypeScript推荐博客文档：https://ts.xcatliu.com/ TypeScript中文网（早已停更）：https://www.tslang.cn/index.html

• TypeScript简称TS， 是一种由微软开发的自由和开源的编程语言。是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。
• TypeScript 的首个版本发行于 2012 年 10 月，后续在不断的更新中逐渐在前端领域站稳了脚跟，如今绝大多数的框架都或多或少使用 Typescript 来进行开发。

2、TS 与 JS 的关系

• 1、TS和JS之间的关系其实就是Less/Sass和CSS之间的关系，就像Less/Sass是对CSS进行扩展一样, TS也是对JS进行扩展，就像Less/Sass最终会转换成CSS一样, 我们编写好的TS代码最终也会换成JS。
• 2、TypeScript是JavaScript的超集，因为它扩展了JavaScript，有JavaScript没有的东西。
• 3、硬要以父子类关系来说的话，TypeScript是JavaScript子类，继承的基础上去扩展。
• 4、TypeScript 提供最新的和不断发展的 JavaScript 特性，包括那些来自 2015 年的 ECMAScript 和未来的提案中的特性，比如异步功能和 Decorators，以帮助建立健壮的组件

借用阿宝哥的一张图，能更明了的知到ts是什么

ts与js的区别

3、为什么需要TS

既然有了js，为什么还需要TS： 简单来说，就是因为JavaScript是弱类型, 很多错误只有在运行时才会被发现，而TypeScript提供了一套静态检测机制, 可以帮助我们在编译时就发现错误， 说的极端一点，TS就是为了让使用者爽，有更好的提示和约束，让你知道你是否有正确安全的使用提供的方法。而不是为了增加你的工作量和心智负担。

4、获取TypeScript

TS中文网：https://www.tslang.cn/index.html#download-links 命令行的TypeScript编译器可以使用Node.js包来安装。

4.1 安装TS（全局）

npm install -g typescript

4.2 验证 TypeScriptan安装成功

$ tsc -v 
## Version 4.5.4

4.3 编译 TypeScript 文件

4.3.1. 命令行编译

安装 TypeScript 后通过内置的命令 tsc 就能将 ts 文件编译为对应的 js 文件

$ tsc helloworld.ts
# helloworld.ts ==> helloworld.js

4.3.2. 在线编译

中文网提供了一个可以在线编辑的TS工具，无需下载，即可在线体验TS,方便学习，地址：https://www.tslang.cn/play/index.html 通过配置 TS Config 的 Target，可以设置不同的编译目标，从而编译生成不同的目标代码

4.3.3. vscode编辑器自动编译

开发中，命令行手动去编译ts为js太麻烦，影响开发效率，可以在vscode的配置中自动监视 步骤：

• 1、在项目目录中运行 tsc --init 生成 tsconfig.json
• 2、可以修改 tsconfig.json 中的outDir选项为"outDir": "./js",以后所有的 js 代码都会在这个文件夹中编译
• 3、然后在 vscode 中打开命令面板( Ctrl/Command + Shift + P)选择输入task,选择Run Task,监听 tsconfig.json,就可以 vscode 中实时监控 TypeScript 编译

4.4.4. ts-node直接运行ts文件

ts-node可以让ts无需手动编译而直接在nodejs环境中运行

## 安装到项目
npm install -D typescript
npm install -D ts-node

## Or 全局安装到计算机
npm install -g typescript
npm install -g ts-node

npm install -D tslib @types/node

用ts-node运行ts文件，例如：

ts-node demo-1.ts