TypeScript Academy · Lektion

Kompilera TypeScript till JavaScript

Förstå TypeScript-kompilatorn och dess utdata.

Lektion 3 av 413 steg

Kompilera TypeScript till JavaScript är en gratis lektion i TypeScript Academy på CoddyKit. Detta är lektion 3 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 kan inte köras direkt i Node.js eller webbläsaren. Det måste först kompileras till JavaScript. I den här lektionen får Du lära dig hur TypeScript-kompilatorn fungerar.

Installera TypeScript-kompilatorn

Installera TypeScript som ett utvecklingsberoende i projektet. Kommandot `tsc` blir tillgängligt i dina lokala skript efter installationen.
npm install --save-dev typescript
npx tsc --version

Din första tsc-kompilering

Kör `tsc hello.ts` för att kompilera en enskild fil. Då skapas `hello.js` i samma katalog, med alla typer borttagna.
// hello.ts
function greet(name: string): string {
  return 'Hello, ' + name;
}
console.log(greet('World'));

// Compile: npx tsc hello.ts
// Output: hello.js (no types)

tsconfig.json: Projektkonfigurationen

För ett verkligt projekt behöver Du en `tsconfig.json`. Kör `tsc --init` för att generera en. Den styr målplattform, modulformat, strikt typkontroll, utdatamapp och mycket mer.
npx tsc --init
// Creates tsconfig.json with defaults and comments

Viktiga tsconfig-alternativ

De viktigaste fälten i tsconfig är target (vilken ES-version som genereras), module (modulsystem), outDir (utdatamapp) och strict (aktiverar alla strikta kontroller).
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true
  }
}

Övervakningsläge med tsc --watch

Kör `tsc --watch` för att kompilera om automatiskt varje gång Du sparar en TypeScript-fil. Det snabbar upp utvecklingsloopen.
npx tsc --watch
// Watches for changes and recompiles on save

noEmit: Typkontroll utan att skapa filer

Flaggan `noEmit` kör typkontrollen utan att skriva några utdatafiler. Det är användbart i CI-pipelines som använder en bundler som Vite eller esbuild för själva kompileringen.
// tsconfig.json
{ "compilerOptions": { "noEmit": true } }

// Then run:
npx tsc --noEmit

Snabbare alternativ: ts-node och tsx

Under utvecklingen kan Du köra TypeScript direkt utan ett separat kompileringssteg med `ts-node` eller det snabbare verktyget `tsx`.
# Run TS directly with ts-node
npx ts-node src/index.ts

# Or faster with tsx
npx tsx src/index.ts

Källkartor för felsökning

Aktivera `sourceMap: true` så att webbläsarens utvecklarverktyg och Node.js-felsökare kan koppla rader i kompilerad JavaScript till den ursprungliga TypeScript-källkoden.
{ "compilerOptions": { "sourceMap": true } }

Deklarationsfiler (.d.ts)

Med `declaration: true` genererar kompilatorn även `.d.ts`-filer. Dessa gör det möjligt för andra TypeScript-projekt att använda ditt bibliotek med fullständig typinformation.
{ "compilerOptions": { "declaration": true } }
// Outputs: dist/index.js AND dist/index.d.ts

Kompileringsfel blockerar utdata som standard

Som standard genererar `tsc` fortfarande JavaScript även om TypeScript innehåller typfel, men avslutas med en kod som inte är noll. Använd `noEmitOnError: true` för att stoppa utdata vid fel.
{ "compilerOptions": { "noEmitOnError": true } }

Snabb kontroll

Vad åstadkommer det att köra `tsc --noEmit`?

Sammanfattning

TypeScript-kompilatorn omvandlar .ts-filer till JavaScript. Konfigurera den med tsconfig.json, använd --watch under utvecklingen, --noEmit för enbart typkontroll och ts-node/tsx för att köra TypeScript direkt.
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 ”Kompilera TypeScript till JavaScript” gratis?

Ja – hela texten till ”Kompilera TypeScript till JavaScript” 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 ”Kompilera TypeScript till JavaScript”?

Förstå TypeScript-kompilatorn och dess utdata. 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 3 av 4.

Hur lång tid tar lektionen ”Kompilera TypeScript till JavaScript”?

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. JavaScripts problemområden: fel vid körning
  2. Vad TypeScript tillför JavaScript
  3. Kompilera TypeScript till JavaScript
  4. När bör TypeScript användas i era projekt
← Tillbaka till TypeScript Academy