TypeScript Academy · Lektion

ES-modulsyntax: import och export

Använd namngivna exporter och standardexporter i TypeScript-filer

Lektion 1 av 413 steg

ES-modulsyntax: import och export är en gratis lektion i TypeScript Academy på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för TypeScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i TypeScript Academy innehåller totalt 4 lektioner.

Välkommen

TypeScript stöder ES-modulsyntax för att organisera kod i separata filer. Den här lektionen behandlar namngivna exporter, defaultexporter och importer.

Namngivna exporter

Använd `export` för att göra en deklaration tillgänglig för andra filer.
// math.ts
export function add(a: number, b: number): number { return a + b; }
export const PI = 3.14159;
export interface Config { host: string; }

Namngivna importer

Importera specifika namngivna exporter med klammerparenteser.
// app.ts
import { add, PI } from './math';
console.log(add(1, 2)); // 3
console.log(PI);        // 3.14159

Defaultexporter

En modul kan ha en defaultexport. Importera den utan klammerparenteser och med valfritt namn.
// greeter.ts
export default function greet(name: string): string {
  return 'Hello, ' + name;
}

// app.ts
import greet from './greeter';
console.log(greet('Alice'));

Importalias

Använd `as` för att byta namn på en import och undvika namnkonflikter.
import { log as consoleLog } from './logger';
import { User as UserModel } from './models';

Namespace-importer

Importera alla exporter som ett namespace-objekt.
import * as math from './math';
console.log(math.add(1, 2));
console.log(math.PI);

Återexportera

Återexportera från en annan modul för att skapa ett publikt API.
// index.ts
export { add, PI } from './math';
export { greet } from './greeter';
export * from './utils';

Exporter av enbart typer

Exportera typer utan att inkludera körningskod med hjälp av `export type`.
// types.ts
export type { User, Product };
export type UserId = string;

Importer av enbart typer

`import type` säkerställer att ingen körningskod inkluderas för importen. Det är användbart när du importerar gränssnitt och typalias.
import type { User } from './models';
// Only the type is imported — no JavaScript
function greet(user: User): string { return user.name; }

Modulupplösning

TypeScript löser importer baserat på tsconfig-inställningen `moduleResolution`. `bundler` eller `node16` rekommenderas för moderna projekt.

Importera JSON

Aktivera `resolveJsonModule: true` i tsconfig för att importera JSON-filer med typinferens.
// tsconfig.json: "resolveJsonModule": true
import config from './config.json';
console.log(config.host); // typed based on JSON structure

Snabbkontroll

Vilken imports syntax säkerställer att importen inte genererar någon JavaScript-utdata, alltså är typbaserad?

Sammanfattning

Använd namngivna exporter och importer för flera objekt, defaultexporter för en moduls huvudobjekt och import type för typer. Återexporter i index.ts skapar rena publika API:er.
Gratis att börja

Lär dig TypeScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser
101
Lektioner
352

Vanliga frågor

Är lektionen ”ES-modulsyntax: import och export” gratis?

Ja – hela texten till ”ES-modulsyntax: import och export” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i TypeScript Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i TypeScript Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”ES-modulsyntax: import och export”?

Använd namngivna exporter och standardexporter i TypeScript-filer Ni övar på TypeScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig TypeScript Academy?

Du behöver inga förkunskaper. Utbildningen i TypeScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”ES-modulsyntax: import och export”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här TypeScript Academy-lektionen?

Ja. Varje TypeScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

  1. ES-modulsyntax: import och export
  2. Återexporter och barrel-filer
  3. Importer och exporter som endast gäller typer
  4. Namespaces eller moduler: modern användning
← Tillbaka till TypeScript Academy