怎么将.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 或浏览器环境中。
相关推荐
冰暮流星20 分钟前
javascript之webstorage用法
开发语言·javascript·ecmascript
执子念的飞鱼37 分钟前
浏览器直接预览 Pages、Numbers、Keynote:iWork 格式真正难在哪
前端·javascript
用户3452081538842 分钟前
我给 DSH 写了读 10x 数据的插件
javascript
执子念的飞鱼1 小时前
70MB Excel 浏览器预览失败:定位 XLSX 重复解压与内存峰值
javascript·性能优化
12.=0.1 小时前
【REVIEW_C】【持续更新】
服务器·前端·javascript
Brown.alexis1 小时前
es6知识点4-自备使用
前端·javascript·es6
Hilaku2 小时前
为什么同一段代码在 Safari 上永远有 Bug?
前端·javascript·程序员
烬羽2 小时前
NestJS 依赖注入:Controller 里那个没有 new 的 service,到底从哪来的?
设计模式·typescript·nestjs
张元清2 小时前
React scrollIntoView + useRef:滚动到指定元素 (2026)
javascript·react.js
渣波2 小时前
NestJS 企业级后端架构实战:从核心代码到工程化思维的深度重构
前端·typescript·nestjs