3.1 Структура проекта
Организация структуры является очень важным аспектом разработки любого проекта. Хорошо организованная структура облегчает навигацию по коду, упрощает поддержку и улучшает командную работу.
В этой лекции мы рассмотрим рекомендации по организации структуры TypeScript проекта и приведем примеры, которые помогут вам создавать структурированные и легко поддерживаемые проекты.
Принципы организации структуры проекта
- Четкая и логичная структура: разделяйте код на модули и папки в соответствии с функциональными областями или слоями приложения.
- Согласованность: следуйте единообразным правилам наименования и организации файлов и папок.
- Модульность: стремитесь к созданию модульного кода, который легко переиспользовать и тестировать.
- Минимизация связности: сведите к минимуму зависимости между модулями, чтобы облегчить их тестирование и модификацию.
- Документация и комментарии: поддерживайте код хорошо документированным, чтобы облегчить его понимание и сопровождение.
Основные директории и файлы
При организации TypeScript проекта обычно выделяют несколько основных директорий и файлов:
- src: содержит исходный код проекта
- tests: содержит тесты
- dist: содержит скомпилированный код (не добавляется в репозиторий)
- node_modules: содержит установленные зависимости (не добавляется в репозиторий)
- package.json: содержит метаданные проекта и список зависимостей
- tsconfig.json: содержит конфигурацию TypeScript
- README.md: содержит описание проекта
Пример базовой структуры проекта
Рассмотрим пример базовой структуры проекта:
my-ts-app/
├── src/
│ ├── components/
│ │ ├── Header.ts
│ │ ├── Footer.ts
│ ├── models/
│ │ ├── User.ts
│ ├── services/
│ │ ├── ApiService.ts
│ ├── utils/
│ │ ├── helpers.ts
│ ├── index.ts
│ └── app.ts
├── tests/
│ ├── components/
│ │ ├── Header.test.ts
│ │ ├── Footer.test.ts
│ ├── services/
│ │ ├── ApiService.test.ts
│ ├── utils/
│ │ ├── helpers.test.ts
├── dist/
├── node_modules/
├── package.json
├── tsconfig.json
└── README.md
Организация кода по функциональным областям
Разделение кода по функциональным областям помогает поддерживать чистоту и упорядоченность проекта. В проекте могут быть следующие основные функциональные области:
- Компоненты (components): содержат повторно используемые компоненты.
- Модели (models): определяют структуры данных и типы.
- Сервисы (services): включают логику для работы с API и другими внешними ресурсами.
- Утилиты (utils): содержат вспомогательные функции и утилиты.
3.2 Пример организации компонентов
Компоненты — это повторно используемые части интерфейса пользователя. Они могут включать отдельные файлы для каждого компонента.
Пример структуры компонентов:
src/
├── components/
│ ├── Header.ts
│ ├── Footer.ts
│ ├── Sidebar.ts
│ ├── Button.ts
Пример кода компонента Header.ts:
export function Header() {
// Логика компонента
}
3.3 Пример организации моделей
Модели определяют структуры данных и типы, используемые в проекте. Они помогают описать контракты между различными частями приложения.
Пример структуры моделей:
src/
├── models/
│ ├── User.ts
│ ├── Product.ts
Пример кода модели User.ts:
export interface User {
id: number;
name: string;
email: string;
}
3.4 Пример организации сервисов
Сервисы содержат логику для работы с API и другими внешними ресурсами. Они инкапсулируют бизнес-логику и обеспечивают интерфейсы для взаимодействия с данными.
Пример структуры сервисов:
src/
├── services/
│ ├── ApiService.ts
│ ├── AuthService.ts
Пример кода сервиса ApiService.ts:
import axios from 'axios';
export class ApiService {
async fetchData(url: string) {
const response = await axios.get(url);
return response.data;
}
}
3.5 Пример организации утилит
Утилиты включают вспомогательные функции и методы, которые могут быть использованы в разных частях приложения.
Пример структуры утилит:
src/
├── utils/
│ ├── helpers.ts
│ ├── constants.ts
Пример кода утилиты helpers.ts:
export function formatDate(date: Date): string {
return date.toISOString().split('T')[0];
}
3.6 Настройка тестирования
Организация тестов также играет важную роль в структуре проекта. Разделяйте тесты по тем же функциональным областям, что и основной код, чтобы поддерживать согласованность и упрощать навигацию.
Пример структуры тестов:
tests/
├── components/
│ ├── Header.test.ts
│ ├── Footer.test.ts
├── services/
│ ├── ApiService.test.ts
├── utils/
│ ├── helpers.test.ts
Пример теста для компонента Header.test.ts:
import { Header } from '../../src/components/Header';
describe('Header', () => {
it('should render correctly', () => {
const result = Header();
expect(result).toBeDefined();
});
});
3.7 Сборка и конфигурация проекта
Конфигурационные файлы, такие как tsconfig.json и package.json, играют ключевую роль в настройке проекта. Убедитесь, что они настроены правильно и отражают структуру и требования вашего проекта.
Пример tsconfig.json:
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"outDir": "./dist",
"rootDir": "./src"
},
"include": ["src"],
"exclude": ["node_modules", "dist"]
}
Пример package.json:
{
"name": "my-ts-app",
"version": "1.0.0",
"description": "My TypeScript Application",
"main": "dist/index.js",
"scripts": {
"build": "tsc",
"test": "jest",
"start": "node dist/index.js"
},
"dependencies": {
"axios": "^0.21.1"
},
"devDependencies": {
"typescript": "^4.3.5",
"jest": "^27.0.6",
"ts-jest": "^27.0.5"
}
}
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