Kompilace kódu TypeScriptu (Node.js)

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.

   Podle pokynů nainstalujte sadu funkcí Node.js development a npm (https://www.npmjs.com/), která je součástí Node.js.

   Pro jednoduchou integraci sady Visual Studio vytvořte projekt pomocí jedné ze šablon TypeScriptu Node.js, jako je šablona Prázdná Node.js webová aplikace. Jinak použijte šablonu Node.js JavaScriptu, která je součástí sady Visual Studio, a postupujte podle zde uvedených pokynů. Nebo použijte projekt Otevřít složku.

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.

   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.

   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"
   }
   

   Příklad použití webového balíčku s Reactem a konfiguračním souborem webpacku najdete v tématu Vytvoření webové aplikace pomocí Node.js a React.

   Příklad použití Vue.js s TypeScriptem najdete v tématu Vytvoření Vue.js aplikace.

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

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