M

MLOG

Svenska

Bemästra TypeScript-konfiguration med denna djupgående guide till tsconfig.json. Lär dig viktiga kompilatoralternativ, projektinställningar och avancerade konfigurationer för effektiv utveckling.

TypeScript-konfiguration: En omfattande guide till tsconfig.json

TypeScript, ett superset av JavaScript, inför statisk typning i den dynamiska världen av webbutveckling. En välkonfigurerad tsconfig.json-fil är avgörande för att utnyttja den fulla kraften i TypeScript. Denna guide ger en omfattande översikt av tsconfig.json och täcker viktiga kompilatoralternativ, projektinställningar och avancerade konfigurationer.

Vad är tsconfig.json?

Filen tsconfig.json är en konfigurationsfil som specificerar kompilatoralternativen för ett TypeScript-projekt. Den talar om för TypeScript-kompilatorn hur den ska transpilera TypeScript-kod till JavaScript. Denna fil är fundamental för att definiera projektets struktur, ställa in kompileringsregler och säkerställa konsekvens inom utvecklingsteamet, oavsett om teamet är baserat på ett enda kontor eller är distribuerat över flera kontinenter.

Skapa en tsconfig.json-fil

För att skapa en tsconfig.json-fil, navigera till ditt projekts rotkatalog i terminalen och kör följande kommando:

tsc --init

Detta kommando genererar en grundläggande tsconfig.json-fil med vanliga kompilatoralternativ. Du kan sedan anpassa filen för att passa ditt projekts specifika krav. En typisk tsconfig.json kommer att inkludera alternativ som compilerOptions, include och exclude.

Viktiga kompilatoralternativ

Avsnittet compilerOptions är hjärtat i tsconfig.json-filen. Det innehåller ett brett utbud av alternativ som styr TypeScript-kompilatorns beteende. Här är några av de viktigaste kompilatoralternativen:

target

Alternativet target specificerar ECMAScript-målversionen för den genererade JavaScript-koden. Vanliga värden inkluderar ES5, ES6 (ES2015), ES2016, ES2017, ES2018, ES2019, ES2020, ES2021, ES2022, ESNext. Att välja rätt mål är avgörande för att säkerställa kompatibilitet med den avsedda körtidsmiljön, som webbläsare eller Node.js-versioner.

Exempel:

{
  "compilerOptions": {
    "target": "ES2020"
  }
}

module

Alternativet module specificerar stilen för modulkodsgenerering. Vanliga värden inkluderar CommonJS, AMD, System, UMD, ES6 (ES2015), ES2020 och ESNext. Valet av modulsystem beror på målmiljön och den modul-bundler som används (t.ex. Webpack, Rollup, Parcel). För Node.js används ofta CommonJS, medan för moderna webbapplikationer föredras ES6 eller ESNext med en modul-bundler. Att använda ESNext gör det möjligt för utvecklare att utnyttja de senaste funktionerna och optimeringarna, samtidigt som de förlitar sig på att bundlern hanterar det slutliga modulformatet.

Exempel:

{
  "compilerOptions": {
    "module": "ESNext"
  }
}

lib

Alternativet lib specificerar en lista över biblioteksfiler som ska inkluderas i kompileringen. Dessa biblioteksfiler tillhandahåller typdefinitioner för inbyggda JavaScript-API:er och webbläsar-API:er. Vanliga värden inkluderar ES5, ES6, ES2015, ES2016, ES2017, ES2018, ES2019, ES2020, ES2021, ES2022, ESNext, DOM, WebWorker, ScriptHost, ES2015.Core, ES2015.Collection, ES2015.Iterable, ES2015.Promise, ES2015.Proxy, ES2015.Reflect, ES2015.Generator, ES2015.Symbol, ES2015.Symbol.WellKnown, ES2016.Array.Include, ES2017.object, ES2017.Intl, ES2017.SharedMemory, ES2017.String, ES2017.TypedArrays, ES2018.Intl, ES2018.Promise, ES2018.RegExp, ES2019.Array, ES2019.Object, ES2019.String, ES2019.Symbol, ES2020.BigInt, ES2020.Promise, ES2020.String, ES2020.Symbol.WellKnown, ES2021.Promise, ES2021.String, ES2021.WeakRef, ES2022.Error, ES2022.Object, ES2022.String, och många fler. Att välja lämpliga bibliotek säkerställer att TypeScript-kompilatorn har den nödvändiga typinformationen för målmiljön. Användning av DOM-biblioteket gör att projektet kan kompilera kod som använder webbläsarspecifika API:er utan typfel.

Exempel:

{
  "compilerOptions": {
    "lib": ["ES2020", "DOM"]
  }
}

allowJs

Alternativet allowJs tillåter TypeScript-kompilatorn att kompilera JavaScript-filer tillsammans med TypeScript-filer. Detta är användbart för att stegvis migrera befintliga JavaScript-projekt till TypeScript. Att ställa in detta till true gör det möjligt för kompilatorn att bearbeta .js-filer, vilket möjliggör en gradvis anpassning till TypeScript inom ett projekt.

