TypeScript og tsconfig.json

Denne artikkelen forklarer TypeScript og tsconfig.json.

Fra den grunnleggende rollen til TypeScript vil vi med konkrete eksempler forklare hvordan tsconfig.json fungerer i et prosjekt.

YouTube Video

TypeScript og tsconfig.json

TypeScript er 'JavaScript med typer.'. For å bruke TypeScript effektivt i virkelige prosjekter, er det viktig å forstå tsconfig.json riktig og konfigurere det bevisst.

Hvorfor trenger vi TypeScript?

Den viktigste grunnen til å bruke TypeScript er 'muligheten til å fange feil før kjøring.'.

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

Denne koden ville ikke forårsake en feil i JavaScript før ved kjøring, men i TypeScript gir det en typefeil ved kompilering.

Denne 'tidlige oppdagelsen' forbedrer utviklingseffektiviteten og kvaliteten betydelig.

Hvordan kjøres TypeScript?

I utgangspunktet kan ikke TypeScript kjøres som det er. Du må konvertere det til JavaScript ved å bruke tsc (TypeScript Compiler)..

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

• Ved å utføre denne operasjonen opprettes tsconfig.json, som gir hovedfilen som definerer oppførselen til TypeScript-prosjektet.

Hva er rollen til tsconfig.json?

tsconfig.json er en konfigurasjonsfil som bestemmer 'hvilke filer', 'med hvilke regler' og 'hvordan de skal konverteres.'. Selv om det kan virke komplisert i begynnelsen, er det egentlig bare noen få innstillinger som er viktige.

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

• Med bare disse innstillingene er moderne og trygg TypeScript-utvikling mulig.

target: Versjonen av JavaScript som skal produseres

target bestemmer spesifikasjonsnivået for det produserte JavaScript.

1"target": "ES2020"

Med dette vil TypeScript produsere JavaScript tilsvarende ES2020. For eldre miljøer, velg ES5; for kun de nyeste miljøene, velg ES2022, osv.

Når du spesifiserer ESNext

1"target": "ESNext"

• ESNext angir at den nyeste tilgjengelige JavaScript-syntaksen skal produseres som den er. TypeScript transpilerer ikke syntaksen, men overlater det til kjøremiljøet, som Node.js eller nettlesere, å håndtere det.

• Derfor passer ESNext når du kun sikter mot den nyeste versjonen av Node.js eller når du bruker Babel eller en bundler for å transpile separat. På den annen side, hvis kjøremiljøet ikke støtter den nyeste syntaksen, kan det oppstå kjørefeil, så man må være forsiktig.

module: Angi modultypen

module angir modulformatet.

1"module": "ESNext"

• ESNext er standarden i frontend- og moderne Node.js-miljøer.
• Velg "CommonJS" bare hvis du trenger CommonJS.

strict: Maksimer typesikkerheten

strict er en innstilling for å maksimere TypeScript sin sikkerhet.

1"strict": true

• Ved å aktivere dette fanges tvetydige typer og mulige feil grundig opp.

strict-modus og implicit any

Når du aktiverer strict, behandler TypeScript variabler der typen ikke kan utledes som en feil.

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

• Denne variabelen value har ikke typeinformasjon når den deklareres, så TypeScript kan ikke bestemme typen. Som et resultat brukes any implisitt, noe som vil utløse en advarsel (feil) i strict-modus.

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

• Ved eksplisitt å angi typen på denne måten, kan TypeScript forstå at 'denne variabelen kun håndterer tall.'. I TypeScript er det viktigere at typen kan bestemmes entydig enn at typen kan utelates.

include/exclude: Kontrollere hvilke filer som skal kompileres

I tsconfig.json kan du angi hvilke filer som skal inkluderes og hvilke som skal ekskluderes fra kompilering.

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

• Med dette vil kun filene under src håndteres av TypeScript.
• node_modules angitt i exclude vil ekskluderes fra kompilering selv om den ligger under en bane som er inkludert i include.

outDir: Angi utdata-mappen

Angi outDir for å styre hvor byggeutdata skal havne.

1"outDir": "dist"

• Da vil alle kompilert filer bli lagt i dist-mappen. I praksis er det standard å skille kildekode og bygde filer.

rootDir: Angi kilde-mappen

rootDir angir mappen som TypeScript skal betrakte som rot for kildekoden.

1"rootDir": "src"

• Denne innstillingen gjør at TypeScript bevarer mappe-strukturen basert på src når filer produseres. For eksempel blir src/index.ts til dist/index.js.

• Strukturen i mappen spesifisert i rootDir vil bli gjenskapt i outDir.

esModuleInterop: Kobler sammen CommonJS og ES-moduler

La oss se på esModuleInterop.

1"esModuleInterop": true

• Hvis dette er aktivert, kan man trygt bruke CommonJS-moduler med import-syntaks.

1import fs from "fs";

• Denne innstillingen er nesten uunnværlig når du bruker Node.js.

noImplicitAny: Forby implicitte 'any'-typer

Det er også viktig å styrke typekontroller i tsconfig.json.

1"noImplicitAny": true

• Med dette kan du forby bruk av implisitte any-typer. Dette gjør det mulig å oppdage der man har glemt å angi en type.

Konfigurasjon for å oppdage ubrukt kode

Innstillinger for å oppdage ubrukt kode hjelper også med å forbedre vedlikeholdbarhet.

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

• Da blir overflødige variabler og argumenter umiddelbart markert med advarsler.

lib: Angi innebygde API-er som er tilgjengelige for bruk

lib er en innstilling som angir standard-API-er som TypeScript antar eksisterer.

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

• Med denne innstillingen blir følgende typer tilgjengelige:. Med ES2020 blir moderne funksjoner som Promise, Map og Set tilgjengelige. Med DOM blir nettleser-API-er som document, window og HTMLElement tilgjengelige.

For frontend, inkluder DOM; for rene Node.js-prosjekter, fjern DOM for å unngå unødvendige globale typer.

moduleResolution: Reglene for oppslag av moduler

moduleResolution bestemmer hvordan moduler spesifisert i import-setninger blir funnet.

1"moduleResolution": "Node"

De to hovedalternativene er:.

• Hvis du angir Node, brukes Node.js sine regler for moduloppslag.
• Classic er den gamle, TypeScript-spesifikke metoden, men brukes sjelden i dag.

I miljøer med Node.js eller en bundler er det trygt å eksplisitt angi Node.

En minimal, produksjonsklar tsconfig.json

Basert på det vi har gått gjennom, vil en minimal, produksjonsklar tsconfig.json se slik ut:.

 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 konfigurasjonen gir et trygt fundament for både frontend- og Node.js-prosjekter.

Oppsummering: tsconfig.json er en 'regelbok'

tsconfig.json er ikke bare en konfigurasjonsfil, men en 'regelbok' som gjelder for hele prosjektet. Med tsconfig.json defineres viktige prinsipper som følgende tydelig:.

• Nivået av typesikkerhet.
• Kodekonvensjoner for teamet.
• Forebygging av framtidige feil.

Ved å forstå tsconfig.json kan du ikke bare skrive TypeScript, men også designe prosjektene dine for trygg bruk av TypeScript.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video