Konfigurowanie TypeScript z Visual Studio Code

Visual Studio Code (VSCode) to potężny i popularny edytor kodu, który zapewnia doskonałe wsparcie dla rozwoju TypeScript. Ten przewodnik przeprowadzi Cię przez kroki konfiguracji TypeScript w VSCode, zapewniając, że masz wszystko, czego potrzebujesz, aby skutecznie rozpocząć kodowanie.

Instalowanie programu Visual Studio Code

Jeśli nie zainstalowałeś jeszcze programu Visual Studio Code, wykonaj następujące czynności:

1. Przejdź do oficjalnej strony VSCode.
2. Pobierz instalator dla swojego systemu operacyjnego.
3. Uruchom instalator i postępuj zgodnie z instrukcjami wyświetlanymi na ekranie, aby dokończyć instalację.

Instalowanie Node.js i npm

TypeScript jest zarządzany przez npm (Node Package Manager), który wymaga Node.js. Aby zainstalować Node.js i npm:

1. Odwiedź oficjalną stronę Node.js.
2. Pobierz i zainstaluj wersję LTS Node.js zawierającą npm.
3. Sprawdź instalację, otwierając terminal i uruchamiając node -v i npm -v, aby sprawdzić wersje Node.js i npm.

Instalowanie TypeScript

Po zainstalowaniu Node.js i npm możesz teraz zainstalować TypeScript globalnie. Otwórz terminal i uruchom następujące polecenie:

npm install -g typescript

To polecenie instaluje TypeScript globalnie, umożliwiając kompilację plików TypeScript z dowolnego miejsca w systemie za pomocą polecenia tsc.

Konfigurowanie projektu TypeScript

Aby rozpocząć nowy projekt TypeScript, wykonaj następujące kroki:

1. Utwórz nowy katalog dla swojego projektu i przejdź do niego:

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

1. Zainicjuj nowy projekt npm:

npm init -y

1. Zainstaluj TypeScript jako zależność programistyczną:

npm install --save-dev typescript

1. Wygeneruj plik konfiguracyjny TypeScript:

npx tsc --init

To polecenie tworzy plik tsconfig.json w katalogu projektu, który zawiera ustawienia konfiguracji kompilatora TypeScript.

Konfigurowanie VSCode dla TypeScript

VSCode oferuje wbudowaną obsługę języka TypeScript, ale możesz jeszcze bardziej usprawnić środowisko programistyczne, konfigurując edytor:

Otwieranie projektu

Otwórz projekt TypeScript w VSCode:

1. Uruchom VSCode.
2. Wybierz Plik > Otwórz folder... i wybierz katalog swojego projektu.

Instalowanie rozszerzeń TypeScript

Chociaż VSCode od razu zapewnia doskonałą obsługę języka TypeScript, możesz zainstalować dodatkowe rozszerzenia w celu zwiększenia funkcjonalności:

• Rozszerzenie TypeScript: Zapewnia obsługę języka TypeScript oraz funkcje takie jak IntelliSense, nawigację po kodzie i wiele innych.
• Prettier: Rozszerzenie formatowania kodu zapewniające spójny styl kodu.

Konfigurowanie kompilatora TypeScript

Otwórz plik tsconfig.json, aby skonfigurować ustawienia kompilatora TypeScript. Oto przykładowa konfiguracja:

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

Ta konfiguracja ustawia docelową wersję ECMAScript na ES6, określa format modułu CommonJS, włącza ścisłe sprawdzanie typów i ustawia katalog wyjściowy na ./dist. Zawiera również mapy źródłowe dla łatwiejszego debugowania.

Pisanie i uruchamianie kodu TypeScript

Utwórz nowy plik TypeScript w katalogu src:

mkdir src
touch src/index.ts

Dodaj kod TypeScript do index.ts:

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

Aby skompilować kod TypeScript, uruchom:

npx tsc

To polecenie kompiluje pliki TypeScript i umieszcza pliki JavaScript w katalogu dist.

Aby uruchomić skompilowany kod JavaScript, użyj:

node dist/index.js

Wniosek

Konfigurowanie TypeScript z Visual Studio Code to prosty proces, który obejmuje instalację niezbędnych narzędzi, skonfigurowanie projektu i korzystanie z zaawansowanych funkcji VSCode. Postępując zgodnie z tym przewodnikiem, będziesz mieć w pełni funkcjonalne środowisko programistyczne TypeScript i będziesz gotowy do tworzenia solidnych aplikacji z TypeScript.