36 使用TypeScript构建项目 🛠️之常见项目模板

在上一章中，我们讨论了如何为我们的 TypeScript 项目设置构建脚本和工具链。在本章中，我们将深入探讨一些常见的项目模板，帮助你快速启动和构建自己的 TypeScript 项目。我们将会创建的示例包括一个基本的 Node.js 应用程序模板，和一个前端应用程序模板（如基于 React 的项目）。通过这些示例，你将能更好地理解如何结构化 TypeScript 项目，以及如何利用已有的工具和库。

1. Node.js 应用程序模板

Node.js 是使用 TypeScript 的流行后端项目之一。在创建一个 Node.js 应用程序时，我们通常希望有一个良好的目录结构、配置文件以及开发和生产环境的设置。

1.1 项目结构

通常的 Node.js 应用程序目录结构如下所示：

my-typescript-app/
├── src/
│   ├── controllers/
│   ├── models/
│   ├── routes/
│   └── index.ts
├── dist/
├── node_modules/
├── package.json
├── tsconfig.json
└── tslint.json

1.2 创建基础模板

我们可以使用 npm init 创建一个新的 Node.js 项目，然后安装 TypeScript 和其他依赖：

mkdir my-typescript-app
cd my-typescript-app
npm init -y
npm install typescript ts-node @types/node express @types/express --save
npx tsc --init

tsconfig.json 文件的配置可以如下：

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

1.3 代码示例

在 src/index.ts 中，我们可以写一个简单的 Express 服务器：

import express from 'express';

const app = express();
const PORT = process.env.PORT || 3000;

app.get('/', (req, res) => {
  res.send('Hello TypeScript with Express!');
});

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

现在，我们可以使用 ts-node 来运行这个应用。

npx ts-node src/index.ts

这样，我们就创建了一个基础的 Node.js 应用程序模板，能够快速启动并运行。

2. React 应用程序模板

在前端开发中，TypeScript 与 React 几乎是完美的结合。接下来，我们来看如何创建一个 React 应用程序模板。

2.1 使用 Create React App

最简单的方式是使用 Create React App 创建一个新的项目，并选择 TypeScript 模板：

npx create-react-app my-react-app --template typescript
cd my-react-app

2.2 项目结构

创建完成后，项目结构如下：

my-react-app/
├── node_modules/
├── public/
├── src/
│   ├── App.tsx
│   ├── index.tsx
│   ├── react-app-env.d.ts
│   └── styles.css
├── package.json
├── tsconfig.json
└── yarn.lock / package-lock.json

2.3 代码示例

修改 src/App.tsx 来创建一个简单的应用：

import React from 'react';

const App: React.FC = () => {
  return (
    <div>
      <h1>Hello TypeScript with React!</h1>
    </div>
  );
};

export default App;

2.4 启动应用

使用以下命令来启动开发服务器：

npm start

打开浏览器访问 http://localhost:3000，你应该能看到 “Hello TypeScript with React!” 的消息。

3. 模板的通用性

在使用 TypeScript 创建项目模板时，以下几点值得注意：

• 再利用性：你可以把上面创建的 Node.js 和 React 模板转换为一个可以复制和共享的模板。
• 配置：确保 tsconfig.json、package.json 和其他配置文件适应你团队的开发规范。
• 版本控制：在开始一个新项目时，可以将模板推送到 Git 仓库，这样任何团队成员都可以快速克隆这个模板。

小结

在本章中，我们学习了如何创建和使用 TypeScript 项目的常见模板，包括 Node.js 和 React 应用程序。通过这些模板，你可以快速启动新项目，并建立良好的代码结构和开发环境。在下一章，我们将探索如何编写单元测试，以保证代码质量和稳定性。准备好了吗？让我们继续前进！