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

相关文章
|
JavaScript 前端开发
TypeScript 教程
TypeScript 教程
80 0
|
6月前
|
JavaScript 前端开发 编译器
TypeScript教程(一)在vscode中的配置TypeScript环境
本文是一篇TypeScript入门教程,介绍了在VS Code中配置TypeScript环境的步骤,包括安装Node.js、使用npm安装TypeScript、配置npm镜像源、安装VS Code的TypeScript扩展,以及创建和运行一个简单的TypeScript "Hello World"程序。
TypeScript教程(一)在vscode中的配置TypeScript环境
|
8月前
|
JavaScript Shell 资源调度
1.【TypeScript 教程】TypeScript 安装与使用
1.【TypeScript 教程】TypeScript 安装与使用
108 4
|
8月前
|
JavaScript 编译器
35.【TypeScript 教程】编译选项
35.【TypeScript 教程】编译选项
62 2
|
8月前
|
JavaScript
TypeScript环境搭建
TypeScript环境搭建
|
8月前
|
JavaScript 前端开发
26.【TypeScript 教程】Truthy 与 Falsy
26.【TypeScript 教程】Truthy 与 Falsy
39 0
|
9月前
|
JavaScript 前端开发 安全
【TypeScript技术专栏】TypeScript在Electron桌面应用中的实践
【4月更文挑战第30天】本文介绍了如何在Electron桌面应用中采用TypeScript以提升代码质量和可维护性。Electron利用Chromium和Node.js让前端开发者能创建桌面应用,而TypeScript的强类型系统和高级语言特性有助于管理复杂项目。通过初始化项目、安装依赖、配置TypeScript、编写主进程和渲染进程代码,开发者可以在Electron中实践TypeScript。一个简单的文本编辑器案例展示了TypeScript在确保类型安全方面的优势。尽管有学习成本,但TypeScript对大型Electron项目来说是值得的。
574 0
|
9月前
|
JavaScript 前端开发 编译器
【TypeScript技术专栏】深入理解TypeScript编译过程
【4月更文挑战第30天】TypeScript编译过程包括解析、类型检查、语义分析和代码生成四个步骤。解析阶段将源代码转为AST;类型检查确保代码符合类型规则,捕获类型错误;语义分析检查代码逻辑一致性;最后生成JavaScript代码。这一过程保证了代码的语法、类型和语义正确性,提升开发效率和代码质量。了解此过程有助于开发者更好地理解和解决问题。
120 0
|
9月前
|
JSON JavaScript 前端开发
TypeScript笔记(2)—— 使用VSCode实时编译TypeScript代码
TypeScript笔记(2)—— 使用VSCode实时编译TypeScript代码
366 0
|
9月前
|
JavaScript 安全
TypeScript入门视频2h(下)
TypeScript入门视频2h
81 0

热门文章

最新文章