搭建 TypeScript 项目对于新手来说可能有些挑战，但只要掌握了正确的步骤，整个过程其实可以变得相当简单。下面，我将带你一步步完成从基础配置到环境搭建的全过程。

一、准备工作

在开始之前，请确保你的电脑上已经安装了以下软件：

  1. Node.js 和 npm：TypeScript 是基于 Node.js 的，因此你需要安装 Node.js 和 npm（Node.js 包管理器）。
  2. Visual Studio Code：推荐使用 Visual Studio Code 作为代码编辑器，它对 TypeScript 提供了良好的支持。

你可以通过以下链接下载和安装：

二、创建项目

  1. 打开终端（Windows 上是命令提示符或 PowerShell，macOS/Linux 上是终端）。
  2. 使用 npm init 命令创建一个新的 npm 项目。按照提示输入项目名称、版本号、描述等信息。
npm init -y

这里 -y 参数表示自动填充默认值。

  1. 在项目目录下，使用 npm install typescript 命令安装 TypeScript。
npm install typescript --save-dev

--save-dev 参数表示将 TypeScript 添加到 package.json 文件的 devDependencies 部分。

三、配置 TypeScript

  1. 在项目根目录下，使用 npx tsc --init 命令创建一个 tsconfig.json 文件。
npx tsc --init

  1. 在弹出的配置界面中，根据需要填写以下信息：

    • 编译器选项：如输出目录、模块目标等。
    • 源映射：是否启用源映射。
    • 严格模式：是否启用严格模式。
    • 模块解析器：如模块解析策略等。

  2. 保存并关闭配置文件。

四、编写 TypeScript 代码

  1. 在项目根目录下创建一个名为 src 的文件夹。
  2. 在 src 文件夹下创建一个名为 index.ts 的文件。
  3. 编写 TypeScript 代码，例如：
function greet(name: string): string {
  return `Hello, ${name}!`;
}

console.log(greet('World'));
  1. 使用 tsc 命令编译 TypeScript 代码。
tsc

编译完成后，会在项目根目录下生成一个 dist 文件夹，其中包含编译后的 JavaScript 代码。

五、运行项目

  1. 在终端中，进入项目根目录。
  2. 使用 node dist/index.js 命令运行项目。
node dist/index.js

如果你看到输出 Hello, World!，说明项目已经成功运行。

六、总结

通过以上步骤，你已经成功搭建了一个 TypeScript 项目。接下来，你可以根据自己的需求，继续添加更多功能，例如使用模块、引入第三方库等。

希望这篇文章能帮助你快速上手 TypeScript 项目。如果你在搭建过程中遇到任何问题，欢迎在评论区留言交流。