怎么将.ts文件转换成.js文件?

怎么将.ts文件转换成.js文件?

要将 .ts 文件转换为 .js 文件,你需要使用 TypeScript 编译器 (tsc)。以下是具体步骤:


1. 安装 TypeScript 编译器

如果尚未安装 TypeScript 编译器,请运行以下命令安装:

bash 复制代码
npm install -g typescript

或者,如果你希望将 TypeScript 编译器作为项目的本地依赖(如你的 package.json 中所示),可以运行:

bash 复制代码
npm install typescript --save-dev

2. 检查 TypeScript 编译器版本

确保 TypeScript 编译器已正确安装,运行以下命令检查版本:

bash 复制代码
tsc --version

如果输出类似以下内容,说明安装成功:

复制代码
Version 5.x.x

3. 编译 .ts 文件

假设你的 TypeScript 文件名为 example.ts,可以运行以下命令将其编译为 JavaScript:

bash 复制代码
npx tsc example.ts

这将在同一目录下生成一个 example.js 文件。


4. 使用 tsconfig.json 配置文件

如果你的项目中有多个 .ts 文件,建议创建一个 tsconfig.json 文件来管理编译配置。

创建 tsconfig.json

在项目根目录运行以下命令:

bash 复制代码
npx tsc --init

这会生成一个默认的 tsconfig.json 文件。你可以根据需要修改配置,例如:

json 复制代码
{
  "compilerOptions": {
    "target": "es6",                // 指定 JavaScript 版本
    "module": "commonjs",           // 指定模块系统
    "outDir": "./dist",             // 输出目录
    "rootDir": "./src",             // 输入目录
    "strict": true                  // 启用严格类型检查
  }
}
编译项目

运行以下命令,TypeScript 编译器会根据 tsconfig.json 的配置编译所有 .ts 文件:

bash 复制代码
npx tsc

这会将 src 目录下的所有 .ts 文件编译到 dist 目录下。


5. 示例

假设你的项目结构如下:

复制代码
tsDemo01/
├── src/
│   └── example.ts
├── dist/
├── package.json
└── tsconfig.json
src/example.ts
typescript 复制代码
const greet = (name: string): string => {
    return `Hello, ${name}!`;
};

console.log(greet("World"));
编译命令

运行以下命令:

bash 复制代码
npx tsc
输出结果

编译后,dist/example.js 文件内容如下:

javascript 复制代码
"use strict";
const greet = (name) => {
    return `Hello, ${name}!`;
};
console.log(greet("World"));

6. 运行生成的 JavaScript 文件

使用 Node.js 运行生成的 .js 文件:

bash 复制代码
node dist/example.js

输出:

复制代码
Hello, World!

总结

  • 使用 npx tsc <filename>.ts 编译单个文件。
  • 使用 tsconfig.json 配置文件管理项目中的所有 .ts 文件。
  • 编译后的 .js 文件可以直接运行在 Node.js 或浏览器环境中。
相关推荐
meilindehuzi_a24 分钟前
Vue3组件样式隔离与组件通信实战:从 scoped、props 校验到记事本应用
前端·javascript·vue.js
lincats30 分钟前
Remotion Skill vs HyperFrames Skill:AI视频圈两大技能包正面交锋,最好的对手,最好的搭档?
typescript·vibe coding·claude code·skills
To_OC8 小时前
我被 useState 坑了两次之后,终于把它的脾气摸透了
前端·javascript·react.js
Web4Browser11 小时前
指纹浏览器 API 自动化怎么接:启动 Profile、获取 CDP 端点并连接自动化框架
前端·网络·typescript·自动化
kyriewen13 小时前
我review了一份Vibe Coding写的前端代码——能跑,但5个地方迟早要命
前端·javascript·ai编程
Hilaku15 小时前
为什么在 2026 年,MPA(多页面应用)正在悄悄复辟?
前端·javascript·程序员
悟空瞎说15 小时前
iOS 高效绘图
javascript
触底反弹16 小时前
🔥 从 MySQL 到 Milvus:用 AI 日记本项目搞懂向量数据库和 RAG
javascript·人工智能·面试
妙码生花16 小时前
从 PHP 到 AI + Golang,程序员自救转型手记(三十九):前端上传组件实现
javascript·vue.js·ai编程