1.5 如何设置一个 TypeScript 项目？

在现代 Web 开发的世界中，TypeScript 已成为 JavaScript 的强大超集，凭借其静态类型检查和完善的开发工具链，受到了越来越多开发者的青睐。TypeScript 的强类型系统可以在开发阶段捕捉潜在错误，从而编写出更可维护、更可扩展的代码。

无论你是从零开始构建新项目，还是在现有 JavaScript 项目中集成 TypeScript，正确地搭建 TypeScript 项目结构，是实现长期可持续开发的关键。

一、前置条件

在开始搭建 TypeScript 项目前，请确保你的开发环境已安装以下工具：

• Node.js：TypeScript 运行依赖于 Node.js。
• npm（Node 包管理器）：用于管理项目依赖项。

二、搭建 TypeScript 项目的步骤

第一步：安装 Node.js 与 npm

你可以从 Node.js 官网 下载并安装 Node.js，npm 会自动随之安装。

安装完成后，在命令行中运行以下命令，验证安装是否成功：

node -v
npm -v

第二步：初始化项目

打开终端，进入你希望创建项目的目录，并执行以下命令初始化项目：

npm init -y

这会在当前目录下生成一个默认配置的 package.json 文件。

第三步：安装 TypeScript

使用以下命令将 TypeScript 作为开发依赖安装到你的项目中：

npm install typescript --save-dev

安装完成后，你可以在 package.json 的 devDependencies 字段中看到如下内容：

"devDependencies": {
  "typescript": "^5.4.5"
}

第四步：生成 TypeScript 配置文件

运行以下命令生成 tsconfig.json 配置文件：

npx tsc --init

该文件用于配置 TypeScript 编译器的行为，包括目标 JavaScript 版本、是否启用严格模式、是否允许 ES 模块导入等内容。

第五步：创建第一个 TypeScript 文件

在项目根目录下新建一个名为 index.ts 的文件，并编写如下示例代码：

// index.ts

const greeting: string = "Hello, GeeksforGeeks!";
console.log(greeting);

在这个例子中，我们声明了一个类型为 string 的常量变量 greeting，并将其值设为一段字符串。随后使用 console.log() 输出到终端。

第六步：编译并运行项目

接下来，我们通过以下命令将 TypeScript 编译为 JavaScript，并运行：

npx tsc        # 编译 TypeScript
node index.js  # 运行编译生成的 JavaScript 文件

运行结果如下：

Hello, GeeksforGeeks!

说明 TypeScript 项目已经配置完成，代码可以正常编译并执行。

三、项目结构示意图

typescript-project/
├── index.ts            # 主 TypeScript 文件
├── index.js            # 编译后生成的 JavaScript 文件
├── tsconfig.json       # TypeScript 配置文件
└── package.json        # 项目依赖管理文件

四、下一步建议

现在你已经成功搭建了一个 TypeScript 项目，是时候开始真正的开发了！你可以继续探索 Top 15 个 TypeScript 项目实践，例如：

• 密码生成器
• 拖放式任务列表
• 简单的聊天应用
• 图表仪表盘等

这些项目不仅能巩固你对 TypeScript 的理解，还能提升你在真实场景下的开发能力。

总结

本文我们从零开始，详细讲解了如何搭建一个 TypeScript 项目，包括环境准备、依赖安装、配置文件生成、编写代码、编译与运行等完整流程。希望这篇文章能帮助你迈出 TypeScript 开发的第一步，为后续深入学习打下坚实基础。

如果你觉得这篇文章有帮助，不妨分享给你的开发者朋友，或者点个赞支持一下！