Sette opp TypeScript med Visual Studio Code

Visual Studio Code (VSCode) er en kraftig og populær koderedigerer som gir utmerket støtte for TypeScript-utvikling. Denne veiledningen vil lede deg gjennom trinnene for å sette opp TypeScript i VSCode, og sikrer at du har alt du trenger for å begynne å kode effektivt.

Installere Visual Studio Code

Hvis du ikke allerede har installert Visual Studio Code, følg disse trinnene:

1. Gå til offisielle VSCode-nettstedet.
2. Last ned installasjonsprogrammet for ditt operativsystem.
3. Kjør installasjonsprogrammet og følg instruksjonene på skjermen for å fullføre installasjonen.

Installerer Node.js og npm

TypeScript administreres gjennom npm (Node Package Manager), som krever Node.js. Slik installerer du Node.js og npm:

1. Besøk den offisielle Node.js-nettstedet.
2. Last ned og installer LTS-versjonen av Node.js, som inkluderer npm.
3. Bekreft installasjonen ved å åpne en terminal og kjøre node -v og npm -v for å sjekke versjonene av Node.js og npm.

Installerer TypeScript

Med Node.js og npm installert kan du nå installere TypeScript globalt. Åpne en terminal og kjør følgende kommando:

npm install -g typescript

Denne kommandoen installerer TypeScript globalt, slik at du kan bruke tsc-kommandoen til å kompilere TypeScript-filer fra hvor som helst på systemet ditt.

Sette opp et TypeScript-prosjekt

Følg disse trinnene for å starte et nytt TypeScript-prosjekt:

1. Opprett en ny katalog for prosjektet ditt og naviger inn i den:

mkdir my-typescript-project
cd my-typescript-project

1. Initialiser et nytt npm-prosjekt:

npm init -y

1. Installer TypeScript som en utviklingsavhengighet:

npm install --save-dev typescript

1. Generer en TypeScript-konfigurasjonsfil:

npx tsc --init

Denne kommandoen oppretter en tsconfig.json-fil i prosjektkatalogen din, som inneholder konfigurasjonsinnstillinger for TypeScript-kompilatoren.

Konfigurere VSCode for TypeScript

VSCode kommer med innebygd TypeScript-støtte, men du kan forbedre utviklingsopplevelsen ytterligere ved å konfigurere redigeringsprogrammet:

Åpne prosjektet ditt

Åpne TypeScript-prosjektet ditt i VSCode:

1. Start VSCode.
2. Velg Fil > Åpne mappe... og velg prosjektkatalogen din.

Installere TypeScript-utvidelser

Mens VSCode gir utmerket TypeScript-støtte rett ut av esken, kan du installere flere utvidelser for forbedret funksjonalitet:

• TypeScript-utvidelse: Gir støtte for TypeScript-språk og funksjoner som IntelliSense, kodenavigering og mer.
• Penere: En utvidelse for kodeformatering, som sikrer konsistent kodestil.

Konfigurere TypeScript-kompilatoren

Åpne tsconfig.json-filen for å konfigurere TypeScript-kompilatorinnstillingene. Her er et eksempel på en konfigurasjon:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "outDir": "./dist",
    "sourceMap": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

Denne konfigurasjonen setter mål-ECMAScript-versjonen til ES6, spesifiserer CommonJS-modulformat, muliggjør streng typekontroll og setter utdatakatalogen til ./dist. Den inkluderer også kildekart for enklere feilsøking.

Skrive og kjøre TypeScript-kode

Opprett en ny TypeScript-fil i src-katalogen:

mkdir src
touch src/index.ts

Legg til litt TypeScript-kode til index.ts:

const message: string = "Hello, TypeScript!";
console.log(message);

For å kompilere TypeScript-koden din, kjør:

npx tsc

Denne kommandoen kompilerer TypeScript-filene dine og sender JavaScript-filene til dist-katalogen.

For å kjøre den kompilerte JavaScript-koden, bruk:

node dist/index.js

Konklusjon

Å sette opp TypeScript med Visual Studio Code er en enkel prosess som innebærer å installere de nødvendige verktøyene, konfigurere prosjektet og bruke VSCodes kraftige funksjoner. Ved å følge denne veiledningen vil du ha et fullt funksjonelt TypeScript-utviklingsmiljø og være klar til å bygge robuste applikasjoner med TypeScript.