Kompilace kódu TypeScriptu (Node.js)

Pomocí balíčku TypeScript npm můžete přidat podporu TypeScriptu do projektů na základě JavaScript projektového systému (JSPS)nebo .esproj. Počínaje sadou 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 použijte balíček NuGet místo npm, abyste přidali podporu TypeScriptu.

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 (https://www.npmjs.com/), který je součástí Node.js.

   Pro starší typ projektu (.njsproj) musíte nainstalovat úlohu vývoje Node.js a modul runtime Node.js.

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

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

   Pro Node.js projekt můžete nainstalovat balíček Npm TypeScript pomocí příkazového řádku nebo integrovaného vývojového prostředí (IDE). Pokud chcete nainstalovat pomocí integrovaného vývojového prostředí, klikněte pravým tlačítkem na uzel npm v Průzkumníku řešení, zvolte Nainstalovat nový balíček npm, vyhledejte TypeScripta nainstalujte balíček.

   Zkontrolujte možnost npm v okně výstupu, abyste viděli průběh instalace balíčku. Nainstalovaný balíček se zobrazí pod uzlem npm v Průzkumníku ř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. Zvoltekonfigurační soubor JSON TypeScriptu 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 přidá soubor tsconfig.json do kořenového adresáře projektu. Tento soubor můžete použít k konfiguraci možností pro kompilátor TypeScript.

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:

   • Příkaz include řekne kompilátoru, kde hledat soubory TypeScriptu (*.ts).
   • outDir možnost určuje výstupní složku pro prosté javascriptové soubory, které jsou transpilovány kompilátorem TypeScriptu.
   • možnost sourceMap určuje, zda kompilátor generuje soubory se zdrojovou mapou.

   Předchozí konfigurace poskytuje pouze základní úvod ke konfiguraci TypeScriptu. Informace o dalších možnostech viz 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.jsonpřidejte podporu pro sestavení a vyčištění příkazů sady Visual Studio pomocí 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, jako je spouštěcí stránka, cesta k modulu runtime Node.js, portu aplikace nebo argumenty modulu runtime, klikněte pravým tlačítkem myši na uzel projektu v Průzkumníku řešení a zvolte Vlastnosti.

   Poznámka

   Při konfiguraci nástrojů třetích stran Node.js projekty nepoužívají cesty nakonfigurované v části nástroje Nástroje>Možnosti>Projekty a řešení>správa webových balíčků>externí webové nástroje. Tato nastavení se používají pro jiné typy projektů.

4. Vyberte 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 k spuštění aplikace po její kompilaci najdete v části Vytvoření aplikace Node.js a Express.

Automatizace úloh sestavení

Průzkumníka spouštěče úloh v sadě Visual Studio můžete použít 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