二、TypeScript 布属开发环境

开发环境

安装 Node.js

因为 TypeScript 是基于Node的，所以我们要先安装Node.js

Node.js安装教程

安装 TypeScript 包

在命令行窗口输入安装命令进行安装

npm install typescript -g

查看版本

tsc --version

安装 TypeScript

注意：mac电脑，要使用 sudo npm install typescript -g 指令进行安装

编写 HelloWorld 程序

注：我用的是 Vscode编辑器

编辑器下载地址：

https://code.visualstudio.com/

编辑器插件参考：

https://www.jianshu.com/p/8b4d9ca571e6

https://www.jianshu.com/p/bd06994333a0

1、初始化项目：

进入你的编程文件夹后，可以使用npm init -y来初始化项目，生成package.json文件。

npm init -y           （ -y 为默认）

初始化项目

2、创建tsconfig.json文件，

在终端中输入tsc --init：它是一个TypeScript项目的配置文件，可以通过读取它来设置TypeScript编译器的编译参数。

tsc --init

创建tsconfig.json文件

3、安装@types/node

使用npm install @types/node --dev-save进行安装。这个主要是解决模块的声明文件问题。并创建一个 node_modules 文件。

npm install @types/node --dev-save

安装@types/node @types/node

4、编写 HelloWorld.ts 文件，然后进行保存：

var a:string = " Hello World ";

console.log( a );

HelloWorld.ts 

5、在 Vscode 的 终端 菜单下，打开运行任务，然后选择 tsc:构建 - tsconfig.json ,这时会生成一个 HelloWorld.js文件。

运行任务 构建文件 HelloWorld.js

6、在终端中输入 node HelloWorld.js 就能看到输出结果了

js输出

---

文末福利：

tsconfig.json 文件 中文注释

基本设置 

严格的类型检查选项

附加检查

模块解析选项

源Map选项

Experimental 选择

自动编译 ts 文件

打开生成的 tsconfig.json 文件 修改 "outDir"。

"outDir": "你需要的路径"。

大概在第十四行    

修改 "outDir"

点击菜单 终端(任务)-运行任务，点击 tsc:监视-tsconfig.json

监视

      此时src目录下会自动生成 js/ .js 文件了；如果没有 src 文件目录，也会自动生成。（ 如果没有作用 重启一下试试）

打开 .js文件，点击编辑器的拆分编辑器菜单 ， 即把js和ts文件拆开。

编辑ts文件并保存后，你会看到 js代码会自动生成