セットアップは、TypeScriptとWebpackを使用してアプリケーションを反応させる

4063 ワード

webpack javascript react typescript テキストリンク

このポストでは、WebpackとBabelを構成しているあなたの反応JSアプリケーションにTypeScriptのサポートを加える方法を学びます.
このポストでは、私は以前にセットアップの反応JSのアプリケーションを変更するつもりです.あなたがまだそのポストを通り抜けていないならば、始めてください、そして、このポストに戻ってください.

なぜタイプスクリプト？

official documentationによると、typescriptはJavaScriptの強力なタイプのスーパーセットです.TypeScriptは、クラス、インターフェイスおよび継承を使用する純粋なオブジェクト指向の実装を提供します.
コンパイル時のコードのエラーチェックとエラーが見つかった場合、スクリプトが実行される前にエラーが表示されます.JavaScriptのスーパーセットとしても、すべての既存のJavaScriptライブラリをサポートします.それは開発を迅速かつ容易に可能にし、開発者は多くの時間を節約することができます.

インストール

私たちは、反応アプリケーションでTypeScriptを構成するのに不可欠ないくつかのパッケージをインストールする必要があります.
必要なパッケージをインストールするには以下のコマンドを実行します.

npm install -D typescript ts-loader @types/node @types/react @types/react-dom

typescriptパッケージは、メインスクリプトの主なエンジンです.

TSローダは、Webpackのタイプスクリプトを統合するWebpack用のローダーです.これはファイルを変換します.へのTS拡張.JSファイルとそれをバンドルします.

ノード、反応、およびDOMに必要な型定義を含んでいます.

タイプスクリプトの設定

tsconfigを追加します.JSONファイルをルートディレクトリの場所にパッケージします.JSONが存在する.nameは以下の設定と同じです.

//_tsconfig.json_

{
    "compilerOptions": {
      "outDir": "./dist/",
      "noImplicitAny": true,
      "module": "es6",
      "target": "es5",
      "jsx": "react",
      "allowJs": true,
      "allowSyntheticDefaultImports": true,
      "moduleResolution": "Node"
    }
}

Webパックの設定

WebPackは、typescriptファイルをサポートするように設定する必要があります.ここでは、Webパックで追加する必要がある小さな変更です.設定.js
TSローダーを追加します.

//_webpack.config.js_
...
{
   test: /\.tsx?$/,
   exclude: /node_modules/,
   loader: 'ts-loader'
}
...

のテストを追加.TSと.解決するtsx拡張モジュール:

//_webpack.config.js_
...
resolve: 
{
   extensions: [ '.tsx', '.ts', '.js' ],
}
...

そして、Webpackの設定で1つの最終的な変更は、あなたの反応のアプリケーションでは

//_webpack.config.js_
...
entry: "./src/index.tsx",
...

反応による型紙のための作業テスト

アプリケーションをテストするには、インデックスによって渡されるタイプ番号の1つの小道具を取る1つのコンポーネントアプリケーションを作成します.TSX

//_index.tsx_

import React from "react";
import ReactDOM from "react-dom";
import "./style.css";
import { App } from "./components/App";

ReactDOM.render(<App num={1234} />, document.getElementById("root"));

//components/App.tsx

import React from "react";

type AppProps = { num: number };

export const App = ({num}: AppProps) => <h1>Total Number: {num}</h1>;

ブーヤー!😍 私たちはすべてタイプスクリプトで設定されています❤️.