TypeScript 开发环境搭建

简介: TypeScript 开发环境搭建

下载 node.js

安装 node.js

  • 无其他特殊操作,选择好安装路径直接安装即可
  • 安装完成后,使用win+R快捷键打开 cmd 命令行窗口,并输入node -v检查是否安装成功
  • image-20210513135319934.png

     出现以上版本号,则表示安装成功

安装解析 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

image-20210513135247228.png

  • 检查是否安装成功
  • 输入tsc,如果出现一堆代码则安装成功
    image-20210513135442998.png

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

  • 新建记事本文件
  • 输入以下代码
console.log('Hello TS')
  • 保存并修改扩展名为 .ts
  • 进入命令行,输入 tsc 文件名.ts
  • 即可将 ts 文件转换为 js 文件
    image-20210513153653006.png

方式二:使用 VScode 进行编写

  • 打开VScode,新建文件夹
  • 打开终端,输入 tsc --init,引入 ts 编译规则配置文件 tsconfig.json
  • 在 tsconfig.json 文件中修改 "outDir": "./""outDir": "./dist" ,并取消注释
"outDir": "./"/*outDir用来指定输出文件夹,值为一个文件夹路径字符串,输出的文件都将放置在这个文件夹*/
  • 新建文件,文件命名为 hello.ts
  • 输入以下代码
console.log('Hello TS')
  • 点击菜单栏 -> 终端 -> 运行任务 -> 选择当前文件夹 -> tsc 监视 即可
  • 打开监视可实现实时更新 js 文件

image-20210513160024973.png

方式三:使用 WebStorm 进行编写

  • 打开webStorm,新建目录,新建 ts 文件
  • 输入以下代码
console.log('Hello TS')
  • 点击左下角 Terminal 输入 tsc 文件名.ts
  • 即可将 ts 文件转换为 js 文件

image-20210513161210412.png

相关文章
|
8月前
|
JavaScript
TypeScript环境搭建
TypeScript环境搭建
|
JavaScript 前端开发 安全
【typescript入门手册】初识typeScript
【typescript入门手册】初识typeScript
|
8月前
|
JavaScript Shell 资源调度
1.【TypeScript 教程】TypeScript 安装与使用
1.【TypeScript 教程】TypeScript 安装与使用
108 4
|
6月前
|
JavaScript 前端开发 编译器
TypeScript教程(一)在vscode中的配置TypeScript环境
本文是一篇TypeScript入门教程,介绍了在VS Code中配置TypeScript环境的步骤,包括安装Node.js、使用npm安装TypeScript、配置npm镜像源、安装VS Code的TypeScript扩展,以及创建和运行一个简单的TypeScript "Hello World"程序。
TypeScript教程(一)在vscode中的配置TypeScript环境
|
JavaScript 前端开发
TypeScript 教程
TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准( ES6 教程)。 TypeScript 由微软开发的自由和开源的编程语言。 TypeScript 设计目标是开发大型应用,它可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上。
|
8月前
|
JavaScript 前端开发
26.【TypeScript 教程】Truthy 与 Falsy
26.【TypeScript 教程】Truthy 与 Falsy
39 0
|
JavaScript 前端开发
TypeScript 教程
TypeScript 教程
80 0
|
JavaScript 前端开发 Java
|
9月前
|
JavaScript 安全
TypeScript入门视频2h(下)
TypeScript入门视频2h
81 0
|
JavaScript 前端开发 IDE
TypeScript入门
TypeScript入门
161 0

热门文章

最新文章