TypeScript Academy · leksjon

Kompilere TypeScript til JavaScript

Forstå TypeScript-kompilatoren og resultatet den produserer.

Leksjon 3 av 413 trinn

Kompilere TypeScript til JavaScript 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

TypeScript kan ikke kjøres direkte i Node.js eller nettleseren. Det må først kompileres til JavaScript. I denne leksjonen lærer du hvordan TypeScript-kompilatoren fungerer.

Installere TypeScript-kompilatoren

Installer TypeScript som en utviklingsavhengighet i prosjektet. Kommandoen `tsc` blir tilgjengelig i de lokale skriptene etter installasjonen.
npm install --save-dev typescript
npx tsc --version

Din første tsc-kompilering

Kjør `tsc hello.ts` for å kompilere én fil. Den oppretter `hello.js` i samme mappe, med alle typer fjernet.
// 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: Prosjektkonfigurasjonen

For et faktisk prosjekt trenger du en `tsconfig.json`. Kjør `tsc --init` for å generere en. Den styrer målplattform, modulformat, strenghet, utdatamappe og mer.
npx tsc --init
// Creates tsconfig.json with defaults and comments

Viktige tsconfig-alternativer

De viktigste feltene i tsconfig er target (utdataens ES-versjon), module (modulsystem), outDir (utdatamappe) og strict (aktiverer alle strenge kontroller).
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true
  }
}

Overvåkingsmodus med tsc --watch

Kjør `tsc --watch` for å kompilere på nytt automatisk hver gang du lagrer en TypeScript-fil. Dette gjør utviklingssløyfen raskere.
npx tsc --watch
// Watches for changes and recompiles on save

noEmit: Typesjekking uten å opprette filer

Flagget `noEmit` kjører typesjekkeren uten å skrive noen utdatafiler. Dette er nyttig i CI-pipelines som bruker en bundler som Vite eller esbuild til selve kompileringen.
// tsconfig.json
{ "compilerOptions": { "noEmit": true } }

// Then run:
npx tsc --noEmit

Raskere alternativer: ts-node og tsx

Under utviklingen kan du kjøre TypeScript direkte uten et separat kompileringstrinn ved å bruke `ts-node` eller det raskere verktøyet `tsx`.
# Run TS directly with ts-node
npx ts-node src/index.ts

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

Kildekart for feilsøking

Aktiver `sourceMap: true` slik at utviklerverktøyene i nettleseren og Node.js-feilsøkere kan koble kompilerte JS-linjer tilbake til den opprinnelige TypeScript-kilden.
{ "compilerOptions": { "sourceMap": true } }

Deklarasjonsfiler (.d.ts)

Med `declaration: true` genererer kompilatoren også `.d.ts`-filer. Disse gjør det mulig for andre TypeScript-prosjekter å bruke biblioteket ditt med full typeinformasjon.
{ "compilerOptions": { "declaration": true } }
// Outputs: dist/index.js AND dist/index.d.ts

Kompilatorfeil blokkerer utdata som standard

Som standard skriver `tsc` fortsatt ut JavaScript hvis TypeScript-koden inneholder typefeil, men avslutter med en kode som ikke er null. Bruk `noEmitOnError: true` for å stoppe utdata ved feil.
{ "compilerOptions": { "noEmitOnError": true } }

Kort kontroll

Hva oppnår du ved å kjøre `tsc --noEmit`?

Oppsummering

TypeScript-kompilatoren gjør .ts-filer om til JavaScript. Konfigurer den med tsconfig.json, bruk --watch under utviklingen, --noEmit for kun typesjekking og ts-node/tsx for å kjøre TypeScript direkte.
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 «Kompilere TypeScript til JavaScript» gratis?

Ja – hele teksten i «Kompilere TypeScript til JavaScript» 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 «Kompilere TypeScript til JavaScript»?

Forstå TypeScript-kompilatoren og resultatet den produserer. 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 «Kompilere TypeScript til JavaScript»?

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. JavaScript-utfordringer: feil under kjøring
  2. Hva TypeScript tilfører JavaScript
  3. Kompilere TypeScript til JavaScript
  4. Når bør du bruke TypeScript i prosjektene dine
← Tilbake til TypeScript Academy