Kompilowanie kodu TypeScript (Node.js)

Aby dodać obsługę języka TypeScript do projektów na podstawie JavaScript Project System (JSPS)lub .esproj, użyj pakietu npm języka TypeScript. Począwszy od programu Visual Studio 2019, zaleca się użycie pakietu npm zamiast zestawu SDK języka TypeScript. Pakiet npm języka TypeScript zapewnia większą przenośność na różnych platformach i środowiskach.

Ważny

W przypadku projektów ASP.NET Core użyj pakietu NuGet zamiast narzędzia npm, aby dodać obsługę języka TypeScript.

Dodawanie obsługi języka TypeScript przy użyciu narzędzia npm

Pakiet npm języka npm języka TypeScript dodaje obsługę języka TypeScript. Po zainstalowaniu pakietu npm dla języka TypeScript 2.1 lub nowszego w projekcie odpowiednia wersja usługi językowej TypeScript zostanie załadowana w edytorze.

1. Sprawdź, czy musisz zainstalować jakiekolwiek obciążenie programistyczne dla programu Visual Studio lub środowiska uruchomieniowego Node.js.

   W przypadku projektów utworzonych przy użyciu systemu projektów JavaScript (JSPS) lub .esprojnie są potrzebne żadne dodatkowe obciążenia. Wystarczy zainstalować narzędzie npm (https://www.npmjs.com/), które jest dołączone do Node.js.

   W przypadku starszego typu projektu (njsproj) należy zainstalować obciążenie programistyczne Node.js i środowisko uruchomieniowe Node.js.

2. Jeśli projekt jeszcze go nie zawiera, zainstaluj pakiet npm TypeScript .

   W Eksploratorze rozwiązań (w okienku po prawej stronie), otwórz package.json znajdujące się w katalogu głównym projektu. Pakiety wymienione odpowiadają pakietom w węźle npm w Eksploratorze rozwiązań. Aby uzyskać więcej informacji, zobacz Manage npm packages.

   W przypadku projektu Node.js można zainstalować pakiet npm języka TypeScript przy użyciu wiersza polecenia lub środowiska IDE. Aby zainstalować przy użyciu środowiska IDE, kliknij prawym przyciskiem myszy węzeł npm w Eksploratorze rozwiązań, wybierz Zainstaluj nowy pakiet npm, wyszukaj TypeScripti zainstaluj pakiet.

   Sprawdź opcję npm w oknie danych wyjściowych, aby wyświetlić postęp instalacji pakietu. Zainstalowany pakiet jest wyświetlany w węźle npm w Eksploratorze rozwiązań.

3. Jeśli projekt jeszcze go nie zawiera, dodaj plik tsconfig.json do katalogu głównego projektu. Aby dodać plik, kliknij prawym przyciskiem myszy węzeł projektu i wybierz pozycję Dodaj > nowy element. Wybierz plik konfiguracyjny JSON TypeScript , a następnie kliknij Dodaj.

   Jeśli nie widzisz wszystkich szablonów elementów, wybierz pozycję Pokaż wszystkie szablony, a następnie wybierz szablon elementu.

   Program Visual Studio dodaje plik tsconfig.json do katalogu głównego projektu. Ten plik służy do konfigurowania opcji dla kompilatora TypeScript.

4. Otwórz tsconfig.json i zaktualizuj, aby ustawić żądane opcje kompilatora.

   Poniżej przedstawiono przykład prostego pliku tsconfig.json.

   {
     "compilerOptions": {
       "noImplicitAny": false,
       "noEmitOnError": true,
       "removeComments": false,
       "sourceMap": true,
       "target": "es5",
       "outDir": "dist"
     },
     "include": [
       "scripts/**/*"
     ]
   }
   

   W tym przykładzie:

   • include informuje kompilator, gdzie należy znaleźć pliki TypeScript (*.ts).
   • outDir opcja określa folder wyjściowy dla zwykłych plików JavaScript, które są transpilowane przez kompilator TypeScript.
   • sourceMap opcja wskazuje, czy kompilator generuje pliki sourceMap.

   Poprzednia konfiguracja zawiera tylko podstawowe wprowadzenie do konfigurowania języka TypeScript. Aby uzyskać informacje na temat innych opcji, zobacz tsconfig.json.

Kompilowanie aplikacji

1. Dodaj pliki TypeScript (.ts) lub TypeScript JSX (.tsx) do projektu, a następnie dodaj kod TypeScript. Prosty przykład języka TypeScript jest następujący:

   let message: string = 'Hello World';
   console.log(message);
   

2. W package.jsondodaj obsługę poleceń kompilacji i czyszczenia programu Visual Studio przy użyciu następujących skryptów.

   "scripts": {
     "build": "tsc --build",
     "clean": "tsc --build --clean"
   },
   

   Aby utworzyć przy użyciu narzędzia innej firmy, takiego jak webpack, możesz dodać skrypt kompilacji wiersza polecenia do pliku package.json:

   "scripts": {
      "build": "webpack-cli app.tsx --config webpack-config.js"
   }
   

3. Jeśli musisz skonfigurować opcje, takie jak strona uruchamiania, ścieżka do środowiska uruchomieniowego Node.js, port aplikacji lub argumenty środowiska uruchomieniowego, kliknij prawym przyciskiem myszy węzeł projektu w Eksploratorze rozwiązań i wybierz Właściwości.

   Notatka

   Podczas konfigurowania narzędzi innych firm, projekty Node.js nie używają ścieżek skonfigurowanych w sekcji Narzędzia Opcje>Projekty i rozwiązania>Zarządzanie pakietami sieciowymi>Zewnętrzne narzędzia sieciowe>. Te ustawienia są używane dla innych typów projektów.

4. Wybierz pozycję Build > Build Solution.

   Aplikacja kompiluje się automatycznie po jej uruchomieniu. Jednak podczas procesu kompilacji mogą wystąpić następujące elementy:

   Jeśli wygenerowano mapy źródłowe, otwórz folder określony w outDir opcji i znajdź wygenerowane pliki *.js wraz z wygenerowanymi plikami *js.map.

   Pliki mapy źródłowej są wymagane do debugowania .

Uruchamianie aplikacji

Aby uzyskać instrukcje dotyczące uruchamiania aplikacji po jej skompilowaniu, zobacz Create a Node.js and Express app(Tworzenie aplikacji Node.js i Express).

Automatyzowanie zadań kompilacji

Eksplorator zadań w programie Visual Studio umożliwia automatyzację zadań dla narzędzi innych firm, takich jak npm i webpack.

• moduł uruchamiający zadania NPM — dodaje obsługę skryptów npm zdefiniowanych w package.json. Obsługuje przędzę.
• webpack Task Runner — dodaje obsługę pakietu webpack.

Powiązana zawartość

Właściwości, React, Angular, Vue