Jak przekonwertować projekt JavaScript na TypeScript

Konwersja projektu JavaScript do TypeScript może poprawić jakość kodu i łatwość utrzymania poprzez dodanie statycznego sprawdzania typów. Ten przewodnik przedstawia krok po kroku proces konwersji istniejącego projektu JavaScript do TypeScript.

Krok 1: Zainstaluj TypeScript

Zacznij od dodania TypeScript do projektu. Można to zrobić za pomocą npm lub yarn.

npm install typescript --save-dev

Krok 2: Utwórz plik konfiguracji TypeScript

Utwórz plik tsconfig.json, aby skonfigurować TypeScript. Ten plik określa opcje kompilatora i pliki, które mają zostać uwzględnione w kompilacji.

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

Krok 3: Zmień nazwy plików JavaScript na TypeScript

Zmień nazwy plików JavaScript z .js na .ts (lub .jsx na .tsx, jeśli używasz React). Dzięki temu TypeScript będzie mógł przetworzyć te pliki.

• W przypadku plików zawierających JSX zmień ich nazwę na .tsx.
• W przypadku plików zawierających wyłącznie kod TypeScript zmień ich nazwę na .ts.

Krok 4: Dodaj definicje typów

Dodaj definicje typów dla bibliotek stron trzecich używanych w projekcie. Są one dostępne jako pakiety @types na npm.

npm install @types/node @types/express --save-dev

Krok 5: Napraw błędy TypeScript

Skompiluj projekt za pomocą TypeScript i rozwiąż wszelkie błędy lub problemy z typami. TypeScript przekaże informacje zwrotne na temat niezgodności typów i innych problemów.

npx tsc

Krok 6: Zaktualizuj skrypty kompilacji

Zaktualizuj skrypty kompilacji w package.json, aby używać TypeScript. Zmodyfikuj skrypty, aby uwzględnić kompilację TypeScript.

"scripts": {
  "build": "tsc",
  "start": "node dist/index.js"
}

Krok 7: Przetestuj aplikację

Uruchom testy, aby upewnić się, że przekonwertowany kod TypeScript działa zgodnie z oczekiwaniami. Sprawdź, czy aplikacja zachowuje się poprawnie po konwersji.

Wniosek

Konwersja projektu JavaScript do TypeScript obejmuje instalację TypeScript, skonfigurowanie kompilatora, zmianę nazw plików, dodanie definicji typów i rozwiązanie błędów. Ten proces pomaga wykorzystać funkcje TypeScript w celu zwiększenia bezpieczeństwa typów i łatwości obsługi kodu.