33 使用TypeScript构建项目 🛠️之项目结构与配置文件

在上节中，我们深入探讨了Promise的异步编程特性，学习了如何处理多个并发的Promise。本节将带您了解如何使用TypeScript构建一个项目，重点关注项目的结构与配置文件的设置，这将为您下一步使用npm管理依赖打下坚实的基础。

项目结构

一个良好的项目结构可以帮助您更好地组织代码，提高可读性和可维护性。在使用TypeScript构建项目时，推荐的基本项目结构大致如下：

my-typescript-project/
├── src/
│   ├── index.ts
│   ├── components/
│   │   ├── ComponentA.ts
│   │   └── ComponentB.ts
├── dist/
├── tests/
│   ├── ComponentA.test.ts
│   └── ComponentB.test.ts
├── package.json
├── tsconfig.json
└── README.md

目录解析

• src/：存放源代码，所有的TypeScript文件都放在这里。
• dist/：编译后的输出文件，一般存放.js文件。
• tests/：存放测试文件，建议保持与源代码相似的结构。
• package.json：描述项目的配置文件，管理依赖及scripts。
• tsconfig.json：TypeScript编译器的配置文件。
• README.md：项目说明文档。

tsconfig.json配置

tsconfig.json是TypeScript项目中一个非常重要的配置文件，用于定义项目的编译选项。以下是一个典型的tsconfig.json示例：

{
  "compilerOptions": {
    "target": "ES6",                     // 指定 ECMAScript 目标版本
    "module": "commonjs",                // 使用的模块类型
    "strict": true,                       // 开启所有严格类型检查选项
    "esModuleInterop": true,              // 启用`esModule`默认导入
    "outDir": "./dist",                  // 输出目录
    "rootDir": "./src",                  // 根目录
    "skipLibCheck": true                  // 跳过库文件检查
  },
  "include": ["src/**/*"],                // 包含需要编译的文件
  "exclude": ["node_modules", "**/*.spec.ts"] // 排除项
}

配置项详解

• target：指定使用的JavaScript版本。在这个例子中，使用ES6。
• module：指定使用的模块系统，一般常用commonjs或ESNext。
• strict：开启所有严格类型检查选项，以提高代码质量。
• esModuleInterop：设置为true，使得ES模块可以和CommonJS模块良好互操作。
• outDir与rootDir：用于指定源文件和输出文件的目录。

创建我们的第一个 TypeScript 项目

下面，我们来快速创建一个简单的TypeScript项目。

1. 初始化项目

在命令行中创建项目目录并初始化：

mkdir my-typescript-project
cd my-typescript-project
npm init -y

这将创建一个新的package.json文件。

2. 安装 TypeScript

使用以下命令安装TypeScript：

npm install typescript --save-dev

3. 创建 tsconfig.json

在项目根目录中创建tsconfig.json文件，可以使用以下命令：

npx tsc --init

然后根据上述示例修改生成的tsconfig.json。

4. 编写源码

在src/目录下创建一个index.ts文件并添加如下内容：

// src/index.ts
const greet = (name: string): string => {
  return `Hello, ${name}!`;
};

console.log(greet("World"));

5. 编译项目

在命令行中执行以下命令来编译项目：

npx tsc

您将会看到dist/目录中生成了相应的.js文件。

6. 运行项目

使用node运行编译后的代码：

node dist/index.js

输出结果应该为：

Hello, World!

小结

本章介绍了如何创建TypeScript项目的基本结构，以及如何配置tsconfig.json来符合项目需要。在下一章，我们将深入探讨如何使用npm管理项目中的依赖，这将使我们的项目更加整洁和模块化。

通过良好的项目结构和清晰的配置，您将更容易地进行开发和维护。在面向未来的开发中，遵循这些最佳实践将使您受益匪浅。