Moduły — porządek w kilku plikach

Po tej lekcji potrafisz

Jeden plik robi się za długi

W pliku zaczynają mieszać się modele, punktacja i raport. Trudniej znaleźć właściwe miejsce zmiany. Moduł udostępnia wybrane elementy przez export, a jego odbiorca jawnie zapisuje zależność przez import.

Małe kroki, konkretne efekty

Eksport nazwany i import

Ten przykład składa się z dwóch plików. Utwórz je w src i uruchom npm start ze środowiska lekcji 02: package.json ma type: module, a tsconfig używa NodeNext. W imporcie wpisujemy .js, ponieważ taki plik powstanie po kompilacji.

export function podwoj(n: number): number { return n * 2; }

import { podwoj } from "./punkty.js";
console.log(podwoj(6));

12

TypeScript podczas sprawdzania odnajdzie źródłowy punkty.ts. Node uruchomi wynikowy punkty.js. Nie uruchamiaj źródeł poleceniem node src/index.ts w tym ćwiczeniu.

Typ nie jest wartością runtime

import type sprowadza wyłącznie opis typu i znika z JavaScriptu. Zwykły import sprowadza funkcję, stałą albo klasę potrzebną podczas działania.

export interface Gracz { nick: string; punkty: number }

import type { Gracz } from "./model.js";
const g: Gracz = { nick: "Ala", punkty: 5 };
console.log(g.nick);

Ala

Wszystkie pliki danego przykładu należą do jednego projektu. Przy przejściu do kolejnego przykładu nie sklejaj definicji w jeden index.ts.

Mini ranking w trzech plikach

Utwórz poniższe trzy pliki w src. Model opisuje dane, punktacja wykonuje obliczenia, a index organizuje uruchomienie. To kompletny program modułowy.

export interface Gracz { nick: string; wygrane: number; remisy: number }

import type { Gracz } from "./gracz.js";
export function punkty(g: Gracz): number { return g.wygrane * 3 + g.remisy; }
export function opis(g: Gracz): string { return g.nick + ": " + punkty(g); }

import type { Gracz } from "./gracz.js";
import { opis } from "./ranking.js";
const gracze: Gracz[] = [
  { nick: "Ala", wygrane: 3, remisy: 1 },
  { nick: "Neo", wygrane: 2, remisy: 2 }
];
for (const gracz of gracze) { console.log(opis(gracz)); }

Ala: 10
Neo: 8

Jak program dochodzi do wyniku

1. gracz.ts nie musi znać rankingu ani sposobu wypisywania.
2. ranking.ts importuje model wyłącznie do sprawdzania typu.
3. index.ts importuje działającą funkcję opis oraz osobno typ Gracz.
4. Strzałki zależności prowadzą w jednym kierunku; moduły nie importują się nawzajem w kółko.

Zmień kod i zobacz, co się stanie

Alias i eksport domyślny

Eksport nazwany można lokalnie przemianować przez as. Eksport domyślny importuje się bez klamer i można nadać mu lokalną nazwę. W kursie preferujemy nazwane eksporty, żeby nazwy były spójne między plikami.

export const separator = " | ";
export default function formatuj(n: number): string { return n + " pkt"; }

import formatuj, { separator as przerwa } from "./format.js";
console.log(formatuj(10) + przerwa + formatuj(20));

10 pkt | 20 pkt

as w imporcie zmienia lokalną nazwę — to nie jest asercja typu. Jedna składnia słowa kluczowego ma tutaj inne znaczenie.

Gdy wynik zaskakuje

Teraz Twoja kolej

Rozwiązanie jest jedną z możliwości. Zanim je odkryjesz, uruchom własną wersję dla podanych danych i przynajmniej jednego przypadku brzegowego.

export const LIMIT = 16;

import { LIMIT } from "./ustawienia.js";
console.log(LIMIT);

16

export function sekundy(minuty: number): number { return minuty * 60; }

import { sekundy } from "./czas.js";
console.log(sekundy(3));

180

export interface Bilet { id: number; cena: number }

import type { Bilet } from "./bilet.js";
const b: Bilet = { id: 1, cena: 20 };
console.log(b.id, b.cena);

1 20

export function opis(): string { return "Gracz"; }

export function opis(): string { return "Drużyna"; }

import { opis as opisGracza } from "./osoba.js";
import { opis as opisDruzyny } from "./druzyna.js";
console.log(opisGracza(), opisDruzyny());

Gracz Drużyna

Co zabierasz do następnej lekcji

• export udostępnia element, import określa zależność.
• import type dotyczy opisu znikającego po kompilacji.
• Ścieżki modułów muszą pasować do wybranego sposobu uruchamiania.