セットアップの簡単なワークフローLive ReloadでノードTypeScriptアプリケーションを書く

このポストは、シリーズとbook about TypeScriptの一部です.これは、ゼロからバックエンドとフロントエンド上の完全なタイプスクリプトのアプリケーションを書くことをご案内します.シリーズは、誰にでも無料でPDF電子ブックとして利用可能です.

この投稿では、TypesScriptでノードプロジェクトを設定する方法を学びます.これは、任意のフレームワークやFASTIFY、急行、巣などのようなライブラリに基づいていません.
まず最初に、あなたのコンピュータにTypeScriptをインストールする必要があります.グローバルにnpmまたはYarnでインストールしてください.

npm i -g typescript

私は既にあなたのコンピュータにNodeをインストールしているが、多分あなたのバージョンを更新する必要があります.もしそうならば、How To Install or Update Node by Using nvm (Node Version Manager)に関してポストをチェックしてください.
では、プロジェクト名のフォルダを作成しましょう.このフォルダをターミナルとエディタで開きます(私はVisual Studio Codeを使います).
NPMコマンドでプロジェクトを初期化します.

npm init -y

例としての私たちのプロジェクトは簡単です-それは、端末に自分の名前を入力し、この名前で挨拶を印刷するユーザーを要求するコマンドラインアプリケーションです.
プロジェクトのメインファイルを作成しましょう.ちょうどこのような非常に基本的なTypeScriptコードを置いてください.

import { createInterface } from "readline";
import { promisify } from "util";

const rlInterface = createInterface({
  input: process.stdin,
  output: process.stdout,
});

const question = promisify(rlInterface.question).bind(rlInterface);

function greeting(name: unknown) {
  console.log(`Hello, ${name}!`);
}

async function main() {
  try {
    const name = await question("Type your name: ");

    greeting(name);

    rlInterface.close();
  } catch (e) {
    console.error(e);
  }
}

main();

では、このファイルをTypeScriptコンパイラを使ってコンパイルしましょう.

tsc main.ts

あなたは、私たちがreadlineとutilを使用するNodeのモジュールのためにタイプ宣言をインストールする必要があるということを、私たちが説明しているのに気付きました.タイプ宣言に慣れていない場合は、ポストWhat Are Type Declaration Files In TypeScript?をチェックしてください.さあ、これらのタイプ宣言をnpmでインストールしましょう.

npm install --save-dev @types/node

メインをコンパイルします.再び

tsc main.ts

すごい!ファイルが正常にコンパイルされました.Nodeでそれを実行して、挨拶を見るために、我々の名前を入力しましょう:

node main.js

恐ろしい.しかし、我々が我々のコードを少し変える必要があるならば、どうですか?変更すると、このファイルを再コンパイルしてノードで実行する必要があります.私たちのコードが変化した後に自動的にコンパイルされて、実行されるならば、それは大きいでしょう.プロセスモードをウォッチモードで実行することで、プロセスを自動化できます.

tsc main.ts -w

今ではtypescriptコンパイラは自動的にメインをコンパイルします.JavaScriptコードへのTS.しかし、これを実行するにはどうですか?さて、typescriptはコードを実行できません.
開発プロセスを自動化するためにプロジェクトを設定することができます.タイプスクリプトの設定から始めましょう.私たちはプロジェクトのタイプ設定ファイルを作成する必要があります.デフォルト設定の設定ファイルを生成する特別なコマンドを使用できます.

tsc --init

これはtconfigファイルを生成しました.JSONこのファイルを開くと、多くのオプションとパラメータが表示されます.次のポストでもっと書きます.必要なのは、パラメータoutdirとrootdirにフォーカスすることです.これらのオプションをtsconfigでコメントしてください.JSON
outdirは、フォルダへのパスです.
Rootdirは、アプリケーションの我々のTypeScriptソースコードであるフォルダへのパスです.私たちの場合-ファイルメイン.TS
値を指定します.

{
    ...
    "outDir": "./dist",
    "rootDir": "./src",
    ...
}

また、値ノードを使用してパラメータの変更を解除する必要があります.

"moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */

フォルダを作成します.そこにts.
よろしい.私たちはプロジェクトのタイプスクリプトを設定しました.今、我々は時計モードで我々のコードを実行するためにNodeを構成しなければなりません.
いくつかのdev依存関係をインストールする必要があります.

npm i -D ts-node nodemon

TSノードは、JavaScriptで書かれたように、typescriptで書かれたコードを実行するツールです.つまり、これはts-nodeを実行していますが、typescriptファイルを認識できます.また、ファイルのないコードを実行するには、TSノードをREPLとして使用することもできます.
Nodemonはいくつかのファイルの変更時にノードアプリケーションを再起動するツールです.アプリケーションでコードを変更するとnodemonを再実行する必要はないので、実際に開発に役立ちます.
では、パッケージのセクションスクリプトを指定しましょう.JSONファイル

{
    ...
    "scripts": {
        "dev": "nodemon -w src src/main.ts",
        "start": "node dist/main.js",
        "build": "tsc -p ."
    },
    ...
}

devサーバを起動するには、次のコマンドを使用します.

npm run dev

さて、メインでコードを変更します.それを自動的に再コンパイルし、再実行するノードを実行するコードを実行します.
この動画はお気に入りから削除されています.してください、Node日まで滞在する.
Node