Sådan opretter og bruger du TypeScript-moduler

TypeScript-moduler tilbyder en struktureret tilgang til at organisere og administrere kode. Moduler muliggør indkapsling af kode i separate filer, hvilket forbedrer vedligeholdelse, genbrugelighed og testbarhed. Denne vejledning forklarer processen med at oprette og bruge TypeScript-moduler.

Hvad er TypeScript-moduler?

TypeScript-moduler er individuelle filer, der eksporterer og importerer kodeelementer såsom klasser, funktioner og variabler. Ved at anvende moduler kan kode opdeles i håndterbare stykker, hvilket letter bedre kontrol over interaktioner mellem forskellige dele af koden.

Oprettelse af et TypeScript-modul

For at oprette et TypeScript-modul skal følgende trin følges:

  1. Opret en TypeScript-fil: Start med at oprette en ny `.ts`-fil til modulet, såsom `mathUtils.ts`.
  2. Definer og eksporter kode: Implementer funktioner, klasser eller variabler i denne fil og brug nøgleordet export for at gøre dem tilgængelige for andre moduler.

Eksempel på et simpelt modul:

// mathUtils.ts

export function add(a: number, b: number): number {
  return a + b;
}

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

I dette eksempel er 'add' og 'subtract'-funktionerne defineret og eksporteret fra 'mathUtils.ts'-modulet.

Import og brug af et TypeScript-modul

For at bruge koden fra et TypeScript-modul i en anden fil, skal den importeres. Dette involverer:

  1. Opret en ny TypeScript-fil: Generer en fil, hvor modulets kode vil blive brugt, såsom `app.ts`.
  2. Importer modulet: Brug nøgleordet import til at hente funktioner, klasser eller variabler fra modulet.

Eksempel på import og brug af funktionerne "tilføj" og "træk fra":

// app.ts

import { add, subtract } from './mathUtils';

const sum = add(5, 3);
const difference = subtract(5, 3);

console.log(`Sum: ${sum}`);
console.log(`Difference: ${difference}`);

I dette eksempel importeres 'add' og 'subtract'-funktionerne fra 'mathUtils'-modulet og bruges i 'app.ts'-filen.

Standard og navngivne eksporter

TypeScript-moduler understøtter både standard- og navngivne eksporter. Her er en kort oversigt:

  • Standardeksporter: En enkelt værdi kan eksporteres som standardeksport fra et modul ved hjælp af export default.
  • Navngivne eksporter: Flere værdier kan eksporteres fra et modul ved at bruge navngivne eksporter med nøgleordet export.

Eksempel, der viser begge typer eksport:

// shapes.ts

export default class Circle {
  constructor(public radius: number) {}
  
  area(): number {
    return Math.PI * this.radius ** 2;
  }
}

export function getCircleInfo(radius: number): string {
  const circle = new Circle(radius);
  return `A circle with radius ${radius} has an area of ${circle.area()}`;
}

I dette eksempel eksporteres `Circle` som standardeksport, mens `getCircleInfo` er en navngivet eksport.

Organisering af moduler i et projekt

For større projekter med talrige moduler bliver organisering afgørende. Overvej følgende tips:

  • Katalogstruktur: Gruppér relaterede moduler i mapper såsom `models/`, `services/` og `utils/`.
  • Indeksfiler: Brug `index.ts`-filer i mapper til at samle og reeksportere moduler, hvilket forenkler importen på tværs af projektet.

Eksempel på mappestruktur:

project/
│
├── src/
│   ├── models/
│   │   ├── index.ts
│   │   └── user.ts
│   └── app.ts

Konklusion

TypeScript-moduler er en nøglefunktion til at organisere og administrere kode. Ved at oprette og bruge moduler kan kode holdes modulær, vedligeholdbar og skalerbar. At forstå, hvordan man eksporterer og importerer kode, samt hvordan man strukturerer et projekt, øger effektiviteten af ​​TypeScript-udvikling.