Exempel:

{
  "compilerOptions": {
    "allowJs": true
  }
}

jsx

Alternativet jsx specificerar hur JSX-syntax ska hanteras. Vanliga värden inkluderar preserve, react, react-native och react-jsx. preserve bevarar JSX-syntaxen i output, medan react omvandlar JSX till React.createElement-anrop. react-jsx använder den nya JSX-transformeringen som introducerades i React 17, vilken inte kräver import av React. Att välja rätt JSX-alternativ är avgörande för projekt som använder React eller andra JSX-baserade bibliotek.

Exempel:

{
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}

declaration

Alternativet declaration genererar motsvarande .d.ts-deklarationsfiler för varje TypeScript-fil. Deklarationsfiler innehåller typinformation och används av andra TypeScript-projekt för att konsumera den kompilerade koden. Att generera deklarationsfiler är avgörande för att skapa återanvändbara bibliotek och moduler. Dessa filer gör det möjligt för andra TypeScript-projekt att förstå de typer och gränssnitt som biblioteket exponerar utan att behöva kompilera den ursprungliga källkoden.

Exempel:

{
  "compilerOptions": {
    "declaration": true
  }
}

sourceMap

Alternativet sourceMap genererar källkartsfiler (source map files), som mappar den genererade JavaScript-koden tillbaka till den ursprungliga TypeScript-koden. Källkartor är avgörande för att felsöka TypeScript-kod i webbläsare och andra miljöer. När ett fel inträffar i JavaScript-koden gör källkartan det möjligt för utvecklaren att se motsvarande TypeScript-kod i felsökaren, vilket gör det lättare att identifiera och åtgärda problemet.

Exempel:

{
  "compilerOptions": {
    "sourceMap": true
  }
}

outDir

Alternativet outDir specificerar utdatakatalogen för de genererade JavaScript-filerna. Detta alternativ hjälper till att organisera projektets byggresultat genom att separera källkoden från den kompilerade koden. Att använda en outDir gör det lättare att hantera byggprocessen och driftsätta applikationen.

Exempel:

{
  "compilerOptions": {
    "outDir": "dist"
  }
}

rootDir

Alternativet rootDir specificerar rotkatalogen för TypeScript-projektet. Kompilatorn använder denna katalog som bas för att matcha modulnamn. Detta alternativ är särskilt viktigt för projekt med en komplex katalogstruktur. Att ställa in rootDir korrekt säkerställer att kompilatorn kan hitta alla nödvändiga moduler och beroenden.

Exempel:

{
  "compilerOptions": {
    "rootDir": "src"
  }
}

strict

Alternativet strict aktiverar alla strikta typkontrollsalternativ. Detta rekommenderas starkt för nya TypeScript-projekt eftersom det hjälper till att fånga potentiella fel tidigt i utvecklingsprocessen. Aktivering av strikt läge framtvingar striktare typkontrollsregler, vilket leder till mer robust och underhållbar kod. Det är en bästa praxis att aktivera strikt läge i alla nya TypeScript-projekt.

Exempel:

{
  "compilerOptions": {
    "strict": true
  }
}

esModuleInterop

Alternativet esModuleInterop möjliggör interoperabilitet mellan CommonJS- och ES-moduler. Detta är viktigt för projekt som använder båda typerna av moduler. När esModuleInterop är aktiverat kommer TypeScript automatiskt att hantera skillnaderna mellan CommonJS- och ES-moduler, vilket gör det lättare att importera och exportera moduler mellan de två systemen. Detta alternativ är särskilt användbart när man arbetar med tredjepartsbibliotek som kan använda olika modulsystem.

Exempel:

{
  "compilerOptions": {
    "esModuleInterop": true
  }
}

moduleResolution

Alternativet moduleResolution specificerar hur TypeScript löser moduler som importeras. Vanliga värden inkluderar Node och Classic. Modulmatchningsstrategin Node är standard och baseras på Node.js modulmatchningsalgoritm. Strategin Classic är äldre och används mer sällan. Att använda Node-strategin säkerställer att TypeScript korrekt kan matcha moduler som importeras i en Node.js-miljö.

Exempel:

{
  "compilerOptions": {
    "moduleResolution": "Node"
  }
}

baseUrl och paths

Alternativen baseUrl och paths används för att konfigurera modulmatchning för icke-relativa modulimporter. Alternativet baseUrl specificerar baskatalogen för att matcha icke-relativa modulnamn. Alternativet paths låter dig mappa modulnamn till specifika platser i filsystemet. Dessa alternativ är särskilt användbara för projekt med en komplex katalogstruktur och för att förenkla modulimporter. Att använda baseUrl och paths kan göra koden mer läsbar och underhållbar.

Exempel:

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

Inkludera- och exkludera-alternativ

