TypeScript 转 JavaScript：完整转换指南

将 TypeScript 转换为 JavaScript 是发布 npm 包、支持旧环境或从生产包中移除类型开销时的常见任务。本指南涵盖 TypeScript 编译器（tsc）、Babel、esbuild、在线转换工具、枚举处理、项目迁移策略和最佳实践。

试用我们免费的在线 TypeScript 转 JavaScript 转换器。

为什么要将 TypeScript 转换为 JavaScript？

TypeScript 是 JavaScript 的超集，添加了静态类型检查、接口、枚举、泛型等特性。但浏览器和 Node.js 运行时执行的是 JavaScript，每个 TypeScript 文件必须编译为 JavaScript 才能运行。

常见的 TS 转 JS 场景包括：发布必须在纯 JavaScript 项目中工作的 npm 库、部署到不原生支持 TypeScript 的环境、调试编译输出、从遗留项目中迁移 TypeScript、以及简化小脚本的构建复杂度。

理解转换过程中的变化有助于编写更好的 TypeScript。类型注解、接口、类型别名和 declare 块会被完全擦除。枚举、装饰器、类字段和命名空间声明会生成运行时 JavaScript 代码。

被移除的内容：类型 vs 运行时代码

转换 TypeScript 到 JavaScript 时，理解哪些特性被擦除、哪些生成运行时代码至关重要：

TypeScript 转 JavaScript 的方法

方法 1：TypeScript 编译器（tsc）

官方 TypeScript 编译器是最可靠的转换方式，在生成 JavaScript 前执行完整的类型检查：

# Install TypeScript
npm install -D typescript

# Create tsconfig.json
npx tsc --init

# tsconfig.json key settings for conversion
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "outDir": "./dist",
    "rootDir": "./src",
    "declaration": true,       // Generate .d.ts files
    "sourceMap": true,          // Generate source maps
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*"]
}

# Compile single file
npx tsc src/app.ts --outDir dist

# Compile entire project
npx tsc

# Type-check only (no output)
npx tsc --noEmit

方法 2：Babel + @babel/preset-typescript

Babel 在不执行类型检查的情况下去除 TypeScript 类型，构建速度更快：

# Install Babel with TypeScript preset
npm install -D @babel/core @babel/cli @babel/preset-typescript

# babel.config.json
{
  "presets": ["@babel/preset-typescript"]
}

# Compile a single file
npx babel src/app.ts --out-file dist/app.js --extensions ".ts,.tsx"

# Compile entire directory
npx babel src --out-dir dist --extensions ".ts,.tsx"

# Note: Babel does NOT type-check!
# Run tsc separately for type safety:
npx tsc --noEmit && npx babel src --out-dir dist --extensions ".ts,.tsx"

方法 3：esbuild（最快）

esbuild 是用 Go 编写的极速 JavaScript 打包工具，原生支持 TypeScript：

# Install esbuild
npm install -D esbuild

# Bundle a TypeScript entry point to JavaScript
npx esbuild src/app.ts --bundle --outfile=dist/app.js --platform=node

# Transpile without bundling (preserves module structure)
npx esbuild src/**/*.ts --outdir=dist --format=esm

# Watch mode for development
npx esbuild src/app.ts --bundle --outfile=dist/app.js --watch

# Build with minification for production
npx esbuild src/app.ts --bundle --minify --outfile=dist/app.min.js

方法 4：在线转换器

对于快速的一次性转换，在线转换器让你粘贴 TypeScript 代码并立即查看 JavaScript 输出。

在 JavaScript 中处理 TypeScript 枚举

TypeScript 枚举是少数几个生成运行时 JavaScript 代码的 TypeScript 特性之一：

// === TypeScript: Numeric enum ===
enum Direction {
  Up,      // 0
  Down,    // 1
  Left,    // 2
  Right    // 3
}

// === Compiled JavaScript ===
var Direction;
(function (Direction) {
    Direction[Direction["Up"] = 0] = "Up";
    Direction[Direction["Down"] = 1] = "Down";
    Direction[Direction["Left"] = 2] = "Left";
    Direction[Direction["Right"] = 3] = "Right";
})(Direction || (Direction = {}));
// Direction[0] === "Up"   (reverse lookup)
// Direction.Up === 0      (forward lookup)

// === TypeScript: String enum ===
enum Color {
  Red = "#FF0000",
  Green = "#00FF00",
  Blue = "#0000FF"
}

