El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

TypeScript en Projectes Grans

Següent ►
►

En aquest tema, explorarem com utilitzar TypeScript en projectes grans. A mesura que els projectes creixen en complexitat i mida, és crucial mantenir el codi organitzat, llegible i fàcil de mantenir. TypeScript ofereix diverses eines i tècniques per ajudar a gestionar projectes grans de manera eficient.

Contingut

  1. Estructura del Projecte
  2. Configuració del Compilador
  3. Modularització i Reutilització de Codi
  4. Gestió de Dependències
  5. Estratègies de Refactorització
  6. Exercicis Pràctics
  7. Conclusió

Estructura del Projecte

Una bona estructura de projecte és essencial per mantenir el codi organitzat i fàcil de navegar. Aquí tens una estructura recomanada per a projectes grans:

/project-root
│
├── /src
│   ├── /components
│   ├── /services
│   ├── /models
│   ├── /utils
│   └── index.ts
│
├── /tests
│   ├── /unit
│   ├── /integration
│   └── /e2e
│
├── tsconfig.json
├── package.json
└── README.md

Explicació de l'Estructura

  • /src: Conté tot el codi font del projecte.
    • /components: Components reutilitzables.
    • /services: Serveis que encapsulen la lògica de negoci.
    • /models: Definicions de tipus i interfícies.
    • /utils: Funcions utilitàries.
    • index.ts: Punt d'entrada principal del projecte.
  • /tests: Conté tots els tests del projecte.
    • /unit: Tests unitaris.
    • /integration: Tests d'integració.
    • /e2e: Tests de punta a punta.
  • tsconfig.json: Configuració del compilador TypeScript.
  • package.json: Gestió de dependències i scripts del projecte.
  • README.md: Documentació del projecte.

Configuració del Compilador

La configuració del compilador és crucial per assegurar-se que el projecte es compila correctament i que es detecten els errors de tipus. Aquí tens un exemple de tsconfig.json per a un projecte gran:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "baseUrl": "./",
    "paths": {
      "@components/*": ["src/components/*"],
      "@services/*": ["src/services/*"],
      "@models/*": ["src/models/*"],
      "@utils/*": ["src/utils/*"]
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

Explicació de les Opcions

  • target: Especifica la versió de JavaScript a la qual es compilarà el codi.
  • module: Especifica el sistema de mòduls a utilitzar.
  • strict: Activa totes les comprovacions estrictes de tipus.
  • esModuleInterop: Permet la interoperabilitat amb mòduls ES.
  • skipLibCheck: Omple la comprovació de tipus en fitxers de definició de biblioteques.
  • forceConsistentCasingInFileNames: Assegura que els noms de fitxers siguin consistents en majúscules i minúscules.
  • outDir: Especifica el directori de sortida per als fitxers compilats.
  • rootDir: Especifica el directori arrel del codi font.
  • baseUrl: Especifica la base per a les rutes relatives.
  • paths: Defineix alias per a rutes de mòduls.

Modularització i Reutilització de Codi

La modularització és clau per mantenir el codi organitzat i fàcil de mantenir. Utilitza mòduls per dividir el codi en parts més petites i reutilitzables.

Exemple de Modularització

// src/models/User.ts
export interface User {
  id: number;
  name: string;
  email: string;
}

// src/services/UserService.ts
import { User } from '@models/User';

export class UserService {
  private users: User[] = [];

  addUser(user: User): void {
    this.users.push(user);
  }

  getUsers(): User[] {
    return this.users;
  }
}

// src/index.ts
import { UserService } from '@services/UserService';

const userService = new UserService();
userService.addUser({ id: 1, name: 'John Doe', email: 'john.doe@example.com' });
console.log(userService.getUsers());

Gestió de Dependències

Utilitza un gestor de paquets com npm o yarn per gestionar les dependències del projecte. Assegura't de mantenir les dependències actualitzades i utilitza versions específiques per evitar problemes de compatibilitat.

Exemple de package.json

{
  "name": "large-typescript-project",
  "version": "1.0.0",
  "scripts": {
    "build": "tsc",
    "start": "node dist/index.js",
    "test": "jest"
  },
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "typescript": "^4.4.3",
    "jest": "^27.0.6",
    "@types/jest": "^27.0.1",
    "@types/node": "^16.7.10"
  }
}

Estratègies de Refactorització

La refactorització és el procés de millorar el codi sense canviar-ne el comportament extern. Aquí tens algunes estratègies per refactoritzar projectes grans:

  • Extracció de Funcions: Divideix funcions grans en funcions més petites i específiques.
  • Renombrament de Variables: Utilitza noms de variables descriptius.
  • Eliminació de Codi Mort: Elimina codi que ja no s'utilitza.
  • Simplificació de Condicionals: Simplifica les estructures condicionals complexes.

Exemple de Refactorització

Abans de la refactorització:

function processUser(user: any) {
  if (user !== null && user !== undefined) {
    if (user.age >= 18) {
      console.log('User is an adult');
    } else {
      console.log('User is a minor');
    }
  }
}

Després de la refactorització:

function isUserValid(user: any): boolean {
  return user !== null && user !== undefined;
}

function isUserAdult(user: any): boolean {
  return user.age >= 18;
}

function processUser(user: any): void {
  if (isUserValid(user)) {
    console.log(isUserAdult(user) ? 'User is an adult' : 'User is a minor');
  }
}

Exercicis Pràctics

Exercici 1: Estructura del Projecte

  1. Crea una estructura de projecte seguint l'exemple proporcionat.
  2. Implementa un servei senzill que gestioni una llista de productes.

Exercici 2: Configuració del Compilador

  1. Configura el tsconfig.json per al teu projecte.
  2. Afegeix alias per a les rutes dels mòduls.

Exercici 3: Modularització

  1. Divideix el codi en mòduls seguint l'exemple proporcionat.
  2. Implementa una classe de servei que gestioni usuaris i productes.

Exercici 4: Refactorització

  1. Refactoritza una funció gran en funcions més petites i específiques.
  2. Renombra variables per fer-les més descriptives.

Conclusió

En aquest tema, hem explorat com utilitzar TypeScript en projectes grans. Hem après a estructurar el projecte, configurar el compilador, modularitzar el codi, gestionar dependències i aplicar estratègies de refactorització. Aquests conceptes són essencials per mantenir el codi organitzat, llegible i fàcil de mantenir a mesura que el projecte creix en complexitat i mida.

Amb aquests coneixements, estàs preparat per gestionar projectes grans amb TypeScript de manera eficient i efectiva. En el proper tema, explorarem com contribuir a TypeScript i participar en la seva comunitat de desenvolupadors.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats