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

Mòduls i Espais de Noms

Següent ►
►

En aquest tema, explorarem com organitzar i modularitzar el codi en TypeScript utilitzant mòduls i espais de noms. Això ens permetrà mantenir el codi net, organitzat i fàcil de mantenir.

Mòduls

Els mòduls en TypeScript són una manera de dividir el codi en diferents fitxers i importar-los quan sigui necessari. Això ajuda a mantenir el codi més organitzat i facilita la reutilització de components.

Importació i Exportació de Mòduls

Exportació

Per exportar una funció, classe, variable o interfície des d'un fitxer, utilitzem la paraula clau export.

// mathUtils.ts
export function add(a: number, b: number): number {
    return a + b;
}

export const PI = 3.14;

Importació

Per importar elements d'un altre fitxer, utilitzem la paraula clau import.

// main.ts
import { add, PI } from './mathUtils';

console.log(add(2, 3)); // 5
console.log(PI); // 3.14

Exportació per Defecte

També podem exportar un element per defecte utilitzant export default.

// mathUtils.ts
export default function subtract(a: number, b: number): number {
    return a - b;
}

Per importar un element exportat per defecte, no utilitzem claus.

// main.ts
import subtract from './mathUtils';

console.log(subtract(5, 3)); // 2

Importació de Tot el Mòdul

Podem importar tot el contingut d'un mòdul utilitzant l'asterisc * i un àlies.

// main.ts
import * as MathUtils from './mathUtils';

console.log(MathUtils.add(2, 3)); // 5
console.log(MathUtils.PI); // 3.14

Espais de Noms

Els espais de noms (namespaces) són una altra manera d'organitzar el codi en TypeScript. S'utilitzen per agrupar funcions, classes, variables, etc., sota un mateix nom.

Creació d'un Espai de Noms

Per crear un espai de noms, utilitzem la paraula clau namespace.

namespace Geometry {
    export function areaOfCircle(radius: number): number {
        return Math.PI * radius * radius;
    }

    export function circumferenceOfCircle(radius: number): number {
        return 2 * Math.PI * radius;
    }
}

Utilització d'un Espai de Noms

Per accedir als elements d'un espai de noms, utilitzem el nom de l'espai de noms seguit d'un punt.

console.log(Geometry.areaOfCircle(5)); // 78.53981633974483
console.log(Geometry.circumferenceOfCircle(5)); // 31.41592653589793

Espais de Noms i Mòduls

Els espais de noms també es poden utilitzar dins de mòduls. Això permet una millor organització del codi.

// geometry.ts
export namespace Geometry {
    export function areaOfRectangle(width: number, height: number): number {
        return width * height;
    }
}

// main.ts
import { Geometry } from './geometry';

console.log(Geometry.areaOfRectangle(10, 5)); // 50

Exercicis Pràctics

Exercici 1: Crear i Utilitzar un Mòdul

  1. Crea un fitxer stringUtils.ts i exporta una funció capitalize que capitalitzi la primera lletra d'una cadena.
  2. Importa i utilitza aquesta funció en un fitxer main.ts.

Solució

// stringUtils.ts
export function capitalize(str: string): string {
    return str.charAt(0).toUpperCase() + str.slice(1);
}

// main.ts
import { capitalize } from './stringUtils';

console.log(capitalize('hello')); // Hello

Exercici 2: Crear i Utilitzar un Espai de Noms

  1. Crea un espai de noms MathOperations amb funcions per sumar, restar, multiplicar i dividir dos nombres.
  2. Utilitza aquestes funcions en un fitxer main.ts.

Solució

// mathOperations.ts
export namespace MathOperations {
    export function add(a: number, b: number): number {
        return a + b;
    }

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

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

    export function divide(a: number, b: number): number {
        if (b === 0) {
            throw new Error('Division by zero');
        }
        return a / b;
    }
}

// main.ts
import { MathOperations } from './mathOperations';

console.log(MathOperations.add(10, 5)); // 15
console.log(MathOperations.subtract(10, 5)); // 5
console.log(MathOperations.multiply(10, 5)); // 50
console.log(MathOperations.divide(10, 5)); // 2

Conclusió

En aquest tema, hem après com utilitzar mòduls i espais de noms per organitzar el codi en TypeScript. Els mòduls ens permeten dividir el codi en diferents fitxers i importar-los quan sigui necessari, mentre que els espais de noms ens ajuden a agrupar funcions, classes i variables sota un mateix nom. Amb aquests conceptes, podem mantenir el nostre codi més net, organitzat i fàcil de mantenir.

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