TypeScript-搭建编译环境

搭建编译环境

TypeScript 编写的代码是无法直接在js引擎( 浏览器 / Nodejs )中运行的，最终还需要经过编译成js代码才可以正常运行

• 搭建手动编译环境

1️⃣ 全局安装 typescript 包（编译引擎） -> 注册 tsc 命令

npm i -g typescript

2️⃣ 新增 demo.ts文件，执行 tsc demo.ts 命令生成 demo.js 文件

3️⃣ 执行 node demo.js 运行 js 文件查看效果

• 搭建工程化下的自动编译环境

基于工程化的TS开发模式( webpack / vite ),TS 的编译环境已经内置，无需手动安装配置。

npm create vite@latest ts-project-demo -- -- template vanilla-ts
//  npm create vite@latest 使用最新版本的 vite 创建项目
//  ts-project-demo 项目名称
//  -- -- template vanilla-ts 项目使用的模板为原生ts模板

总结：

1️⃣ 浏览器中能直接运行TypeScript代码吗？

不可以，需要编译为js代码再运行

2️⃣ 哪个包可以负责把TS代码编译为JS代码？

typescript

3️⃣ 实际工作中需要我们手动编译代码吗？

不需要，由工程化工具内置，自动编译