怎么将.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 或浏览器环境中。
相关推荐
放下华子我只抽RuiKe57 小时前
React 从入门到生产(四):自定义 Hook
前端·javascript·人工智能·深度学习·react.js·自然语言处理·前端框架
XinZong8 小时前
OpenClaw 实现双重心跳(Heartbeat)+ clawreach虾聊项目实现
javascript
idcu9 小时前
深入 Lyt.js 组件系统:L2 渲染引擎层的核心
前端·typescript
还有多久拿退休金10 小时前
一张栈的图,治好你面试答不出 script 阻塞的病
前端·javascript
zithern_juejin10 小时前
原型与原型链
javascript
阿正的梦工坊12 小时前
【Typescript】08-keyof-typeof-索引访问类型
linux·ubuntu·typescript
008爬虫实战录12 小时前
【码上爬】 题十二:如来神掌 困难, JSVMP加密,使用代理补环境
前端·javascript·node.js
threelab12 小时前
Three.js 数学函数着色器 | 三维可视化 / AI 提示词
javascript·人工智能·着色器
ZC跨境爬虫14 小时前
跟着 MDN 学CSS day_3:(为一个传记页面添加样式)
前端·javascript·css·ui·音视频·html5
夜雪闻竹14 小时前
sql.js WASM 实战:浏览器里跑 SQLite
javascript·sql·wasm