Kompilowanie kodu TypeScript (Node.js)

  • Artykuł

Użyj pakietu npm języka TypeScript, aby dodać obsługę języka TypeScript do projektów opartych na systemie Projektów JavaScript (JSPS) lub esproj. 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żne

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 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. Postępuj zgodnie z instrukcjami , aby zainstalować obciążenie programistyczne Node.js i środowisko uruchomieniowe Node.js.

    Aby uzyskać prostą integrację z programem Visual Studio, utwórz projekt przy użyciu jednego z szablonów języka Node.js TypeScript, takich jak szablon Pusta aplikacja internetowa Node.js. W przeciwnym razie użyj szablonu Języka JavaScript Node.js dołączonego do programu Visual Studio i postępuj zgodnie z instrukcjami dostępnymi tutaj. Możesz też użyć projektu Otwórz folder .

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

    W Eksplorator rozwiązań (okienko po prawej stronie) otwórz plik package.json w katalogu głównym projektu. Pakiety wymienione odpowiadają pakietom w węźle npm w Eksplorator rozwiązań. Aby uzyskać więcej informacji, zobacz Zarządzanie pakietami npm.

    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 Eksplorator rozwiązań, wybierz polecenie Zainstaluj nowy pakiet npm, wyszukaj ciąg TypeScript i zainstaluj pakiet.

    Sprawdź opcję npm w oknie Dane wyjściowe, aby wyświetlić postęp instalacji pakietu. Zainstalowany pakiet jest wyświetlany w węźle npm w Eksplorator 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 polecenie Dodaj > nowy element. Wybierz plik konfiguracji JSON języka TypeScript, a następnie kliknij przycisk 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 kompilatora TypeScript.

  4. Otwórz plik 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 znaleźć pliki TypeScript (*.ts).
    • Opcja outDir określa folder wyjściowy dla zwykłych plików JavaScript, które są transpilowane przez kompilator TypeScript.
    • opcja sourceMap 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 pliku package.json dodaj 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"
}

    Aby zapoznać się z przykładem użycia pakietu webpack z oprogramowaniem React i plikiem konfiguracji pakietu webpack, zobacz Tworzenie aplikacji internetowej za pomocą bibliotek Node.js i React.

    Przykład użycia pliku Vue.js z językiem TypeScript można znaleźć w temacie Create a Vue.js application (Tworzenie aplikacji Vue.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 Eksplorator rozwiązań i wybierz polecenie Właściwości.

    Uwaga

    Podczas konfigurowania narzędzi innych firm projekty Node.js nie używają ścieżek skonfigurowanych w obszarze Narzędzia>Opcje>projekty i rozwiązania>Zarządzanie pakietami>sieci Web zewnętrzne narzędzia Sieci Web. Te ustawienia są używane dla innych typów projektów.

  4. Wybierz pozycję Kompiluj rozwiązanie kompilacji>.

    Aplikacja jest 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 opcji outDir 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 Tworzenie aplikacji Node.js i Express.

Automatyzowanie zadań kompilacji

Eksplorator modułu uruchamiającego zadania w programie Visual Studio umożliwia automatyzację zadań dla narzędzi innych firm, takich jak npm i webpack.

Powiązana zawartość

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