TypeScript的环境配置与简单使用

搭建手动编译环境(Visual Studio Code)

1. 全局安装typescript包（编译引擎，将ts代码编译成js代码）-> 注册tsc命令

   1. npm install typescript -g

2. 新增test.ts文件，执行

   tsc test.ts

   命令生成test.js文件
3. 执行

   node test.js

   运行js文件查看效果

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

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

生成的自动化的TS编译环境

npm create vite@latest ts-pro -- --template vanilla-ts

启动vite：

• cd ts-pro

• npm install

• npm run dev

编写TS代码：

• 在src中找到main.ts
• 书写代码即可

示例：

var x: number;
for (var i = 1; i <= 10; i++) {
  x = i;
  console.log(x);
}

（一定要保存）

命令说明：

1. npm create vite@latest：使用最新版的vite创建项目
2. ts-pro：项目的名称（可以随便取）
3. -- --template vanilla-ts：创建项目为原生的ts模板