视频位置 TypeScript快速梳理_上篇 11:00

浏览器不能直接运⾏ TypeScript 代码，需要编译为 JavaScript 再交由浏览器解析器执⾏。

1. 命令⾏编译

要把 .ts ⽂件编译为 .js ⽂件，需要配置 TypeScript 的编译环境，步骤如下

第⼀步：创建⼀个 demo.ts ⽂件。
例如：

const person = {
    name:'李四',
    age:18
}
console.log(`我叫${person.name}，我今年${person.age}岁了`)

第⼆步：全局安装 TypeScript

npm i typescript -g

第三步：使⽤命令编译 .ts ⽂件

tsc demo.ts

2. ⾃动化编译

第⼀步：创建 TypeScript 编译控制⽂件

tsc --init
  1. ⼯程中会⽣成⼀个 tsconfig.json 配置⽂件，其中包含着很多编译时的配置。
  2. 观察发现，默认编译的 JS 版本是 ES7 ，我们可以⼿动调整为其他版本。

第⼆步：监视⽬录中的 .ts ⽂件变化

tsc --watch 或 tsc -w

第三步：⼩优化，当编译出错时，不要将 ts 转为 .js ⽂件

tsc --noEmitOnError --watch

备注：当然也可以修改 tsconfig.json 中的 noEmitOnError 配置 ★★★

3. 脚手架

如果开发时，使用的是 Vue 或 React 脚手架，那么实际使用的是 webpack 或 vite 完成的自动编译。