二、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代码会自动生成

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容