Opsætning af TypeScript med Visual Studio Code

Visual Studio Code (VSCode) er en kraftfuld og populær kodeeditor, der giver fremragende support til TypeScript-udvikling. Denne vejledning vil lede dig gennem trinene til at konfigurere TypeScript i VSCode, og sikre, at du har alt, hvad du behøver for at begynde at kode effektivt.

Installation af Visual Studio Code

Hvis du ikke allerede har installeret Visual Studio Code, skal du følge disse trin:

1. Gå til det officielle VSCode-websted.
2. Download installationsprogrammet til dit operativsystem.
3. Kør installationsprogrammet, og følg instruktionerne på skærmen for at fuldføre installationen.

Installation af Node.js og npm

TypeScript administreres gennem npm (Node Package Manager), som kræver Node.js. Sådan installerer du Node.js og npm:

1. Besøg det officielle Node.js-websted.
2. Download og installer LTS-versionen af ​​Node.js, som inkluderer npm.
3. Bekræft installationen ved at åbne en terminal og køre node -v og npm -v for at kontrollere versionerne af Node.js og npm.

Installerer TypeScript

Med Node.js og npm installeret, kan du nu installere TypeScript globalt. Åbn en terminal og kør følgende kommando:

npm install -g typescript

Denne kommando installerer TypeScript globalt, så du kan bruge kommandoen tsc til at kompilere TypeScript-filer fra hvor som helst på dit system.

Opsætning af et TypeScript-projekt

Følg disse trin for at starte et nyt TypeScript-projekt:

1. Opret en ny mappe til dit projekt, og naviger ind i den:

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

1. Initialiser et nyt npm-projekt:

npm init -y

1. Installer TypeScript som en udviklingsafhængighed:

npm install --save-dev typescript

1. Generer en TypeScript-konfigurationsfil:

npx tsc --init

Denne kommando opretter en tsconfig.json fil i dit projektbibliotek, som indeholder konfigurationsindstillinger for TypeScript-kompileren.

Konfiguration af VSCode til TypeScript

VSCode leveres med indbygget TypeScript-understøttelse, men du kan forbedre din udviklingsoplevelse yderligere ved at konfigurere editoren:

Åbning af dit projekt

Åbn dit TypeScript-projekt i VSCode:

1. Start VSCode.
2. Vælg Fil > Åbn mappe... og vælg din projektmappe.

Installation af TypeScript-udvidelser

Mens VSCode giver fremragende TypeScript-understøttelse ud af boksen, kan du installere yderligere udvidelser for forbedret funktionalitet:

• TypeScript-udvidelse: Giver TypeScript-sprogunderstøttelse og funktioner som IntelliSense, kodenavigation og mere.
• Pænere: En udvidelse til kodeformatering, der sikrer ensartet kodestil.

Konfiguration af TypeScript-kompileren

Åbn filen tsconfig.json for at konfigurere TypeScript-kompilerindstillingerne. Her er et eksempel på en konfiguration:

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

Denne konfiguration indstiller mål-ECMAScript-versionen til ES6, specificerer CommonJS-modulformatet, muliggør streng typekontrol og indstiller outputmappen til ./dist. Det inkluderer også kildekort for lettere fejlfinding.

Skrivning og kørsel af TypeScript-kode

Opret en ny TypeScript-fil i mappen src:

mkdir src
touch src/index.ts

Tilføj noget TypeScript-kode til index.ts:

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

For at kompilere din TypeScript-kode skal du køre:

npx tsc

Denne kommando kompilerer dine TypeScript-filer og sender JavaScript-filerne til dist-mappen.

For at køre den kompilerede JavaScript-kode skal du bruge:

node dist/index.js

Konklusion

Opsætning af TypeScript med Visual Studio Code er en ligetil proces, der involverer installation af de nødvendige værktøjer, konfiguration af dit projekt og brug af VSCodes kraftfulde funktioner. Ved at følge denne vejledning har du et fuldt funktionelt TypeScript-udviklingsmiljø og være klar til at bygge robuste applikationer med TypeScript.