Konfigurera TypeScript med Visual Studio Code

Visual Studio Code (VSCode) är en kraftfull och populär kodredigerare som ger utmärkt stöd för TypeScript-utveckling. Den här guiden leder dig genom stegen för att ställa in TypeScript i VSCode, vilket säkerställer att du har allt du behöver för att börja koda effektivt.

Installera Visual Studio Code

Om du inte redan har installerat Visual Studio Code, följ dessa steg:

1. Gå till den officiella VSCode-webbplatsen.
2. Ladda ner installationsprogrammet för ditt operativsystem.
3. Kör installationsprogrammet och följ instruktionerna på skärmen för att slutföra installationen.

Installerar Node.js och npm

TypeScript hanteras genom npm (Node Package Manager), vilket kräver Node.js. Så här installerar du Node.js och npm:

1. Besök den officiella Node.js-webbplatsen.
2. Ladda ner och installera LTS-versionen av Node.js, som inkluderar npm.
3. Verifiera installationen genom att öppna en terminal och köra nod -v och npm -v för att kontrollera versionerna av Node.js och npm.

Installerar TypeScript

Med Node.js och npm installerade kan du nu installera TypeScript globalt. Öppna en terminal och kör följande kommando:

npm install -g typescript

Det här kommandot installerar TypeScript globalt, så att du kan använda kommandot tsc för att kompilera TypeScript-filer var som helst på ditt system.

Konfigurera ett TypeScript-projekt

För att starta ett nytt TypeScript-projekt, följ dessa steg:

1. Skapa en ny katalog för ditt projekt och navigera in i den:

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

1. Initiera ett nytt npm-projekt:

npm init -y

1. Installera TypeScript som ett utvecklingsberoende:

npm install --save-dev typescript

1. Generera en TypeScript-konfigurationsfil:

npx tsc --init

Det här kommandot skapar en tsconfig.json-fil i din projektkatalog, som innehåller konfigurationsinställningar för TypeScript-kompilatorn.

Konfigurera VSCode för TypeScript

VSCode kommer med inbyggt TypeScript-stöd, men du kan förbättra din utvecklingsupplevelse ytterligare genom att konfigurera redigeraren:

Öppna ditt projekt

Öppna ditt TypeScript-projekt i VSCode:

1. Starta VSCode.
2. Välj File > Öppna mapp... och välj din projektkatalog.

Installera TypeScript-tillägg

Medan VSCode ger utmärkt TypeScript-stöd direkt, kan du installera ytterligare tillägg för förbättrad funktionalitet:

• TypeScript-tillägg: Ger stöd för TypeScript-språk och funktioner som IntelliSense, kodnavigering och mer.
• Prettier: Ett tillägg för kodformatering, vilket säkerställer konsekvent kodstil.

Konfigurera TypeScript-kompilatorn

Öppna filen tsconfig.json för att konfigurera TypeScript-kompilatorinställningarna. Här är ett exempel på en konfiguration:

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

Denna konfiguration ställer in målversionen av ECMAScript till ES6, specificerar CommonJS-modulformat, möjliggör strikt typkontroll och ställer in utdatakatalogen till ./dist. Den innehåller också källkartor för enklare felsökning.

Skriva och köra TypeScript-kod

Skapa en ny TypeScript-fil i katalogen src:

mkdir src
touch src/index.ts

Lägg till lite TypeScript-kod till index.ts:

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

För att kompilera din TypeScript-kod, kör:

npx tsc

Detta kommando kompilerar dina TypeScript-filer och matar ut JavaScript-filerna till katalogen dist.

För att köra den kompilerade JavaScript-koden, använd:

node dist/index.js

Slutsats

Att ställa in TypeScript med Visual Studio Code är en enkel process som involverar installation av nödvändiga verktyg, konfigurering av ditt projekt och användning av VSCodes kraftfulla funktioner. Genom att följa den här guiden får du en fullt fungerande TypeScript-utvecklingsmiljö och är redo att bygga robusta applikationer med TypeScript.