Alternativen include och exclude specificerar vilka filer som ska inkluderas i kompileringen och vilka filer som ska exkluderas. Dessa alternativ använder glob-mönster för att matcha filnamn. Att använda include och exclude låter dig styra vilka filer som bearbetas av TypeScript-kompilatorn, vilket förbättrar byggprestanda och minskar fel. Det är en bästa praxis att explicit specificera vilka filer som ska inkluderas i kompileringen.

Exempel:

{
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

Extends-alternativet

Alternativet extends låter dig ärva kompilatoralternativ från en annan tsconfig.json-fil. Detta är användbart för att dela gemensamma konfigurationsinställningar mellan flera projekt eller för att skapa baskonfigurationer. Att använda extends-alternativet främjar återanvändning av kod och minskar duplicering. Det är en bästa praxis att skapa baskonfigurationer och utöka dem i enskilda projekt.

Exempel:

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "jsx": "react-jsx"
  },
  "include": ["src/**/*"]
}

Avancerade konfigurationer

Utöver de grundläggande kompilatoralternativen stöder tsconfig.json avancerade konfigurationer för specialiserade scenarier.

Inkrementell kompilering

För stora projekt kan inkrementell kompilering avsevärt förbättra byggtiderna. TypeScript kan cacha resultaten från tidigare kompileringar och endast kompilera om filer som har ändrats. Att aktivera inkrementell kompilering kan dramatiskt minska byggtiderna för stora projekt. Detta är särskilt viktigt för projekt med ett stort antal filer och beroenden.

{
  "compilerOptions": {
    "incremental": true,
    "tsBuildInfoFile": ".tsbuildinfo"
  }
}

Projektreferenser

Projektreferenser låter dig strukturera stora TypeScript-projekt i mindre, oberoende moduler. Detta kan förbättra byggtider och kodorganisation. Att använda projektreferenser kan göra stora projekt mer hanterbara och lättare att underhålla. Det är en bästa praxis att använda projektreferenser för stora, komplexa projekt.

{
  "compilerOptions": {
    "composite": true
  },
  "references": [
    { "path": "./module1" },
    { "path": "./module2" }
  ]
}

Anpassade typdefinitioner

Ibland kan du behöva tillhandahålla typdefinitioner för JavaScript-bibliotek som inte har dem. Du kan skapa anpassade .d.ts-filer för att definiera typerna för dessa bibliotek. Att skapa anpassade typdefinitioner låter dig använda JavaScript-bibliotek i din TypeScript-kod utan att offra typsäkerheten. Detta är särskilt användbart när man arbetar med äldre JavaScript-kod eller bibliotek som inte tillhandahåller sina egna typdefinitioner.

// custom.d.ts
declare module 'my-library' {
  export function doSomething(x: number): string;
}

Bästa praxis

Felsökning av vanliga problem

Att konfigurera tsconfig.json kan ibland vara utmanande. Här är några vanliga problem och deras lösningar:

Problem med modulmatchning

Om du stöter på fel med modulmatchning, se till att alternativet moduleResolution är korrekt konfigurerat och att alternativen baseUrl och paths är korrekt inställda. Dubbelkolla sökvägarna som specificerats i paths-alternativet för att säkerställa att de är korrekta. Verifiera att alla nödvändiga moduler är installerade i node_modules-katalogen.

Typfel

Typfel kan uppstå om typdefinitionerna är felaktiga eller saknas. Se till att du har rätt typdefinitioner installerade för alla bibliotek du använder. Om du använder ett JavaScript-bibliotek som inte har typdefinitioner, överväg att skapa anpassade typdefinitioner.

Kompileringsfel

Kompileringsfel kan uppstå om det finns syntaxfel eller typfel i din TypeScript-kod. Granska felmeddelandena noggrant och åtgärda eventuella syntaxfel eller typfel. Se till att din kod följer TypeScript-kodningskonventionerna.

Sammanfattning

En välkonfigurerad tsconfig.json-fil är avgörande för ett framgångsrikt TypeScript-projekt. Genom att förstå de väsentliga kompilatoralternativen och avancerade konfigurationerna kan du optimera ditt utvecklingsarbetsflöde, förbättra kodkvaliteten och säkerställa kompatibilitet med målmiljön. Att investera tid i att korrekt konfigurera tsconfig.json kommer att löna sig i längden genom att minska fel, förbättra underhållbarheten och effektivisera byggprocessen. Detta resulterar i mer effektiv och tillförlitlig mjukvaruutveckling. Informationen som tillhandahålls här är utformad för att vara universellt tillämplig och bör ge en solid grund för att starta ett nytt projekt med TypeScript.

Kom ihåg att konsultera den officiella TypeScript-dokumentationen för den mest aktuella informationen och detaljerade förklaringar av alla tillgängliga kompilatoralternativ. TypeScript-dokumentationen är en värdefull resurs för att förstå finesserna i TypeScript-konfiguration.