Kompilowanie kodu TypeScript (ASP.NET Core)

Artykuł
10/24/2023

Użyj pakietu NuGet TypeScript, aby dodać obsługę języka TypeScript do projektów ASP.NET Core. Począwszy od programu Visual Studio 2019, zaleca się użycie pakietu NuGet zamiast zestawu TYPEScript SDK. Pakiet NuGet TypeScript zapewnia większą przenośność na różnych platformach i środowiskach.

W przypadku projektów ASP.NET Core jednym z typowych użycia pakietu NuGet jest skompilowanie języka TypeScript przy użyciu interfejsu wiersza polecenia platformy .NET Core. W scenariuszach platformy .NET pakiet NuGet jest preferowaną opcją i jest jedynym sposobem włączenia kompilacji języka TypeScript przy użyciu poleceń interfejsu wiersza polecenia platformy .NET Core, takich jak dotnet build i dotnet publish. Ponadto w przypadku integracji programu MSBuild z ASP.NET Core i TypeScript wybierz pakiet NuGet.

Ważne

W przypadku projektów opartych na projektach JavaScript Project System (JSPS) lub esproj użyj pakietu npm zamiast nuGet, aby dodać obsługę języka TypeScript.

Dodawanie obsługi języka TypeScript za pomocą narzędzia NuGet

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

Jeśli program Visual Studio jest zainstalowany, plik node.exe dołączony do niego zostanie automatycznie pobrany przez program Visual Studio. Jeśli nie masz zainstalowanego środowiska Node.js, zalecamy zainstalowanie wersji LTS z witryny internetowej Node.js .

Otwórz projekt ASP.NET Core w programie Visual Studio.
W Eksplorator rozwiązań (okienko po prawej stronie). Kliknij prawym przyciskiem myszy węzeł projektu i wybierz polecenie Zarządzaj pakietami NuGet. Na karcie Przeglądaj wyszukaj ciąg Microsoft.TypeScript.MSBuild, a następnie kliknij przycisk Zainstaluj, aby zainstalować pakiet.

Program Visual Studio dodaje pakiet NuGet w węźle Zależności w Eksplorator rozwiązań. Następujące odwołanie do pakietu zostanie dodane do pliku *.csproj.
```
<PackageReference Include="Microsoft.TypeScript.MSBuild" Version="3.9.7">
   <PrivateAssets>all</PrivateAssets>
   <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
</PackageReference>
```
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.
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": "wwwroot/js"
  },
  "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 transpilowanych 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

Dodaj pliki TypeScript (ts) lub TypeScript JSX (tsx) do projektu, a następnie dodaj kod TypeScript. Aby uzyskać prosty przykład języka TypeScript, użyj następującego polecenia:
```
let message: string = 'Hello World';
console.log(message);
```
Jeśli używasz starszego projektu w stylu innego niż zestaw SDK, postępuj zgodnie z instrukcjami w temacie Usuwanie importów domyślnych przed utworzeniem.
Wybierz pozycję Kompiluj rozwiązanie kompilacji>.

Mimo że aplikacja jest kompiluje się automatycznie po jej uruchomieniu, chcemy przyjrzeć się temu, co dzieje się podczas procesu kompilacji:

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.
Jeśli chcesz skompilować za każdym razem, gdy zapiszesz projekt, użyj opcji compileOnSave w pliku tsconfig.json.
```
{
   "compileOnSave":  true,
   "compilerOptions": {
   }
}
```

Aby zapoznać się z przykładem użycia narzędzia gulp z modułem uruchamiającym zadania w celu skompilowania aplikacji, zobacz ASP.NET Core i TypeScript.

Jeśli wystąpią problemy, w których program Visual Studio korzysta z wersji środowiska Node.js lub narzędzia innej firmy, które różni się od oczekiwanej wersji, może być konieczne ustawienie ścieżki do użycia przez program Visual Studio. Wybierz pozycję Opcje narzędzi>. W obszarze Projekty i rozwiązania wybierz pozycję Zarządzanie pakietami sieci Web zewnętrznymi narzędziami> sieci Web.

