TypeScript Academy · Les

Imports en exports die alleen typen bevatten

Gebruik import type om runtime-overhead te vermijden.

Les 3 van 413 stappen

Imports en exports die alleen typen bevatten is een gratis TypeScript Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject TypeScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus TypeScript Academy bevat in totaal 4 lessen.

Welkom

Imports en exports die alleen typen bevatten (import type / export type) zijn in TypeScript 3.8 geïntroduceerd om ontwikkelaars expliciete controle te geven over wat een runtime-afhankelijkheid is en wat alleen een type is.

Waarom alleen typen belangrijk is

Normale imports kunnen runtimecode bevatten. Als je alleen het type nodig hebt, kan de import volledig uit de gecompileerde uitvoer worden verwijderd.
import { User } from './models'; // includes runtime binding
import type { User } from './models'; // compile-time only, erased

Syntaxis voor import type

Plaats `type` na het sleutelwoord `import`. Je kunt de geïmporteerde naam niet als waarde gebruiken.
import type { ApiResponse } from './api-types';

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

Syntaxis voor export type

Gebruik `export type` om exports expliciet als alleen typen te markeren.
// user.types.ts
export type UserId = string;
export type { User, UserRole };

Inline type-import

Met TypeScript 4.5 en hoger kun je afzonderlijke imports binnen een normale importinstructie markeren als alleen typen.
import { type User, createUser } from './user';
// User is type-only, createUser is a runtime value

Circulaire afhankelijkheden oplossen

Imports die alleen typen bevatten kunnen problemen met circulaire afhankelijkheden oplossen, omdat ze geen runtimebindingen creëren.

verbatimModuleSyntax

TypeScript 5.0 introduceerde `verbatimModuleSyntax`. Als deze optie is ingeschakeld, MOET je `import type` gebruiken voor imports die alleen typen bevatten, om verwarring bij bundelaars te voorkomen.
// tsconfig.json
{ "compilerOptions": { "verbatimModuleSyntax": true } }

importsNotUsedAsValues

De compileroptie `importsNotUsedAsValues` (opgevolgd door verbatimModuleSyntax) bepaalt hoe TypeScript omgaat met ongebruikte waarde-imports.

Voordelen in bundelaars

Bundelaars zoals Vite en esbuild gebruiken markeringen met `import type` om het verwerken van type-imports over te slaan, waardoor builds sneller worden.

Opnieuw exporteren van alleen typen

Exporteer typen opnieuw zonder hun runtime-module op te nemen.
// public-api.ts
export type { User, UserRole } from './internal-user';
export { createUser } from './internal-user'; // runtime

Fout: import type kan niet als waarde worden gebruikt

Een import die alleen een type bevat als runtimewaarde gebruiken is een compilatiefout.
import type { User } from './user';
// const u = new User(); // Error — User was imported as type-only

Korte controle

Wanneer moet je `import type` gebruiken in plaats van een normale `import`?

Samenvatting

Gebruik `import type` en `export type` voor imports en exports die alleen typen bevatten. Ze worden tijdens het compileren verwijderd, voorkomen runtimeafhankelijkheden van typebestanden en zijn vereist wanneer verbatimModuleSyntax is ingeschakeld.
Gratis beginnen

Leer TypeScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen
101
Lessen
352

Veelgestelde vragen

Is de les “Imports en exports die alleen typen bevatten” gratis?

Ja — de volledige tekst van “Imports en exports die alleen typen bevatten” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus TypeScript Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus TypeScript Academy bevat in totaal 4 lessen.

Wat leer ik in “Imports en exports die alleen typen bevatten”?

Gebruik import type om runtime-overhead te vermijden. Je oefent met TypeScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met TypeScript Academy te beginnen?

Ervaring vooraf is niet nodig. TypeScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.

Hoe lang duurt de les “Imports en exports die alleen typen bevatten”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over TypeScript Academy?

Ja. Elke les over TypeScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

  1. ES-modulesyntaxis: import en export
  2. Re-exports en barrelbestanden
  3. Imports en exports die alleen typen bevatten
  4. Namespaces versus modules: modern gebruik
← Terug naar TypeScript Academy