利用VSCode任务让ts自动转js

1.首先在ts项目目录下运行

tsc --init

创建tsconfig.json文件,然后根据自己的需要进行修改,比如输入输出目录,包含的库等等。

大致内容如下:

{
  "compilerOptions": {
    "module": "commonjs",
    "lib": [ "dom", "es5", "es2015.promise"],
    "target": "es5",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "outDir": "./dist",                
    "rootDir": "./src",
  },
  "include": ["./src/**/*"],
  "exclude": [
    "node_modules",
    "library",
    "local",
    "temp",
    "build",
    "settings"
  ],
}

2.设置一下vscode的监视任务,当ts文件变化时,则会自动编译同步更新js文件

菜单栏选择 终端(Terminal)->运行任务(Run Task)

选择 “tsc:监视 -tsconfig.json ”,没有就点击 “显示所有任务(Show All Tasks...)”

这样每次ts代码变化的时候,js也会同步更新。

### 在 VSCode 中配置和运行 TypeScript 文件 #### 安装必要的扩展和工具 为了顺利在 Visual Studio Code (VSCode) 编写并执行 TypeScript 代码,安装官方提供的 TypeScriptJavaScript 扩展包是必需的操作[^1]。此外,确保全局安装 `ts-node` 工具可以简化命令行下直接运行 `.ts` 文件的过程[^2]。 #### 创建项目结构与初始化设置 建立一个新的工作区或打开已有项目,在根目录通过命令 `tsc --init` 初始化 TypeScript 的编译选项配置文件 `tsconfig.json`。此操作会创建默认的编译参数设定,适用于大多数场景下的开发需求。 #### 使用 ts-node 运行单个脚本 对于简单的测试或是独立的小型应用程序来说,可以直接利用 `ts-node` 来即时解释执行 TypeScript 源码而无需预先编译成 JavaScript 版本。只需切换至集成终端内键入如下指令即可完成指定 `.ts` 文件的快速启动: ```bash ts-node <filename>.ts ``` #### 设置调试模式 当涉及到更复杂的业务逻辑或者希望获得更好的错误追踪体验时,则推荐采用内置调试器来进行断点调试等工作流优化措施。编辑 launch.json 添加特定于项目的调试配置项,例如指明主程序入口为 `${workspaceRoot}/dist/main.js` ,这通常是指向由 TypeScript 换后的同名 JS 输出路径[^3]。 ```json { "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Launch Program", "program": "${workspaceFolder}/src/index.ts", // 修改为你自己的源文件位置 "outFiles": ["${workspaceFolder}/dist/**/*.js"], "preLaunchTask": "npm: build" } ] } ``` 上述 JSON 片段展示了如何定义一个名为 “Launch Program” 的调试方案,并关联了一个预启动构建任务来保证每次调试前都拥有最新的编译成果。 #### 自动化编译流程 为了让开发者专注于编码本身而非频繁手动触发编译过程,可以在 package.json 中加入 watch mode 或者借助其他辅助插件实现增量式的实时同步更新机制。比如添加 `"start": "tsc-watch --onSuccess \"node dist\""` 至 scripts 字段里,这样每当保存修改过的 .ts 文件之后就会自动重新编译并立即重启应用服务。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值