TypeScript Academy · leksjon

Importer og eksporter som bare gjelder typer

Bruk import type for å unngå ekstra belastning under kjøring.

Leksjon 3 av 413 trinn

Importer og eksporter som bare gjelder typer er en gratis leksjon i TypeScript Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i TypeScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i TypeScript Academy inneholder totalt 4 leksjoner.

Velkommen

Typebaserte importer og eksporter (import type / export type) ble introdusert i TypeScript 3.8 for å gi utviklere eksplisitt kontroll over hva som er en kjøretidsavhengighet, og hva som bare er en type.

Hvorfor typebaserte importer er viktige

Vanlige importer kan inkludere kjøringskode. Hvis du bare trenger typen, kan importen fjernes helt fra det kompilerte resultatet.
import { User } from './models'; // includes runtime binding
import type { User } from './models'; // compile-time only, erased

Syntaks for import type

Plasser `type` etter nøkkelordet `import`. Du kan ikke bruke det importerte navnet som en verdi.
import type { ApiResponse } from './api-types';

function handleResponse(res: ApiResponse<User>): void {
  // ApiResponse used as type annotation only
}

Syntaks for export type

Bruk `export type` for å merke eksporter eksplisitt som typebaserte.
// user.types.ts
export type UserId = string;
export type { User, UserRole };

Innebygd typeimport

TypeScript 4.5+ lar deg merke individuelle importer som typebaserte i en vanlig importsetning.
import { type User, createUser } from './user';
// User is type-only, createUser is a runtime value

Løse sirkulære avhengigheter

Typebaserte importer kan løse problemer med sirkulære avhengigheter fordi de ikke oppretter bindinger ved kjøring.

verbatimModuleSyntax

TypeScript 5.0 introduserte `verbatimModuleSyntax`. Når den er aktivert, MÅ du bruke `import type` for typebaserte importer for å hindre forvirring i bundleren.
// tsconfig.json
{ "compilerOptions": { "verbatimModuleSyntax": true } }

importsNotUsedAsValues

Kompilatoralternativet `importsNotUsedAsValues` (erstattet av verbatimModuleSyntax) styrer hvordan TypeScript håndterer ubrukte verdiimporter.

Fordeler i bundlere

Bundlere som Vite og esbuild bruker `import type`-markører for å hoppe over behandling av typeimporter, noe som forbedrer byggehastigheten.

Typebaserte eksporter på nytt

Eksporter typer på nytt uten å inkludere kjøretidsmodulen deres.
// public-api.ts
export type { User, UserRole } from './internal-user';
export { createUser } from './internal-user'; // runtime

Feil: Kan ikke bruke import type som verdi

Å bruke en typebasert import som en kjøretidsverdi gir en kompileringsfeil.
import type { User } from './user';
// const u = new User(); // Error — User was imported as type-only

Hurtigsjekk

Når bør du bruke `import type` i stedet for en vanlig `import`?

Oppsummering

Bruk `import type` og `export type` for typebaserte importer og eksporter. De fjernes ved kompilering, hindrer kjøretidsavhengigheter til typefiler og er påkrevd når verbatimModuleSyntax er aktivert.
Gratis å komme i gang

Lær deg TypeScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs
101
Leksjoner
352

Ofte stilte spørsmål

Er leksjonen «Importer og eksporter som bare gjelder typer» gratis?

Ja – hele teksten i «Importer og eksporter som bare gjelder typer» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av TypeScript Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i TypeScript Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Importer og eksporter som bare gjelder typer»?

Bruk import type for å unngå ekstra belastning under kjøring. Du øver på TypeScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med TypeScript Academy?

Ingen tidligere erfaring er nødvendig. TypeScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «Importer og eksporter som bare gjelder typer»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne TypeScript Academy-leksjonen?

Ja. Alle TypeScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

  1. ES-modulsyntaks: import og export
  2. Reeksportering og samlingsfiler
  3. Importer og eksporter som bare gjelder typer
  4. Navnerom kontra moduler: moderne bruk
← Tilbake til TypeScript Academy