开发环境
安装 Node.js
因为 TypeScript 是基于Node的,所以我们要先安装Node.js
安装 TypeScript 包
在命令行窗口输入安装命令进行安装
npm install typescript -g
查看版本
tsc --version

注意:mac电脑,要使用 sudo npm install typescript -g 指令进行安装
编写 HelloWorld 程序
注:我用的是 Vscode编辑器
编辑器下载地址:
https://code.visualstudio.com/
编辑器插件参考:
1、初始化项目:
进入你的编程文件夹后,可以使用npm init -y来初始化项目,生成package.json文件。
npm init -y ( -y 为默认)

2、创建tsconfig.json文件,
在终端中输入tsc --init:它是一个TypeScript项目的配置文件,可以通过读取它来设置TypeScript编译器的编译参数。
tsc --init

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


4、编写 HelloWorld.ts 文件,然后进行保存:
var a:string = " Hello World ";
console.log( a );

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



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

文末福利:
tsconfig.json 文件 中文注释

基本设置

严格的类型检查选项

附加检查

模块解析选项

源Map选项

Experimental 选择

自动编译 ts 文件
打开生成的 tsconfig.json 文件 修改 "outDir"。
"outDir": "你需要的路径"。
大概在第十四行

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

此时src目录下会自动生成 js/ .js 文件了;如果没有 src 文件目录,也会自动生成。( 如果没有作用 重启一下试试)

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

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

网友评论