1) TypeScript的介绍,安装,vscode自动编译ts

1. TypeScript 的介绍

1. TypeScript 是由微软开发的一款开源的编程语言
2. TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法。遵循 ES6,ES5 规范。
3. TypeScript 更像 Java、c# 这样的面向对象语言，可以让 js 的语法更加规范，能够承担大型企业项目的开发，更利于维护
4. 目前的主流三大框架都支持 TypeScript，node.js 中也可以使用 TypeScript

2. TypeScript 的安装，编译

安装

TypeScript 的命令行工具安装方法如下：

npm i -g typescript
# 或
cnpm i -g typescript
# 或
yarn global add typescript

安装完之后，重启终端或者重新打开一个终端，使用 tsc -v 命令查看版本号来确认是否安装成功。!

像这样，能输出版本号，就代表安装成功了 🎉

编写 & 编译 TypeScript

下面我们就来写一个向世界问好的简单程序

1. 首先打开编辑器，新建一个 hello.ts 的文件
2. 编写向世界问好的程序

function sayHello(name: string) {
    console.log(`Hello world, 我是 ${name}`)
}

console.log(sayHello('TypeScript'));

3. 编译 ts

tsc hello.ts

编译成功后，会生成一个 index.js 的文件

function sayHello(name) {
    console.log("Hello world, \u6211\u662F " + name);
}
console.log(sayHello('TypeScript'));

3. 配置 vscode 自动编译 ts 文件

1. 创建 tsconfig.json 文件

tsc --init

2. 修改 tsconfig.json 文件中的输出路径

这样编译生成的 js 文件就会都放在 js 文件夹下面了

3. 设置 vscode 监视任务，自动编译 ts

点击展开后，选择 typescript，选择 tsc:监视 - tsconfig.json

现在我们修改 index.ts 文件，vscode 就会自动帮我们编译成 js 文件

注：要是没有看到 typescript，说明 vscode 没有打开任务这个功能，须在设置 -> 功能 -> 任务 -> Auto Detect 设置为 on

到这，我们的学习 TypeScript 的环境基础就完成了