// === Compiled JavaScript ===
var Color;
(function (Color) {
    Color["Red"] = "#FF0000";
    Color["Green"] = "#00FF00";
    Color["Blue"] = "#0000FF";
})(Color || (Color = {}));
// No reverse mapping for string enums

// === TypeScript: const enum (inlined) ===
const enum Status {
  Active = "ACTIVE",
  Inactive = "INACTIVE"
}
const s = Status.Active;

// === Compiled JavaScript (const enum is inlined) ===
const s = "ACTIVE"; // enum declaration removed entirely

数字枚举编译为 IIFE，创建双向映射对象。

字符串枚举编译为简单的正向映射对象。

const 枚举默认在使用处内联，声明被完全移除。使用 --preserveConstEnums 保留运行时对象。

保持运行时行为

转换时某些模式需要特别注意以保持正确的运行时行为：

可选链和空值合并：?. 和 ?? 是标准 JavaScript（ES2020）。

参数属性：constructor(public name: string) 生成构造函数中的赋值语句。

// === TypeScript: Parameter properties ===
class User {
  constructor(
    public name: string,
    private age: number,
    readonly id: string
  ) {}
}

// === Compiled JavaScript ===
class User {
  constructor(name, age, id) {
    this.name = name;
    this.age = age;
    this.id = id;
  }
}

// === TypeScript: import type (always erased) ===
import type { UserType } from './types';  // Erased completely
import { createUser } from './utils';     // Kept (runtime value)

导入擦除：TypeScript 自动移除仅用作类型的导入。使用 import type 明确标记。

项目迁移：TypeScript 到 JavaScript

将整个项目从 TypeScript 迁移到 JavaScript 是一项较大的工作：

TypeScript 转 JavaScript 最佳实践

用 tsc 保证正确性，用 esbuild 提升速度：CI 中运行 tsc --noEmit 进行类型检查，开发中使用 esbuild 快速构建。

设置正确的 target：tsconfig.json 中的 target 决定输出的 JavaScript 版本。

使用 module: "ESNext" 支持 tree shaking。

使用 import type 处理仅类型导入。

谨慎使用枚举：考虑用联合类型替代枚举，联合类型会被完全擦除。

测试编译输出：始终对编译后的 JavaScript 运行测试。

使用 source maps：启用 sourceMap: true 以便调试。

相关工具：JSON 转 TypeScript、JSON 格式化器、Diff 比较器。

TypeScript to JavaScriptJSON to TypeScriptJSON FormatterDiff Checker

常见问题

可以在线将 TypeScript 转换为 JavaScript 吗？

可以。我们的免费在线工具支持所有 TypeScript 特性，包括泛型、枚举、接口、类型别名和装饰器，无需安装任何工具。

tsc、Babel 和 esbuild 有什么区别？

tsc 是官方编译器，执行完整类型检查，最正确但最慢。Babel 去除类型不检查，更快。esbuild 用 Go 编写，是最快的选择（比 tsc 快 10-100 倍），也不检查类型。

接口和类型别名转换后会怎样？

接口和类型别名在编译时被完全擦除，不生成任何 JavaScript 输出。只有枚举、装饰器和命名空间声明会产生 JavaScript 代码。

TypeScript 枚举如何编译为 JavaScript？

数字枚举编译为双向映射对象的 IIFE。字符串枚举编译为正向映射对象。const 枚举的值在使用处内联。

应该将现有 TypeScript 项目转换为 JavaScript 吗？

大多数情况下不建议。TypeScript 为代码质量和重构安全性提供重大好处。仅在项目很小、团队无 TypeScript 经验或需要发布预编译库时考虑转换。

理解什么被擦除（类型、接口、别名）和什么生成运行时代码（枚举、装饰器、命名空间）后，TypeScript 到 JavaScript 的转换就很简单。使用 tsc 保证正确性，esbuild 提升速度，在线转换器处理快速任务。

使用我们的免费在线工具即时将 TypeScript 转换为 JavaScript。

Related Developer Tools and Guides

• TypeScript to JavaScript Converter - Convert TS to JS online instantly
• JSON to TypeScript Converter - Generate TypeScript interfaces from JSON
• JSON Formatter - Format and validate JSON data
• Diff Checker - Compare TypeScript and JavaScript output
• JSON to Go Converter - Create Go structs from JSON
• JSON to Kotlin Converter - Generate Kotlin data classes
• Regex Tester - Test regular expressions online
• Base64 Encoder/Decoder - Encode and decode Base64
• JSON to TypeScript Guide - Complete guide to generating TS interfaces
• TypeScript vs JavaScript - When to use TypeScript