TypeScript og tsconfig.json

Denne artikel forklarer TypeScript og tsconfig.json.

Ud fra TypeScripts grundlæggende rolle vil vi med konkrete eksempler forklare, hvordan tsconfig.json fungerer i et projekt.

YouTube Video

TypeScript og tsconfig.json

TypeScript er 'JavaScript med typer.'. For effektivt at kunne bruge TypeScript i rigtige projekter, er det dog vigtigt at forstå tsconfig.json korrekt og bevidst konfigurere den.

Hvorfor har vi brug for TypeScript?

Den primære grund til at bruge TypeScript er 'muligheden for at fange fejl før eksekvering.'.

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

Denne kode ville ikke give fejl i JavaScript før køretid, men i TypeScript giver det en typefejl under kompilering.

Denne 'tidlige opdagelse' forbedrer udviklingseffektiviteten og kvaliteten markant.

Hvordan eksekveres TypeScript?

TypeScript kan som udgangspunkt ikke køres direkte. Du skal konvertere det til JavaScript ved hjælp af tsc (TypeScript Compiler)..

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

• Når man udfører denne operation, genereres tsconfig.json, som er den centrale fil, der definerer TypeScript-projektets opførsel.

Hvad er formålet med tsconfig.json?

tsconfig.json er en konfigurationsfil, der bestemmer 'hvilke filer', 'med hvilke regler' og 'hvordan de konverteres.'. Selvom det kan virke komplekst i starten, er det kun få indstillinger, der reelt er vigtige.

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

• Med blot disse indstillinger er moderne og sikker TypeScript-udvikling muligt.

target: JavaScript-versionen, der skal genereres

target angiver specifikationsniveauet for det genererede JavaScript.

1"target": "ES2020"

Med denne indstilling vil TypeScript generere JavaScript svarende til ES2020. For ældre miljøer, vælg ES5; for kun de nyeste miljøer, vælg ES2022 osv.

Når du angiver ESNext

1"target": "ESNext"

• ESNext angiver at den nyeste tilgængelige JavaScript-syntaks udskrives som den er. TypeScript transpilerer ikke syntaksen, men overlader det til runtime-miljøet, såsom Node.js eller browsere, at håndtere den.

• Derfor er ESNext velegnet, hvis du kun sigter efter den nyeste Node.js eller bruger Babel/bundler til separat transpilation. Omvendt kan det give køretidsfejl, hvis miljøet ikke understøtter den nyeste syntaks – man skal altså være opmærksom.

module: Angiv modultypen

module angiver modultypen.

1"module": "ESNext"

• ESNext er standarden i frontend og moderne Node.js-miljøer.
• Vælg kun "CommonJS", hvis du har brug for CommonJS.

strict: Maksimer typesikkerhed

strict er en kontakt, der maksimerer TypeScripts sikkerhed.

1"strict": true

• Aktivering af dette vil effektivt fange tvetydige typer og potentielle fejl.

strict mode og implicit any

Hvis du aktiverer strict, behandles variabler uden tydelig type som en fejl i TypeScript.

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

• Variablen value har ikke typeoplysning ved deklaration, så TypeScript kan ikke fastlægge dens type. Derfor bruges any implicit, hvilket udløser en advarsel (fejl) i strict mode.

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

• Ved tydeligt at angive typen kan TypeScript se, at 'denne variabel kun håndterer tal.'. I TypeScript er det vigtigere, at typen kan bestemmes entydigt, end at typen kan udelades.

include/exclude: Angivelse af hvilke filer der skal kompileres

I tsconfig.json kan du angive, hvilke filer der skal inkluderes, og hvilke der skal udelades fra kompilering.

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

• Dermed vil det kun være filerne under src, der håndteres af TypeScript.
• node_modules angivet i exclude, vil blive udeladt fra kompilering, selv hvis det ligger under en sti inkluderet af include.

outDir: Angiv output-mappen

Angiv outDir for at bestemme, hvor build-output placeres.

1"outDir": "dist"

• På den måde vil alle kompilerede filer blive placeret i dist-mappen. I praksis er det standard at adskille kildekode og build-artifakter.

rootDir: Angiv kildekode-mappen

rootDir angiver mappen, som TypeScript betragter som rod for kildekoden.

1"rootDir": "src"

• Denne indstilling gør det muligt for TypeScript at bevare mappestrukturen baseret på src, når filer genereres. Eksempelvis vil src/index.ts blive udskrevet som dist/index.js.

• Strukturen af den mappe, som angives i rootDir, bliver gentaget i outDir.

esModuleInterop: Bro mellem CommonJS og ES Modules

Lad os se nærmere på esModuleInterop.

1"esModuleInterop": true

• Hvis det aktiveres, kan du sikkert bruge CommonJS-moduler sammen med import-syntaksen.

1import fs from "fs";

• Denne indstilling er næsten uundværlig, når du bruger Node.js.

noImplicitAny: Forbyd implicitte 'any'-typer

Det er også vigtigt at styrke typecheck i tsconfig.json.

1"noImplicitAny": true

• Med dette kan du forbyde implicitte any-typer. Dette giver dig mulighed for pålideligt at opdage steder, hvor du har glemt at angive en type.

Indstilling til detektering af ubrugt kode

Indstillinger for at finde ubrugt kode hjælper også med at forbedre vedligeholdelsen.

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

• Derved vil unødvendige variabler og argumenter straks blive markeret med advarsler.

lib: Angiv hvilke indbyggede API'er der er tilgængelige

lib er en indstilling, der angiver de standard-API'er, TypeScript går ud fra findes.

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

• Med denne indstilling bliver følgende typer tilgængelige:. Med ES2020 bliver moderne funktioner som Promise, Map og Set tilgængelige. Med DOM bliver browser-API'er som document, window og HTMLElement tilgængelige.

I frontend skal du inkludere DOM. For rene Node.js-projekter bør du fjerne DOM for at undgå unødvendige globale typer.

moduleResolution: Regler for modulopslag

moduleResolution fastlægger hvordan moduler, der er angivet i import-sætninger, bliver fundet.

1"moduleResolution": "Node"

De to vigtigste muligheder er:.

• Hvis du angiver Node, bruges Node.js-modulopslagsreglerne.
• Classic er den gamle, TypeScript-specifikke metode, men bruges sjældent i dag.

I miljøer med Node.js eller bundler er det sikkert at angive Node eksplicit.

En minimal og produktionsklar tsconfig.json

Baseret på ovenstående ville en minimal og produktionsklar tsconfig.json se sådan ud:.

 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}

Denne konfiguration giver et sikkert fundament for både frontend- og Node.js-projekter.

Opsummering: tsconfig.json er et 'regelværk'

tsconfig.json er ikke bare en konfigurationsfil, men et 'regelværk', der gælder hele projektet. Med tsconfig.json defineres vigtige politikker som følgende tydeligt:.

• Niveauet af typesikkerhed.
• Kodestandarder for dit team.
• Forebygning af fremtidige fejl.

Ved at forstå tsconfig.json vil du kunne skrive TypeScript og designe dine projekter til sikker brug af TypeScript.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video