如何用JavaScript配置TypeScript？

TypeScript是JavaScript的超集，在开发过程中往往需要结合JavaScript生态的工具和配置来使用。下面将从基础环境准备到具体配置步骤，详细介绍如何通过JavaScript相关的工具链完成TypeScript的配置。

前置环境准备

首先需要确保本地已经安装了Node.js环境，因为后续我们会使用npm（Node.js自带的包管理工具）来安装TypeScript相关依赖。你可以通过以下命令检查Node.js和npm是否正常安装：

# 检查Node.js版本
node -v
# 检查npm版本
npm -v

如果命令返回了对应的版本号，说明环境已经就绪；如果没有安装，需要先到Node.js官方网站下载对应系统的安装包完成安装。

通过npm安装TypeScript

我们可以直接使用npm在项目中安装TypeScript，推荐使用项目局部安装的方式，避免不同项目之间的版本冲突。首先进入你的项目根目录，执行以下命令：

# 初始化项目package.json文件，按照提示填写项目信息即可
npm init -y
# 安装TypeScript作为开发依赖
npm install typescript --save-dev

安装完成后，你会在项目的package.json文件的devDependencies字段中看到typescript的相关版本信息，同时项目根目录下会出现node_modules文件夹。

生成TypeScript配置文件

TypeScript需要一个tsconfig.json配置文件来指定编译规则，我们可以通过TypeScript自带的命令行工具来生成默认配置文件。在项目根目录执行以下命令：

# 调用本地安装的TypeScript的tsc命令生成配置文件
npx tsc --init

执行完成后，项目根目录下会出现tsconfig.json文件，里面包含了大量的默认配置项，你可以根据项目需求修改对应的配置。下面是一个常见的配置示例，附带中文注释说明：

{
  "compilerOptions": {
    // 编译输出的目标JavaScript版本，这里选择ES6
    "target": "ES6",
    // 模块系统，选择Node.js常用的CommonJS
    "module": "CommonJS",
    // 编译输出的文件目录
    "outDir": "./dist",
    // 需要编译的源代码目录
    "rootDir": "./src",
    // 是否生成对应的.d.ts类型声明文件
    "declaration": true,
    // 是否启用严格类型检查
    "strict": true,
    // 是否允许编译JavaScript文件
    "allowJs": true,
    // 是否检查JavaScript文件的类型
    "checkJs": false,
    // 模块解析策略，选择Node.js的解析方式
    "moduleResolution": "Node",
    // 引入ES模块相关的类型声明
    "lib": ["ES6"],
    // 排除不需要编译的文件
    "exclude": ["node_modules", "dist"]
  }
}

结合JavaScript工具配置编译脚本

我们可以在package.json的scripts字段中添加TypeScript相关的编译脚本，方便后续执行编译操作。修改package.json的内容如下：

{
  "name": "typescript-demo",
  "version": "1.0.0",
  "description": "TypeScript配置示例项目",
  "main": "dist/index.js",
  "scripts": {
    // 执行TypeScript编译
    "build": "tsc",
    // 监听文件变化自动编译
    "dev": "tsc --watch"
  },
  "devDependencies": {
    "typescript": "^5.0.0"
  }
}

配置完成后，只需要在命令行执行npm run build就可以编译TypeScript代码，执行npm run dev就可以进入开发模式，实时监听文件变化并自动编译。

编写TypeScript代码并验证配置

接下来我们在项目根目录下创建src文件夹，在里面新建index.ts文件，编写一段简单的TypeScript代码：

// 定义一个字符串类型的变量
const greeting: string = "Hello TypeScript";
// 定义一个函数，接收字符串参数并返回拼接后的字符串
function sayHello(name: string): string {
  return `${greeting}, ${name}`;
}
// 调用函数并输出结果
console.log(sayHello("World"));

然后在命令行执行npm run build，如果配置正确，项目根目录下会出现dist文件夹，里面会生成编译后的index.js文件，内容如下：

"use strict";
// 定义一个字符串类型的变量
const greeting = "Hello TypeScript";
// 定义一个函数，接收字符串参数并返回拼接后的字符串
function sayHello(name) {
    return `${greeting}, ${name}`;
}
// 调用函数并输出结果
console.log(sayHello("World"));

你可以直接执行node dist/index.js，看到控制台输出Hello TypeScript, World，说明整个TypeScript配置已经生效。

额外配置：结合Babel处理TypeScript

如果你的项目已经使用了Babel来处理JavaScript代码，也可以结合Babel来编译TypeScript，不需要使用tsc的编译功能。首先安装相关依赖：

npm install @babel/core @babel/cli @babel/preset-env @babel/preset-typescript --save-dev

然后在项目根目录创建babel.config.json配置文件，内容如下：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript"
  ]
}

接着修改package.json的scripts字段，添加Babel的编译脚本：

{
  "scripts": {
    "build:babel": "babel src --out-dir dist --extensions '.ts,.js'",
    "dev:babel": "babel src --out-dir dist --extensions '.ts,.js' --watch"
  }
}

这样执行npm run build:babel就可以使用Babel来编译TypeScript文件，这种方式更适合已经接入Babel生态的JavaScript项目。

TypeScript配置npm安装TypeScripttsconfig.jsonBabel编译JavaScript工具链 本作品最后修改时间：2026-05-22 14:14:05