TypeScript 是 JavaScript 的超集，添加了静态类型检查等特性。但由于浏览器和 Node.js 无法直接运行 TypeScript 代码，我们需要先将其编译为 JavaScript。本文将介绍几种常见的运行 TypeScript 代码的方式，包括使用 tsc 编译器、ts-node、tsx、Bun 以及通过 webpack 搭建开发环境，帮助大家快速上手 TypeScript 开发。

一、基本介绍

1，为什么 TypeScript 需要编译

2，运行 TypeScript 的几种方式

方式	适用场景	特点
tsc	学习、简单脚本	手动编译，步骤较多
ts-node	Node.js 开发调试	直接运行，但启动较慢
tsx	Node.js 开发调试	推荐，启动快，ESM 支持好
Bun	通用开发	原生支持，零配置
webpack/Vite	前端项目	热更新，完整开发环境

二、使用 tsc 手动编译后运行

1，全局安装 TypeScript

# 全局安装最新版本的 TypeScript
npm install -g typescript

# 或安装指定版本
npm install -g typescript@5.3.0

# 查看 tsc 版本
tsc --version

# 或使用简写
tsc -v

2，使用 tsc 编译 TypeScript 代码

function sum(num1: number, num2: number): number {
  return num1 + num2;
}

console.log(sum(10, 20));

tsc math.ts

// math.js - 编译后生成的 JavaScript 代码
function sum(num1, num2) {
  return num1 + num2;
}
console.log(sum(10, 20));

node math.js

3，创建 tsconfig.json 配置文件

tsc --init

{
  "compilerOptions": {
    "target": "ES2020",           // 编译目标版本
    "module": "commonjs",         // 模块系统
    "strict": true,               // 启用严格模式
    "esModuleInterop": true,      // 支持 ES 模块导入
    "skipLibCheck": true,         // 跳过库类型检查
    "outDir": "./dist",           // 输出目录
    "rootDir": "./src"            // 源代码目录
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

三、使用 ts-node 运行 TS 代码

1，安装 ts-node

# 全局安装 ts-node
npm install -g ts-node

# 安装依赖包
npm install -g tslib @types/node

npm install -D ts-node tslib @types/node

2，运行 TypeScript 文件

function greet(name: string): void {
  console.log(`Hello, ${name}!`);
}

greet("TypeScript");

ts-node main.ts

npx ts-node main.ts

四、使用 tsx 运行 TS 代码（推荐）

1，tsx 介绍

2，安装并使用 tsx

# 全局安装
npm install -g tsx

# 或作为开发依赖
npm install -D tsx

# 使用 tsx 运行 TypeScript 文件
tsx main.ts

# 或使用 npx
npx tsx main.ts

tsx watch main.ts

node --import=tsx main.ts

五、使用 Bun 运行 TS 代码

1，Bun 简介

2，安装并使用 Bun

# 使用 curl 安装
curl -fsSL https://bun.sh/install | bash

# 或使用 npm 安装
npm install -g bun

# 使用 bun 运行 TypeScript 文件
bun run main.ts

# 或简写
bun main.ts

{
  "name": "my-project",
  "scripts": {
    "start": "bun run main.ts",
    "dev": "bun --watch main.ts"
  }
}

• 然后执行如下命令运行脚本：

bun start

• 执行如下命令则采用监视模式运行：

bun dev

六、使用 Vue CLI 搭建 TS 运行环境

1，创建 Vue3 + TypeScript 项目

# 创建新项目
vue create my-typescript-project

my-typescript-project/
├── public/
│   └── index.html
├── src/
│   ├── App.vue        # 根组件
│   ├── main.ts        # 入口文件
│   └── shims-vue.d.ts # Vue 文件类型声明
├── tsconfig.json      # TypeScript 配置
└── package.json

2，项目文件说明

// main.ts - 项目入口文件
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

<template>
  <div>Hello TypeScript</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'App'
});
</script>

# 进入项目目录
cd my-typescript-project

# 运行开发服务器
npm run serve

# 或使用 Vite 创建的项目
npm run dev

附、tsconfig.json 常用配置详解

1，核心配置项说明

{
  "compilerOptions": {
    // target: 指定编译后的 JavaScript 版本
    // 常用值: "ES5", "ES6", "ES2020", "ESNext"
    "target": "ES2020",
    
    // module: 指定生成代码的模块系统
    // 常用值: "commonjs", "es6", "esnext", "nodenext"
    "module": "commonjs",
    
    // lib: 指定运行时可用的 API（通常根据 target 自动推断）
    "lib": ["ES2020", "DOM"]
  }
}

{
  "compilerOptions": {
    // strict: 启用所有严格类型检查选项（推荐开启）
    "strict": true,
    
    // noImplicitAny: 禁止隐式 any 类型
    "noImplicitAny": true,
    
    // strictNullChecks: 严格检查 null 和 undefined
    "strictNullChecks": true
  }
}

{
  "compilerOptions": {
    // esModuleInterop: 允许 CommonJS 和 ES Module 互操作
    "esModuleInterop": true,
    
    // moduleResolution: 模块解析策略
    // "node" 适用于 Node.js，"classic" 是旧策略
    "moduleResolution": "node",
    
    // baseUrl: 模块解析的基础路径
    "baseUrl": ".",
    
    // paths: 路径别名映射（类似 webpack alias）
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

{
  "compilerOptions": {
    // outDir: 编译输出目录
    "outDir": "./dist",
    
    // rootDir: 源代码根目录
    "rootDir": "./src",
    
    // sourceMap: 是否生成 sourceMap 文件
    "sourceMap": true,
    
    // declaration: 是否生成 .d.ts 类型声明文件
    "declaration": true
  }
}

2，推荐的配置模板

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "sourceMap": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "jsx": "preserve",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "noEmit": true,
    "lib": ["ESNext", "DOM", "DOM.Iterable"],
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.vue"],
  "exclude": ["node_modules"]
}