TypeScript och tsconfig.json

Denna artikel förklarar TypeScript och tsconfig.json.

Vi börjar med TypeScripts grundläggande roll och förklarar, med specifika exempel, hur tsconfig.json fungerar i ett projekt.

YouTube Video

TypeScript och tsconfig.json

TypeScript är 'JavaScript med typer.'. För att använda TypeScript effektivt i verkliga projekt är det dock nödvändigt att förstå tsconfig.json korrekt och konfigurera den medvetet.

Varför behöver vi TypeScript?

Den främsta anledningen till att använda TypeScript är 'möjligheten att fånga fel innan körning.'.

1function add(a: number, b: number): number {
2  return a + b;
3}
4
5add(1, "2");

Den här koden skulle inte orsaka ett fel i JavaScript förrän efter att programmet körs, men i TypeScript ger det ett typsfel vid kompilering.

Denna 'upptäckt i ett tidigt skede' förbättrar avsevärt utvecklingseffektivitet och kvalitet.

Hur körs TypeScript?

I princip kan TypeScript inte köras som det är. Du måste konvertera det till JavaScript med tsc (TypeScript Compiler)..

1npm install -D typescript
2npx tsc --init

• Genom att utföra denna operation genereras tsconfig.json, vilket är den centrala filen som definierar TypeScript-projektets beteende.

Vilken roll har tsconfig.json?

tsconfig.json är en konfigurationsfil som bestämmer 'vilka filer', 'med vilka regler' och 'hur de ska konverteras.'. Även om det kan verka komplicerat till en början är det bara några få inställningar som verkligen är viktiga.

1{
2  "compilerOptions": {
3    "target": "ES2020",
4    "module": "ESNext",
5    "strict": true
6  }
7}

• Med bara dessa inställningar är modern och säker TypeScript-utveckling möjlig.

target: Versionen av JavaScript som ska genereras

target bestämmer vilken nivå av JavaScript-specifikation som ska genereras.

1"target": "ES2020"

På så sätt kommer TypeScript att generera JavaScript motsvarande ES2020. För äldre miljöer, välj ES5; för endast de senaste miljöerna, välj ES2022 osv.

Vid val av ESNext

1"target": "ESNext"

• ESNext anger att den senaste tillgängliga JavaScript-syntaxen ska genereras som den är. TypeScript transpirerar inte syntaxen utan lämnar det till runtime-miljön, som Node.js eller webbläsare, att hantera den.

• ESNext är därför lämpligt när du endast riktar dig mot den senaste Node.js eller när du använder Babel eller en bundler för att transpilerera separat. Om runtime-miljön däremot inte stöder den senaste syntaxen, kan detta leda till fel under körning, så var försiktig.

module: Ange modultypen

module anger modulformatet.

1"module": "ESNext"

• ESNext är standard på frontend och i moderna Node.js-miljöer.
• Välj "CommonJS" endast om du behöver CommonJS.

strict: Maximera typesäkerhet

strict är ett reglage för att maximera TypeScripts säkerhet.

1"strict": true

• Att aktivera detta fångar grundligt otydliga typer och potentiella buggar.

strict-läge och implicit any

När du aktiverar strict behandlar TypeScript variabler där typen inte kan utläsas som ett fel.

1function printValue(value) {
2	console.log(value);
3}

• Denna variabel, value, har ingen typinformation vid deklarationen, så TypeScript kan inte bestämma dess typ. Följaktligen används any implicit, vilket ger en varning (eller ett fel) i strict-läge.

1function printValue(value: number) {
2	console.log(value);
3}

• Genom att explicit ange typen så här kan TypeScript förstå att 'den här variabeln hanterar endast nummer.'. I TypeScript är det viktigare att typen kan entydigt fastställas än att typen kan utelämnas.

include/exclude: Kontrollera vilka filer som ska kompileras

I tsconfig.json kan du ange vilka filer som ska inkluderas och vilka filer som ska uteslutas från kompilering.

1{
2  "include": ["src"],
3  "exclude": ["node_modules"]
4}

