在当今的前端开发领域，TypeScript 作为 JavaScript 的一个超集，以其强大的类型系统和开发体验深受开发者喜爱。对于新手来说，搭建一个 TypeScript 项目可能会有些挑战，但不用担心，本文将带你从环境配置一步步走到实战案例，让你轻松掌握 TypeScript 项目的搭建。

一、环境配置

1. 安装 Node.js 和 npm

首先，你需要确保你的系统中安装了 Node.js 和 npm（Node.js 包管理器）。你可以从官网下载安装包，或者使用包管理器进行安装。

  • Windows:

    npm install -g nvm
nvm install node

  • macOS/Linux:

    sudo apt-get install nodejs npm

安装完成后，通过命令 node -v 和 npm -v 验证是否安装成功。

2. 安装 TypeScript

接下来，使用 npm 安装 TypeScript：

npm install -g typescript

同样，安装完成后，使用 tsc -v 命令验证 TypeScript 是否安装成功。

3. 配置 TypeScript 配置文件

在项目根目录下创建一个名为 tsconfig.json 的文件，用于配置 TypeScript 编译选项。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

这里，我们设置了一些基本的编译选项，例如目标版本、模块系统、输出目录等。

二、实战案例：创建一个简单的计算器

接下来，我们将通过一个简单的计算器案例来实战 TypeScript。

1. 创建项目结构

首先，创建一个名为 calculator 的文件夹，然后在该文件夹下创建 src 和 dist 两个文件夹。

calculator
├── src
│   └── calculator.ts
└── dist

2. 编写 TypeScript 代码

在 src/calculator.ts 文件中，编写以下 TypeScript 代码：

class Calculator {
  public add(a: number, b: number): number {
    return a + b;
  }

  public subtract(a: number, b: number): number {
    return a - b;
  }

  public multiply(a: number, b: number): number {
    return a * b;
  }

  public divide(a: number, b: number): number {
    return a / b;
  }
}

export default Calculator;

这里，我们定义了一个 Calculator 类，它包含了基本的加减乘除运算。

3. 编译 TypeScript 代码

在项目根目录下，执行以下命令编译 TypeScript 代码：

tsc

编译完成后，src 文件夹下的 TypeScript 文件会被编译成 JavaScript 文件，并输出到 dist 文件夹。

4. 运行计算器

在 dist 文件夹下创建一个名为 index.js 的文件，并编写以下代码：

import Calculator from './calculator';

const calculator = new Calculator();
console.log(calculator.add(2, 3)); // 输出 5
console.log(calculator.subtract(5, 2)); // 输出 3
console.log(calculator.multiply(2, 3)); // 输出 6
console.log(calculator.divide(6, 2)); // 输出 3

执行 node dist/index.js 命令，即可运行计算器。

三、总结

通过本文的讲解，相信你已经学会了如何搭建 TypeScript 项目，并掌握了一个简单的计算器案例。接下来，你可以根据自己的需求，在 TypeScript 的基础上继续深入学习，探索更多有趣的项目。祝你在 TypeScript 之旅中一帆风顺！