【TypeScript篇】TypeScript命令行编译和自动化编译

目录

[1. 命令行编译](#1. 命令行编译)

步骤一:创建一个demo.ts文件

步骤二:全局安装TypeScript

步骤三:使用命令编译.ts文件

[2. 自动化编译](#2. 自动化编译)

步骤一:生成编译控制文件

步骤二:开启监视

[3. 自动化编译的一些其它问题](#3. 自动化编译的一些其它问题)


1. 命令行编译

要把.ts文件编译为.js文件,需要配置TypeScript的编译环境,例子步骤如下:

步骤一:创建一个demo.ts文件

TypeScript 复制代码
const person ={
    name:'张三',
    age:20
}
console.log(`我叫${person.name},我的年龄为${person.age}岁`)

步骤二:全局安装TypeScript

TypeScript 复制代码
npm i typescript -g

步骤三:使用命令编译.ts文件

复制代码
tsc demo.ts

2. 自动化编译

当我们每次修改ts文件时,它对应编译的js文件并不会实时更新,所以我们每次修改ts文件后需要手动使用"tsc 你的文件名.ts"命令进行编译。这样太过麻烦了,以至于产生了自动化编译。

步骤一:生成编译控制文件

使用命令"tsc --init"后,会在我们的目录下边生成一个tsconfig.json配置文件,在这个配置文件中我们规定ts如何转成js。例如:开不开起严格模式、遇到错误应该做什么处理。

TypeScript 复制代码
tsc --init

生成配置界面:

步骤二:开启监视

监视分为俩种:

第一种:可以监视当前目录下所有ts文件

第二种:监视某一个ts文件

当监视开启后,对应的ts文件一旦发生变化,则会自动编译生成对应的js文件。

监视当前目录下所有的ts文件:

TypeScript 复制代码
tsc --watch

监视当前目录下某一个文件(这里我的监视文件为demo.ts):

TypeScript 复制代码
tsc --watch demo.ts

我的开启界面:

3. 自动化编译的一些其它问题

当你开启监视后,无论**你的ts文件是否对错,它都会自动给你生成js文件。**那么我想让ts文件出错时不生成对应的js文件怎么办呢?这时需要我们在生成的编译控制文件中将"noEmitOnError"解开注释。

noEmitOnError:当发生错误时,不对文件进行编译。

相关推荐
Kel34 分钟前
Node.js 单线程高并发:从内核中断到 JS 回调的完整技术栈
设计模式·架构·node.js
腻害兔2 小时前
【若依项目-产品经理视角】深度拆解 RuoYi-Vue-Pro 认证与权限:RBAC + 数据权限,这套“门禁系统“到底怎么设计的?
java·vue.js·人工智能·产品经理·ai编程
大家的林语冰2 小时前
🫡 见证历史,TypeScript 7 重写成功,VS Code 原地起飞,GitHub 第一语言联手 Go 破而后立!
前端·javascript·typescript
李明卫杭州3 小时前
Vue2 数组响应式为什么总"不更新"?深入源码对比 Vue3 的 Proxy 改造
前端·javascript·vue.js
霸道流氓气质4 小时前
SpringBoot+Vue通过ModbusTCP协议实现PLC 设备连接、重连实时控制
vue.js·spring boot·后端
咖啡无伴侣4 小时前
Vue3 DOM 异步更新与性能优化全套学习笔记
前端·vue.js
sugar__salt5 小时前
Vue3 基础知识点整理 —— 从入门到响应式核心完全指南
vue.js·笔记·vue·vue3
张人玉5 小时前
基于 Vue 3 + ECharts + Express + SQLite 的世界数据可视化大屏系统——世界态势数据可视化大屏
vue.js·echarts·express
触底反弹16 小时前
🔥 保姆级教程|SSE + BFF + 跨域三件套,从零实现 ChatGPT 流式输出(附完整代码)
人工智能·node.js·vite
腻害兔1 天前
【若依项目-产品经理视角】深度拆解 RuoYi-Vue-Pro 框架层:15 个 Starter 到底在干什么?
前端·vue.js·产品经理·ai编程