美文网首页TypeScript
二、TypeScript 布属开发环境

二、TypeScript 布属开发环境

作者: Rising_life | 来源:发表于2019-05-23 14:39 被阅读0次

开发环境

安装 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代码会自动生成

相关文章

网友评论

    本文标题:二、TypeScript 布属开发环境

    本文链接:https://www.haomeiwen.com/subject/xtsvzqtx.html