vscode Nodejs で TS 環境を構築する

フロントエンド開発者として、私たちは通常、開発の基本ツールとして Node.js と TypeScript を使用します。開発の過程では、さまざまな問題や問題に遭遇することがあります。最大の問題の 1 つは、適切な TypeScript 環境を構築する方法です。この記事では、Visual Studio Code で Node.js TypeScript 環境をセットアップする方法を紹介します。

準備

まず、最新バージョンの Node.js をダウンロードする必要があります。公式 Web サイト (https://nodejs.org) から直接ダウンロードしてインストールできます。ダウンロードが完了したら、コマンド ラインに node -v と入力して、インストールが成功したかどうかを確認できます。

次に、Visual Studio Code をダウンロードして構成する必要があります。 Visual Studio Code は、公式 Web サイト https://code.visualstudio.com/download からダウンロードしてインストールできます。次に、Visual Studio Code を開き、TypeScript 拡張機能をインストールします。これを行うには、Visual Studio Code の左側にある拡張機能バーで「TypeScript」を検索し、インストールします。

プロジェクトの作成

上記の準備が完了したら、プロジェクトの作成を開始できます。 Visual Studio Codeでは、メニューバーの「ファイル」→「フォルダーを開く」を選択すると、新しいプロジェクトを作成できます。ここでは、任意の空のフォルダーをプロジェクト フォルダーとして選択できます。次に、ターミナルを開いて、cd コマンドを使用してプロジェクト フォルダーにアクセスします。

依存関係のインストール

TypeScript プロジェクトが Node.js と適切に対話できるようにするには、2 つの重要な依存関係、typescript と ts-node をインストールする必要があります。 。これを行うには、ターミナルに npm install typescript ts-node と入力してインストールします。

TypeScript の構成

インストールが完了したら、TypeScript 環境を構成できます。プロジェクト フォルダーに tsconfig.json という名前の新しいファイルを作成し、その中に次のコードを追加します。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "declaration": true,
    "sourceMap": true,
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

このファイルには、TypeScript コードをコンパイルするための基本設定が含まれています。その中で、コンパイルターゲット、モジュールタイプ、出力ディレクトリなどを設定できます。

コードファイルの作成

これでTypeScriptの設定は完了です。次に、コード ファイルの作成を開始できます。プロジェクト フォルダーに src という名前の新しいフォルダーを作成し、その中に index.ts という名前の新しい TypeScript ファイルを作成します。次に、次のコードを index.ts ファイルに追加します。

console.log("Hello from TypeScript!");

Compile TypeScript to JavaScript

単純な TypeScript ファイルを作成しました。次に、次のコードを実行する必要があります。 Node.js で実行できるように JavaScript ファイルにコンパイルする必要があります。ターミナルで次のコマンドを使用すると、TypeScript ファイルを JavaScript ファイルにコンパイルできます:

npx tsc

これにより、dist フォルダー # document に index.js## という名前のファイルが生成されます。 。ターミナルに node dist/index.js と入力すると、このファイルを実行できます。ターミナルに Hello from TypeScript! のような出力が表示されるはずです。

ただし、TypeScript ファイルを毎回手動でコンパイルするのは非常に面倒です。したがって、

ts-node 依存関係を使用して、コンパイルせずに TypeScript コードを直接実行できます。ターミナルに次のコマンドを入力すると、TypeScript コードを実行できます。

npx ts-node src/index.ts

これにより、コンパイルせずに、TypeScript から

Hello! が直接出力されます。

概要

この記事では、単純な Node.js TypeScript 環境を構築する方法を学びました。 Node.js、Visual Studio Code、TypeScript 拡張機能、およびその他の必要な依存関係をインストールしました。 TypeScript プロジェクトを作成し、基本的なセットアップとコーディングを行いました。また、

ts-node を使用して、TypeScript コードを手動でコンパイルせずに直接実行する方法も学びました。この記事が TypeScript 環境の理解に役立つことを願っています。

以上がvscode Nodejs で TS 環境を構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。