写点什么

TypeScript 开发环境搭建

用户头像
Emperor_LawD
关注
发布于: 2021 年 05 月 20 日
TypeScript 开发环境搭建

下载 node.js

安装 node.js

  • 其他特殊操作,选择好安装路径直接安装即可

  • 安装完成后,使用win+R快捷键打开 cmd 命令行窗口,并输入node -v检查是否安装成功

安装解析 TS 的工具包

  • 进入 cmd 命令行窗口

  • 网速好

  • 输入:npm install -g typescript

  • npm:包管理器

  • typescript:就是用来解析 TS 的工具包,提供了 tsc 命令,实现了 TS -> JS

  • 网速不好

  • 先输入:npm config set registry https://registry.npm.taobao.org(淘宝镜像)

  • 检查:npm config get registry

  • 再输入:npm install -g typescript

  • 检查是否安装成功

  • 输入tsc,如果出现一堆代码则安装成功

方式一:使用记事本进行编写

  • 新建记事本文件

  • 输入以下代码

console.log('Hello TS')
复制代码



  • 保存并修改扩展名为 .ts

  • 进入命令行,输入 tsc 文件名.ts

  • 即可将 ts 文件转换为 js 文件

方式二:使用 VScode 进行编写

  • 打开 VScode,新建文件夹

  • 打开终端,输入 tsc --init,引入 ts 编译规则配置文件 tsconfig.json

  • 在 tsconfig.json 文件中修改 "outDir": "./""outDir": "./dist" ,并取消注释

"outDir": "./"  /*outDir用来指定输出文件夹,值为一个文件夹路径字符串,输出的文件都将放置在这个文件夹*/
复制代码
  • 新建文件,文件命名为 hello.ts

  • 输入以下代码

console.log('Hello TS')
复制代码
  • 点击菜单栏 -> 终端 -> 运行任务 -> 选择当前文件夹 -> tsc 监视 即可

  • 打开监视可实现实时更新 js 文件

方式三:使用 WebStorm 进行编写

  • 打开 webStorm,新建目录,新建 ts 文件

  • 输入以下代码

console.log('Hello TS')
复制代码
  • 点击左下角 Terminal 输入 tsc 文件名.ts

  • 即可将 ts 文件转换为 js 文件


发布于: 2021 年 05 月 20 日阅读数: 43
用户头像

Emperor_LawD

关注

愿能如萤火一般,可以在黑夜里发一点光。 2021.05.19 加入

还未添加个人简介

评论

发布
暂无评论
TypeScript 开发环境搭建