PricingLoginStart free
Frontend Academy · Lektion

Kompilera TS och tsconfig.json

Kör tsc för att kompilera TypeScript och konfigurera kompilatorn med alternativ i tsconfig.json, till exempel strict, target och outDir.

Lektion 4 av 413 steg

Kompilera TS och tsconfig.json är en gratis lektion i Frontend Academy på CoddyKit. Detta är lektion 4 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 Frontend Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Frontend Academy innehåller totalt 4 lektioner.

Installera TypeScript-kompilatorn

Installera TypeScript som ett utvecklingsberoende. CLI-verktyget tsc kompilerar TypeScript-filer. Med Vite eller Next.js hanterar bundlern kompileringen — men tsc används fortfarande för typkontroll.

npm install --save-dev typescript
npx tsc --version  # verify installation
npx tsc app.ts     # compile a single file

Initiera tsconfig.json

Kör npx tsc --init för att generera en tsconfig.json där alla alternativ är kommenterade och har rimliga standardvärden. Den här filen är TypeScript-kompilatorns enda konfigurationsfil.

npx tsc --init
# Creates tsconfig.json with ~100 commented-out options

Strukturen hos tsconfig.json

Huvudsektionerna är: compilerOptions (kompilatorns beteende), include (vilka filer som ska kompileras) och exclude (filer som ska hoppas över).

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "outDir": "./dist",
    "strict": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

target — JavaScript-version för utdata

target anger vilken JavaScript-version tsc ska generera. ES2022 eller ESNext för moderna miljöer. ES5 för maximal kompatibilitet (hanteras vanligtvis av Babel i stället).

module — modulsystem

module styr modulformatet för utdata. CommonJS för Node.js. ESNext eller ES2022 för bundlers (Vite, webpack). NodeNext för moderna Node.js-projekt med package.json-inställningen type:module.

strict — flaggan för strikt typkontroll

"strict": true aktiverar en uppsättning strikta kontroller: strictNullChecks, noImplicitAny, strictFunctionTypes med flera. Aktivera den alltid i nya projekt — den upptäcker flest fel.

{
  "compilerOptions": {
    "strict": true  // enables all strict checks
    // or individually:
    // "strictNullChecks": true,
    // "noImplicitAny": true
  }
}

strictNullChecks — eliminera null-relaterade fel

När strictNullChecks är aktiverat kan null och undefined inte tilldelas till andra typer om de inte uttryckligen ingår i en union. Det tvingar er att hantera null-fall.

// Without strictNullChecks:
const name: string = null; // allowed

// With strictNullChecks:
const name: string = null; // Error!
const name2: string | null = null; // OK

outDir och rootDir

outDir anger var kompilerade JS-filer placeras. rootDir anger roten för TypeScript-källfilerna. Tillsammans återskapar de källstrukturen under dist/.

// src/utils.ts → dist/utils.js
{
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./dist"
  }
}

paths — modulalias

Konfigurera sökvägsalias med alternativet paths (och baseUrl). Det gör att ni kan importera @/components/Button i stället för ../../components/Button.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"]
    }
  }
}

Övervakningsläge och endast typkontroll

tsc --watch kompilerar om filer när de ändras. tsc --noEmit kör typkontroll utan att skapa utdatafiler — användbart i CI för att validera typer utan att duplicera bundlerns arbete.

# Type check only (no output):
npx tsc --noEmit

# Watch and recompile:
npx tsc --watch

Utöka tsconfig.json

Använd extends för att ärva från en baskonfiguration. Delade baskonfigurationer (som @tsconfig/strictest) tillhandahåller vedertagna rekommendationer från communityn.

// Install:
npm install -D @tsconfig/strictest

// tsconfig.json:
{
  "extends": "@tsconfig/strictest",
  "compilerOptions": {
    "outDir": "./dist"
  }
}

Snabb kontroll

Vilket tsconfig-alternativ aktiverar hela uppsättningen strikta typkontroller?

Besvara frågan i den interaktiva lektionen

Sammanfattning: tsconfig.json

tsc kompilerar TypeScript till JavaScript. tsconfig.json styr target (ES-version för utdata), module (modulsystem), outDir, strict och paths. strict: true upptäcker flest fel. Använd --noEmit i CI för ren typkontroll. Utöka vedertagna baskonfigurationer från communityn för bästa praxis.

Gratis att börja

Lär dig HTML 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
41
Lektioner
163
Börja lära dig gratisVisa hela kursen

Vanliga frågor

Är lektionen ”Kompilera TS och tsconfig.json” gratis?

Ja – hela texten till ”Kompilera TS och tsconfig.json” 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 Frontend Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Frontend Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Kompilera TS och tsconfig.json”?

Kör tsc för att kompilera TypeScript och konfigurera kompilatorn med alternativ i tsconfig.json, till exempel strict, target och outDir. Ni övar på Frontend 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 Frontend Academy?

Du behöver inga förkunskaper. Utbildningen i Frontend 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 4 av 4.

Hur lång tid tar lektionen ”Kompilera TS och tsconfig.json”?

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 Frontend Academy-lektionen?

Ja. Varje Frontend 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. Varför TypeScript: typer fångar fel vid kompilering
  2. Primitiva typer, unionstyper och typalias
  3. Gränssnitt och objekttyper
  4. Kompilera TS och tsconfig.json
← Tillbaka till Frontend Academy