Hvordan organiserer jeg mine typer/grensesnitt-deklarasjoner i Typescript?

Jeg er litt ny i TypeScript, og en av tingene som gjør meg litt forvirret er type-/interface-deklarasjoner. Jeg skriver et bibliotek som for tiden har noen få klasser og noen flere type-/interface-deklarasjoner. Jeg bruker disse typene/interface gjennom mesteparten av koden. Opprinnelig ville jeg latt dem være i en enkelt fil i en types-mappe, og deretter importere dem der det trengs. Nå har jeg en enkelt models.d.ts inne i types-mappen som deklarerer et namespace types. Inne i dette namespace eksporterer jeg alle mine typer/interface som jeg bruker gjennom koden. Er denne tilnærmingen OK, eller finnes det en bedre måte å organisere type- og interface-definisjoner på?

Svar #1

Vanligvis bruker du bare .d.ts-filene for typereduksjonsfiler for JS-biblioteker som ikke er sterkt typet. Her er en annen SO om .d.ts-filer: Om "*.d.ts" i TypeScript. Å ha en katalog med typene dine er løsningen vi bruker og ser ut til å fungere bra. Ja, du må importere typer i filer, men det lar deg være eksplisitt om det, og hvis du bruker "TypeScript Hero"-pluginen kan VS Code automatisk legge til importene for deg.

Du kan også plassere flere typer i én enkelt fil, men jeg vil bare gjøre det med funksjonalitet som hører sammen, for eksempel hvis du har fly, biler og båter, og hvis de er små nok, for eksempel filen vehicles.ts, eller du kan ha fire filer: vehicles.ts, airplanes.ts, cars.ts og boats.ts, der du har de generiske typene i vehicles.ts og de spesifikke i de andre filene.

Nå, hvis du startet med en enkelt fil, vehicles.ts, som begynte å vokse med en haug forskjellige typer, og bestemte deg for at du ville dele dem opp, en måte du kunne gjøre det på uten å refaktorere noe annet enn typekoden din er å lage en katalog kalt vehicles, deretter legge alle filene du refaktorerer i den, og avslutte med en index.ts-fil som inneholder imports og exports for alle typene. Her er et eksempel:

Prosjektfilen din:

import { Boeing737, Boeing747, FordExplorer, BassBoat } from 'src/types/vehicle'

Dette refererer for øyeblikket til vehicles.ts-filen som er i den katalogen. Nå, når vi gjør refaktoreringen, og nå har katalogen: 'src/types/vehicle' som har de refaktorerte .ts-filene under seg, oppretter du en index.ts-fil som ser slik ut:

export { Boeing737, Boeing747 } from './airplanes';
export { FordExplorer, ToyotaCorolla, ToyotaSienna } from './cars';
export { BassBoat, Yacht } from './boats';

Nå endres ikke importen din i prosjektfilen i det hele tatt, men den henter nå typene sine fra underfilene. Dette gjør det mulig med videre refaktorering uten å endre prosjektfilene dine, for eksempel hvis du ønsket å skille biler fra SUV-er. Hvis du bruker de samme typene i alle filene, trenger du bare den ene importlinjen som du kan kopiere til nye filer, eller bare importere dem etter behov.

Hvis du vil lese mer om index.ts-filer og hvordan de fungerer, her er Typescript-dokumentasjonen: https://www.typescriptlang.org/docs/handbook/module-resolution.html.

Relaterte artikler