Inställningar för target, lib, module och JSX
Välj rätt target/lib för genererad JS och tillgängliga globala objekt. Ställ in module och JSX så att de passar din körmiljö eller bundler.
Inställningar för target, lib, module och JSX är en gratis lektion i TypeScript Academy på CoddyKit. Detta är lektion 2 av 3. 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 3 lektioner.
Introduktion
Mål: Välj rätt strategi för target (JS-utdata), lib (globala deklarationer), module (formen för import/export) och JSX i er app.
Alternativet target
target anger ECMAScript-versionen för den genererade JS-koden, till exempel ES2018 eller ES2020. Välj den lägsta version som er runtime stöder.
// tsconfig.json (excerpt)
{
"compilerOptions": {
"target": "ES2020"
}
}
// TS may downlevel features based on target
const n = 10n; // BigInt requires ES2020+Alternativet lib
lib styr vilka globala typdeklarationer som inkluderas, till exempel ES2020, DOM och WebWorker.
// tsconfig.json (excerpt)
{
"compilerOptions": {
"lib": ["ES2020", "DOM"]
}
}
// Now Promise, fetch, and DOM globals are typed if includedAlternativet module
module anger modulsystemet (CommonJS, ESNext, NodeNext och så vidare). Anpassa detta efter förväntningarna hos Node eller bundlern.
// tsconfig.json (excerpt)
{
"compilerOptions": {
"module": "ESNext"
}
}
// ESM example
import { join } from "path";
export const p = join("a", "b");Alternativet jsx
jsx väljer hur TS omvandlar JSX (react, react-jsx, preserve). Välj det som ert ramverk eller er bundler förväntar sig.
// React 17+ recommended
// tsconfig.json (excerpt)
{
"compilerOptions": {
"jsx": "react-jsx"
}
}
// JSX files compile to React 17 runtime helpers (no need for import React)Förinställningar
Använd förinställningar som passar er stack. Webbappar behöver DOM; Node-projekt utelämnar det vanligtvis och väljer NodeNext för moduler.
// Web app (Vite/React)
{
"compilerOptions": {
"target": "ES2020",
"lib": ["ES2020", "DOM"],
"module": "ESNext",
"jsx": "react-jsx"
}
}
// Node (ESM)
{
"compilerOptions": {
"target": "ES2020",
"lib": ["ES2020"],
"module": "NodeNext"
}
}Kontroll av lib-alternativet
Snabb kontroll: Vad styr alternativet lib?
Sammanfattning
Sammanfattning: target ⇒ nivån på genererad JS; lib ⇒ tillgängliga globala variabler; module ⇒ formen för import/export; jsx ⇒ läget för JSX-omvandling.
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 ”Inställningar för target, lib, module och JSX” gratis?
Ja – hela texten till ”Inställningar för target, lib, module och JSX” 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 3 lektioner.
Vad lär jag mig i ”Inställningar för target, lib, module och JSX”?
Välj rätt target/lib för genererad JS och tillgängliga globala objekt. Ställ in module och JSX så att de passar din körmiljö eller bundler. 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 2 av 3.
Hur lång tid tar lektionen ”Inställningar för target, lib, module och JSX”?
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
- Strikthetsflaggor
- Inställningar för target, lib, module och JSX
- Project References (introduktion)