close

一般的な開発ツールとの統合 TypeScript: Visual Studio Code、 Webpack 、および Babel

TypeScript 拡張機能を次の場所に インストールします Visual Studio Code

TypeScript 拡張機能を次の場所に インストールします Visual Studio Code

Visual Studio Code [拡張機能] ペインを 開いて移動します。

「 」を検索して TypeScript 、公式の TypeScript 拡張機能をインストールしてください。

 

TypeScript tsconfig.json ファイルでコンパイラ オプションを 構成する

TypeScript tsconfig.json ファイルでコンパイラ オプション を構成します。

プロジェクトのニーズに応じてコンパイラ オプションをカスタマイズします。

例えば： 

{  
  "compilerOptions": {  
    "target": "es6",  
    "module": "commonjs",  
    "strict": true  
  }  
}

 

IntelliSense、自動型チェック、コード ナビゲーションなどの機能を利用します。 Visual Studio Code

統合すると TypeScript、 でコードを作成する際に、IntelliSense の提案、型情報、エラー検出の恩恵を受けることができます Visual Studio Code。

TypeScript コード ナビゲーションやリファクタリングなどの の高度な言語機能もエディター内で利用できます。

 

TypeScript との 統合 Webpack

必要なパッケージをインストールします: typescript 、ts-loader、および webpack

次のコマンドを実行してパッケージをインストールします。 

npm install typescript ts-loader webpack --save-dev

 

ts-loader を使用してファイル を処理するように 構成する webpack.config.js TypeScript

次の構成を ファイルに追加します。 webpack.config.js 

module.exports = {  
  entry: './src/index.ts',  
  module: {  
    rules: [  
      {  
        test: /\.ts$/,  
        use: 'ts-loader',  
        exclude: /node_module/  
      }  
    ]  
  },  
  resolve: {  
    extensions: ['.ts', '.js']  
  },  
  output: {  
    filename: 'bundle.js',  
    path: path.resolve(__dirname, 'dist')  
  }  
};

 

TypeScript コンパイルとバンドル を最適化するために追加のプラグインとローダーをセットアップする

terser- webpack -plugin、clean- webpack -plugin、または babel -loader などの他のプラグインやローダーを含めて、ビルド プロセスをさらに強化することができます。

 

TypeScript との 統合 Babel

必要なパッケージをインストールします: typescript、 @ babel /preset- typescript 、および @ babel /cli

次のコマンドを実行してパッケージをインストールします。 

npm install typescript @babel/preset-typescript @babel/cli --save-dev

 

プリセットを構成する か、 プリセット を含めます .babelrc babel.config.js TypeScript

を作成します。 babel rc ファイルを開くか、次の設定を babel.config.js ファイルに追加します。 

module.exports = {  
  presets: ['@babel/preset-typescript']  
};

 

特定の機能または互換性要件 Babel に合わせて構成 をカスタマイズする TypeScript

Babel 追加のプラグインまたはプリセットを含めて、特定の TypeScript 機能を有効にしたり、ターゲット環境との互換性を確保したり できます。

 

ヒントとベストプラクティス

  • 関連する TypeScript 拡張機能とプラグインをインストールすると、選択した開発ツールの生産性と開発者のエクスペリエンスが向上します。
  • TypeScript の増分コンパイル機能(tsc --watch または) を活用して webpack --watch 、開発中のビルド時間を短縮します。
  • の ESLint ルールの設定など、特定の開発環境との統合を微調整するための高度な構成オプションを調べます TypeScript。

 

この包括的なガイドに従うことで、、 、 など TypeScript の一般的な開発ツールに シームレスに統合できるようになります 。 これにより、開発ワークフローが強化され、高度な言語機能が提供され、プロジェクトで の利点 を最大限に活用できるようになります。 Visual Studio Code Webpack Babel TypeScript