Transpilovat kód TypeScriptu pomocí npm

Pomocí balíčku Npm TypeScriptu můžete přidat podporu TypeScriptu do projektů na základě javascriptového projektového systému (JSPS)nebo .esproj. Od Visual Studio 2019 se doporučuje místo sady TypeScript SDK použít balíček npm. Balíček Npm TypeScriptu poskytuje větší přenositelnost napříč různými platformami a prostředími.

Důležitý

Pro projekty ASP.NET Core přidejte podporu TypeScriptu pomocí balíčku NuGet místo npm.

Přidání podpory TypeScriptu pomocí npm

Balíček npm TypeScript přidává podporu TypeScriptu. Při instalaci balíčku npm pro TypeScript 2.1 nebo vyšší do projektu se do editoru načte odpovídající verze služby jazyka TypeScript.

1. Zkontrolujte, jestli potřebujete nainstalovat jakoukoli vývojovou úlohu pro Visual Studio nebo modul runtime Node.js.

   U projektů vytvořených pomocí javascriptového projektového systému (JSPS) nebo .esprojnejsou potřeba žádné další úlohy. Stačí nainstalovat npm (), který je součástí Node.js.

2. Pokud váš projekt ho ještě neobsahuje, nainstalujte balíček npm TypeScript.

   V Průzkumník řešení (pravém podokně) otevřete v kořenovém adresáři projektu package.json. Uvedené balíčky odpovídají balíčkům v uzlu npm v Průzkumník řešení. Další informace najdete v tématu Správa balíčků npm.

   Chcete-li vidět průběh instalace balíčku, zaškrtněte možnost npm v okně Výstup. Nainstalovaný balíček se zobrazí pod uzlem npm v Průzkumník řešení.

3. Pokud projekt ještě neobsahuje, přidejte do kořenového adresáře projektu soubor tsconfig.json. Chcete-li přidat soubor, klikněte pravým tlačítkem myši na uzel projektu a zvolte Přidat Nová položka. Zvolte konfigurační soubor JSONTypeScriptu a potom klikněte na Přidat.

   Pokud nevidíte všechny šablony položek, zvolte Zobrazit všechny šablonya pak zvolte šablonu položky.

   Visual Studio do kořenového adresáře projektu přidá soubor tsconfig.json. Tento soubor můžete použít ke konfiguraci možností pro tsc, kompilátor TypeScriptu, který transpiluje TypeScript do JavaScriptu.

4. Otevřete tsconfig.json a aktualizujte a nastavte požadované možnosti kompilátoru.

   Následuje příklad jednoduchého souboru tsconfig.json.

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

   V tomto příkladu:

   • Direktiva include udává kompilátoru, kde najít soubory TypeScriptu (*.ts).
   • Možnost outDir určuje výstupní složku pro prosté javascriptové soubory, které jsou transpilovány tsc, kompilátor TypeScript.
   • možnost sourceMap označuje, zda kompilátor generuje soubory zdrojové mapy.

   Předchozí konfigurace poskytuje pouze základní úvod ke konfiguraci TypeScriptu. Informace o dalších možnostech najdete v tématu tsconfig.json.

Sestavení aplikace

1. Přidejte do projektu soubory TypeScript (.ts) nebo TypeScript JSX (.tsx) a pak přidejte kód TypeScriptu. Jednoduchý příklad TypeScriptu:

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

2. V package.json přidejte podporu pro sestavovací a čistící příkazy Visual Studio použitím následujících skriptů.

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

   Pokud chcete vytvořit pomocí nástroje třetí strany, jako je webpack, můžete do souboru package.json přidat skript sestavení příkazového řádku:

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

3. Pokud potřebujete nakonfigurovat možnosti sestavení a nasazení, jako je adresa URL aplikace nebo příkazy modulu runtime, klikněte pravým tlačítkem myši na uzel projektu v Průzkumník řešení a zvolte Properties.

   Poznámka

   Při konfiguraci nástrojů třetích stran projekty používající systém JavaScript Project System (JSPS) nebo .esproj nepoužívají cesty, které jsou nakonfigurované v části NástrojeMožnostiProjekty a řešeníWeb Package ManagementExterní webové nástroje. Tato nastavení se používají pro jiné typy projektů.

4. Zvolte Sestavení, Sestavit řešení,.

   Aplikace se automaticky sestaví, když ji spustíte. Během procesu sestavení však může dojít k následujícímu:

   Pokud jste vygenerovali zdrojové mapy, otevřete složku zadanou v možnosti outDir a vyhledejte vygenerované *.js soubory spolu s vygenerovanými soubory *js.map.

   Soubory zdrojové mapy jsou vyžadovány pro ladění.

Spuštění aplikace

Pokyny ke spuštění aplikace po transpilování najdete v tématu Vytvoření Node.js a aplikace Express.

Automatizace úloh sestavení

Průzkumníka úloh Runner můžete použít v Visual Studio k automatizaci úloh pro nástroje třetích stran, jako je npm a webpack.

• npm task Runner – přidává podporu skriptů npm definovaných v package.json. Podporuje Yarn.
• webpack Task Runner – přidává podporu pro webpack.

Související obsah

vlastnosti, React, Angular, Vue