Kompilace kódu TypeScriptu (Node.js)

  • Článek

Pomocí balíčku Npm TypeScriptu přidejte podporu TypeScriptu do projektů založených na javascriptovém projektovém 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 přidejte podporu TypeScriptu pomocí balíčku NuGet místo npm.

Přidání podpory TypeScriptu pomocí npm

Balíček Npm TypeScriptu 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. Podle pokynů nainstalujte úlohu Vývoje Node.js a modul runtime Node.js.

    Pro jednoduchou integraci sady Visual Studio vytvořte projekt pomocí jedné ze šablon Node.js TypeScript, například pomocí šablony prázdné webové aplikace Node.js. Jinak použijte buď šablonu Node.js JavaScript, která je součástí sady Visual Studio, a postupujte podle zde uvedených pokynů. Nebo použijte projekt Otevřít složku .

  2. Pokud projekt ještě neobsahuje, nainstalujte balíček Npm TypeScriptu.

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

    Pro projekt Node.js 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ík řešení, zvolte Nainstalovat nový balíček npm, vyhledejte TypeScript a nainstalujte balíček.

    Zkontrolujte možnost npm v okně Výstup a zobrazte průběh instalace balíčku. 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 > novou položku. Zvolte konfigurační soubor JSON TypeScriptu a potom klikněte na Přidat.

    Pokud nevidíte všechny šablony položek, zvolte Zobrazit všechny šablony a 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 ke konfiguraci možností kompilátoru TypeScriptu.

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

    Příklad jednoduchého souboru tsconfig.json následuje.

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

    V tomto příkladu:

    • include říká 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 kompilátorem TypeScriptu.
    • možnost sourceMap označuje, zda kompilátor generuje zdrojovémap soubory.

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

Sestavení aplikace

  1. Do projektu přidejte 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 souboru package.json přidejte podporu pro příkazy sestavení a čištění 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 Reactu.

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

  3. Pokud potřebujete nakonfigurovat možnosti, jako je spouštěcí stránka, cesta k modulu runtime Node.js, port aplikace nebo argumenty modulu runtime, klikněte pravým tlačítkem myši na uzel projektu v Průzkumník řešení a zvolte Vlastnosti.

    Poznámka:

    Při konfiguraci nástrojů třetích stran projekty Node.js nepoužívají cesty nakonfigurované v části Projekty možnosti>nástrojů>a řešení>Web Package Management>Externí webové nástroje. Tato nastavení se používají pro jiné typy projektů.

  4. Zvolte 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é soubory *.js spolu s vygenerovanými soubory *js.map.

    Soubory zdrojové mapy se vyžadují pro ladění.

Spuštění aplikace

Pokyny ke spuštění aplikace po kompilaci najdete v tématu 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.

Související obsah

Vlastnosti, React, Angular, Vue