TypeScript Academy · Lektion

Kompilering af TypeScript til JavaScript

Forstå TypeScript-compileren og dens output.

Lektion 3 af 413 trin

Kompilering af TypeScript til JavaScript er en gratis TypeScript Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i TypeScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. TypeScript Academy-kurset indeholder 4 lektioner i alt.

Velkommen

TypeScript kan ikke køres direkte i Node.js eller browseren. Det skal først kompileres til JavaScript. I denne lektion lærer du, hvordan TypeScript-kompileren fungerer.

Installation af TypeScript-kompileren

Installér TypeScript som en udviklingsafhængighed i dit projekt. Kommandoen `tsc` bliver tilgængelig i dine lokale scripts efter installationen.
npm install --save-dev typescript
npx tsc --version

Din første tsc-kompilering

Kør `tsc hello.ts` for at kompilere en enkelt fil. Den opretter `hello.js` i samme mappe, hvor alle typer er 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: Projektkonfigurationen

Til et rigtigt projekt har du brug for en `tsconfig.json`. Kør `tsc --init` for at generere en. Den styrer målplatform, modulformat, strenghed, mappe til resultatet og meget mere.
npx tsc --init
// Creates tsconfig.json with defaults and comments

Vigtige tsconfig-indstillinger

De vigtigste felter i tsconfig er target (den ES-version, der genereres), module (modulsystemet), outDir (mappen til resultatet) og strict (aktiverer alle strenge kontroller).
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true
  }
}

Watch-tilstand med tsc --watch

Kør `tsc --watch` for automatisk at kompilere igen, hver gang du gemmer en TypeScript-fil. Det gør udviklingscyklussen hurtigere.
npx tsc --watch
// Watches for changes and recompiles on save

noEmit: Typekontrol uden at generere filer

Flaget `noEmit` kører typekontrollen uden at skrive resultatfiler. Det er nyttigt i CI-arbejdsgange, der bruger et bundlingsværktøj som Vite eller esbuild til den faktiske kompilering.
// tsconfig.json
{ "compilerOptions": { "noEmit": true } }

// Then run:
npx tsc --noEmit

Hurtigere alternativer: ts-node og tsx

Under udviklingen kan du køre TypeScript direkte uden et separat kompileringstrin ved hjælp af værktøjet `ts-node` eller det hurtigere værktøj `tsx`.
# Run TS directly with ts-node
npx ts-node src/index.ts

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

Kildemaps til fejlfinding

Aktivér `sourceMap: true`, så browserens udviklerværktøjer og Node.js-fejlfindere kan knytte kompilerede JS-linjer til din oprindelige TypeScript-kilde.
{ "compilerOptions": { "sourceMap": true } }

Deklarationsfiler (.d.ts)

Med `declaration: true` genererer kompileren også `.d.ts`-filer. De gør det muligt for andre TypeScript-projekter at bruge dit bibliotek med fulde typeoplysninger.
{ "compilerOptions": { "declaration": true } }
// Outputs: dist/index.js AND dist/index.d.ts

Kompileringsfejl forhindrer som standard ikke generering af resultatet

Som standard genererer `tsc` stadig JavaScript, hvis din TypeScript-kode indeholder typefejl, men afsluttes med en kode forskellig fra nul. Brug `noEmitOnError: true` for at stoppe genereringen ved fejl.
{ "compilerOptions": { "noEmitOnError": true } }

Hurtigt tjek

Hvad opnår du ved at køre `tsc --noEmit`?

Opsummering

TypeScript-kompileren omdanner .ts-filer til JavaScript. Konfigurér den med tsconfig.json, brug --watch under udviklingen, --noEmit til kun typekontrol og ts-node/tsx til at køre TypeScript direkte.
Gratis at komme i gang

Lær TypeScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser
101
Lektioner
352

Ofte stillede spørgsmål

Er lektionen “Kompilering af TypeScript til JavaScript” gratis?

Ja — hele teksten til “Kompilering af TypeScript til JavaScript” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af TypeScript Academy-kurset, skal du opgradere til CoddyKit PRO. TypeScript Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Kompilering af TypeScript til JavaScript”?

Forstå TypeScript-compileren og dens output. Du øver dig i TypeScript Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på TypeScript Academy?

Der kræves ingen tidligere erfaring. TypeScript Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Kompilering af TypeScript til JavaScript”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne TypeScript Academy-lektion?

Ja. Alle TypeScript Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

  1. JavaScripts problemområder: runtime-fejl
  2. Hvad TypeScript tilføjer til JavaScript
  3. Kompilering af TypeScript til JavaScript
  4. Hvornår TypeScript bør bruges i projekter
← Tilbage til TypeScript Academy