Uruchamianie aplikacji

Naciśnij klawisz F5 lub wybierz przycisk Start w górnej części okna.

Szczegóły struktury pakietu NuGet

Microsoft.TypeScript.MSBuild.nupkg zawiera dwa foldery główne:

folder kompilacji

W tym folderze znajdują się dwa pliki. Oba są punktami wejścia — odpowiednio dla głównego pliku docelowego TypeScript i pliku props.
1. Microsoft.TypeScript.MSBuild.targets
  
  Ten plik ustawia zmienne, które określają platformę czasu wykonywania, taką jak ścieżka do biblioteki TypeScript.Tasks.dll, przed zaimportowaniem plików Microsoft.TypeScript.targets z folderu tools.
2. Microsoft.TypeScript.MSBuild.props
  
  Ten plik importuje plik Microsoft.TypeScript.Default.props z folderu tools i ustawia właściwości wskazujące, że kompilacja została zainicjowana za pośrednictwem narzędzia NuGet.
folder tools

Wersje pakietów wcześniejszych niż 2.3 zawierają tylko folder tsc. Pliki Microsoft.TypeScript.targets i TypeScript.Tasks.dll znajdują się na poziomie głównym.

W pakiecie w wersji 2.3 lub nowszej poziom główny zawiera Microsoft.TypeScript.targets wartości i Microsoft.TypeScript.Default.props. Aby uzyskać więcej informacji na temat tych plików, zobacz MsBuild Configuration (Konfiguracja programu MSBuild).

Ponadto folder zawiera trzy podfoldery:
1. net45
  
  Ten folder zawiera TypeScript.Tasks.dll i inne biblioteki DLL, od których zależy. Podczas kompilowania projektu na platformie Windows program MSBuild używa bibliotek DLL z tego folderu.
2. netstandard1.3
  
  Ten folder zawiera inną wersję TypeScript.Tasks.dllprogramu , która jest używana podczas kompilowania projektów na komputerze z systemem innym niż Windows.
3. Tsc
  
  Ten folder zawiera tsc.jspliki i tsserver.js wszystkie pliki zależności wymagane do uruchomienia ich jako skrypty węzła.
  
  Uwaga
  
  Jeśli program Visual Studio jest zainstalowany, pakiet NuGet automatycznie pobiera wersję pliku node.exe z programem Visual Studio. W przeciwnym razie na maszynie musi być zainstalowany plik Node.js.
  
  Wersje wcześniejsze niż 3.1 zawierały tsc.exe plik wykonywalny do uruchomienia kompilacji. W wersji 3.1 plik wykonywalny został usunięty na rzecz używania polecenia node.exe.

Usuń domyślne importy

W starszych projektach ASP.NET Core korzystających z formatu innego niż zestaw SDK może być konieczne usunięcie niektórych elementów pliku projektu.

Jeśli używasz pakietu NuGet do obsługi programu MSBuild dla projektu, plik projektu nie może zostać zaimportowany Microsoft.TypeScript.Default.props lub Microsoft.TypeScript.targets. Pliki są importowane przez pakiet NuGet, więc dołączenie ich oddzielnie może spowodować niezamierzone zachowanie.

Kliknij prawym przyciskiem myszy projekt i wybierz polecenie Zwolnij projekt.
Kliknij prawym przyciskiem myszy projekt i wybierz polecenie Edytuj <nazwę> pliku projektu.

Zostanie otwarty plik projektu.

Usuń odwołania do Microsoft.TypeScript.Default.props i Microsoft.TypeScript.targets.

Importy do usunięcia wyglądają podobnie do następujących:

<Import
   Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props"
   Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props')" />

<Import
   Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets"
   Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets')" />

Udostępnij za pośrednictwem