Kompilace kódu 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. 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 ASP.NET Core projekty použijte balíček NuGet místo npm k přidání podpory pro TypeScript.

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.

2. Pokud váš projekt ho 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.

   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í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. 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 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:

   • Direktiva include udává kompilátoru, kde najít 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 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.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 sestavení a nasazení, jako je adresa URL aplikace nebo příkazy modulu runtime, klikněte pravým tlačítkem na uzel projektu v Průzkumníku řešení a zvolte Vlastnosti.

   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ástroje>Možnosti>Projekty a řešení>Web Package Management>Externí 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 kompilaci najdete v tématu Vytvoření Node.js aaplikace 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