• Med detta kommer endast filer under src att hanteras av TypeScript.
• node_modules som anges i exclude kommer att uteslutas från kompilering även om den finns under en sökväg som inkluderas av include.

outDir: Ange utmatningsmapp

Ange outDir för att hantera sökvägen för byggresultat.

1"outDir": "dist"

• Med detta kommer alla kompilerade filer att genereras i mappen dist. I praktiken är det standard att separera källkod från byggartefakter.

rootDir: Ange källkodsmappen

rootDir anger mappen som TypeScript betraktar som källkodens rot.

1"rootDir": "src"

• Den här inställningen gör att TypeScript bevarar mappstrukturen baserat på src vid generering av filer. Till exempel kommer src/index.ts att genereras som dist/index.js.

• Strukturen för mappen som anges i rootDir kommer att återskapas i outDir.

esModuleInterop: Brygga mellan CommonJS och ES-moduler

Låt oss nu titta på esModuleInterop.

1"esModuleInterop": true

• Om det aktiveras kan du säkert använda CommonJS-moduler med import-syntaxen.

1import fs from "fs";

• Denna inställning är nästan nödvändig när du använder Node.js.

noImplicitAny: Förbjud implicit 'any' typer

Det är också viktigt att förstärka typkontroller i tsconfig.json.

1"noImplicitAny": true

• Med detta kan du förbjuda implicit any-typer. Detta gör att du pålitligt kan upptäcka ställen där du glömt att ange en typ.

Konfiguration för att identifiera oanvänd kod

Inställningar för att identifiera oanvänd kod är också användbara för att förbättra underhållbarheten.

1"noUnusedLocals": true,
2"noUnusedParameters": true

• Med detta flaggas onödiga variabler och argument omedelbart med varningar.

lib: Definiera de inbyggda API:er som är tillgängliga

lib är en inställning som anger de standard-API:er som TypeScript antar finns.

1"lib": ["ES2020", "DOM"]

• Med denna inställning blir följande typer tillgängliga:. Med ES2020 blir moderna funktioner som Promise, Map och Set tillgängliga. Med DOM blir webbläsar-API:er som document, window och HTMLElement tillgängliga.

På frontend, inkludera DOM; för projekt endast för Node.js, ta bort DOM för att förhindra att onödiga globala typer inkluderas.

moduleResolution: Regler för moduluppslagning

moduleResolution bestämmer hur moduler som anges i import-satser löses upp.

1"moduleResolution": "Node"

De två huvudsakliga alternativen är följande:.

• Om du anger Node används Node.js regler för moduluppslagning.
• Classic är den gamla, TypeScript-specifika metoden, men den används sällan idag.

I miljöer som använder Node.js eller en bundler är det säkert att explicit ange Node.

En minimal, produktionsklar tsconfig.json

Baserat på vad vi har gått igenom hittills, skulle en minimal, produktionsklar tsconfig.json se ut så här:.

 1{
 2  "compilerOptions": {
 3    "target": "ES2020",
 4    "module": "ESNext",
 5    "moduleResolution": "Node",
 6    "lib": ["ES2020", "DOM"],
 7    "strict": true,
 8    "rootDir": "src",
 9    "outDir": "dist",
10    "esModuleInterop": true,
11    "noImplicitAny": true,
12    "noUnusedLocals": true,
13    "noUnusedParameters": true
14  },
15  "include": ["src"]
16}

Denna konfiguration ger en trygg grund för både frontend- och Node.js-projekt.

Sammanfattning: tsconfig.json är en 'regelbok'

tsconfig.json är inte bara en konfigurationsfil, utan en 'regelbok' som gäller för hela projektet. Med tsconfig.json definieras viktiga riktlinjer tydligt, som följande:.

• Nivån på typsäkerhet.
• Kodningskonventioner för ditt team.
• Förebyggande av framtida fel.

Genom att förstå tsconfig.json kommer du att kunna inte bara skriva TypeScript utan också utforma dina projekt för säker TypeScript-användning.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video