从零开始搭建TypeScript项目：详细步骤助你入门

项目 2026-06-05 0°

准备工作

在开始搭建TypeScript项目之前，你需要确保以下准备工作已经完成：

安装Node.js：TypeScript 是基于 Node.js 的，因此你需要安装 Node.js 环境。可以从 Node.js 官网下载并安装。
安装 TypeScript：在命令行中运行以下命令来全局安装 TypeScript：
```
npm install -g typescript
```
了解 TypeScript 基础：虽然本文将逐步引导你搭建项目，但了解 TypeScript 的基本概念和语法将有助于你更好地理解后续步骤。

创建项目目录

创建项目文件夹：在命令行中，选择你想要存放项目的目录，并创建一个新的文件夹，例如：
```
mkdir my-typescript-project
cd my-typescript-project
```
初始化项目：在项目目录中，运行以下命令来初始化一个新的 Node.js 项目：
```
npm init -y
```
这将创建一个 package.json 文件，其中包含了项目的基本信息。

配置 TypeScript

创建 tsconfig.json 文件：在项目根目录下，创建一个名为 tsconfig.json 的文件。这个文件将配置 TypeScript 编译器。
```
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}
```
这段配置指定了编译目标为 ES5，模块为 CommonJS，并开启了严格模式。
创建 src 目录：在项目根目录下创建一个名为 src 的文件夹，用于存放 TypeScript 代码。

编写 TypeScript 代码

创建 index.ts 文件：在 src 目录下创建一个名为 index.ts 的文件，这是项目的入口文件。
```
console.log('Hello, TypeScript!');
```
编译 TypeScript 代码：在命令行中，运行以下命令来编译 TypeScript 代码：
```
tsc
```
这将生成一个 index.js 文件，它是编译后的 JavaScript 代码。

运行项目

运行 JavaScript 代码：在命令行中，运行以下命令来运行项目：
```
node index.js
```
你应该会在控制台看到输出：“Hello, TypeScript!”

扩展项目

现在你已经成功搭建了一个简单的 TypeScript 项目，你可以根据需要添加更多的功能，例如：

引入模块
使用类和接口
使用装饰器
使用异步函数

通过不断学习和实践，你可以掌握 TypeScript 的更多高级特性，并将其应用到实际项目中。

总结

通过以上步骤，你已经从零开始搭建了一个 TypeScript 项目。这个过程虽然简单，但却是学习 TypeScript 和前端开发的重要一步。希望这篇文章能帮助你入门 TypeScript，并开启你的前端开发之旅。