ReactプロジェクトでのTypeScriptの実装

1. はじめに

TypeScript だけを使用すると学習コストが高くなることはありませんが、フロントエンド開発者のプロジェクトのほとんどはフレームワークに依存しています。

例えば、VueやReactなどのフレームワークと組み合わせて使用する場合は、一定の閾値があります。

TypeScript を使用して React コードを記述するには、TypeScript ライブラリに加えて、@types/react と @types/react-dom をインストールする必要があります。

npm で @types/react -s を実行します。
npm で @types/react-dom -s を実行します。

@types ライブラリを使用する理由は、多くの JavaScript ライブラリが独自の TypeScript 宣言ファイルを提供していないためです。

したがって、ts はこれらのライブラリのタイプと対応するエクスポートされたコンテンツを認識しません。ここで、@types は実際にはコミュニティの DefinitelyTyped ライブラリであり、現在市場に出回っているほとんどの JavaScript ライブラリの宣言を定義します。

したがって、関連するJavaScriptの対応する@types宣言をダウンロードすると、ライブラリの対応する型定義を使用できます。

2. 使用方法

React プロジェクトを作成するときに最もよく使用されるコンポーネントは次のとおりです。

ステートレスコンポーネント
ステートフルコンポーネント
制御コンポーネント

ステートレスコンポーネント

主な機能は UI を表示することです。js を使用して宣言する場合は次のようになります。

'react' から * を React としてインポートします

エクスポートconstLogo = props => {
    const { ロゴ、クラス名、alt } = プロパティ

    戻る （
        <img src={logo} className={className} alt={alt} />
    ）
}

しかし、この時点で ts にはエラープロンプトが表示されます。その理由は、porps 型が定義されていないためです。この時点では、次のようにインターフェイス interface を使用して porps を定義できます。

'react' から * を React としてインポートします

インターフェース IProps {
    ロゴ?: 文字列
    クラス名?: 文字列
    alt?: 文字列
}

エクスポートconstLogo = (props: IProps) => {
    const { ロゴ、クラス名、alt } = プロパティ

    戻る （
        <img src={logo} className={className} alt={alt} />
    ）
}

しかし、私たちは皆、props に children プロパティがあることを知っているので、次のように各 porps インターフェースにさらに 1 つの子を定義することはできません。

インターフェース IProps {
    ロゴ?: 文字列
    クラス名?: 文字列
    alt?: 文字列
    子供？: ReactNode
}

より標準化された書き方は、次のように、既に children タイプを定義している React で定義された FC プロパティを使用することです。

エクスポートconstロゴ: React.FC<IProps> = props => {
    const { ロゴ、クラス名、alt } = プロパティ

    戻る （
        <img src={logo} className={className} alt={alt} />
    ）
}

React.FCは戻り値の型を明示的に定義し、他のメソッドは暗黙的に推測されます
React.FC は静的プロパティの型チェックと自動補完を提供します: displayName、propTypes、defaultProps
React.FC は子要素 (ReactElement | null) に対して暗黙的な型付けを提供します。

ステートフルコンポーネント

プロパティと状態属性を持つクラスコンポーネントにすることができます

Typescript 宣言を使用する場合、次のようになります。

'react' から * を React としてインポートします

インターフェース IProps {
  色: 文字列、
  サイズ?: 文字列、
}
インターフェースIState{
  カウント: 数、
}
クラスAppはReact.Component<IProps, IState>を拡張します。
  パブリック状態 = {
    カウント: 1,
  }
  パブリックレンダリング（）{
    戻る （
      <div>こんにちは世界</div>
    ）
  }
}

上記では、ジェネリックを使用して props と state の型を定義しているため、それらを使用するときにコンパイラーでよりスマートなプロンプトを取得できます。

Component ジェネリッククラスの定義については、以下に示すように、React 型定義ファイル node_modules/@types/react/index.d.ts を参照できます。

クラス Component<P, S> {

    読み取り専用プロパティ: Readonly<{ children?: ReactNode }> & Readonly<P>;

    状態: 読み取り専用<S>;

}

上記のように、状態プロパティは、状態を更新するために this.state を直接呼び出すことを防ぐために、読み取り可能な型も定義します。

制御コンポーネント

制御されたコンポーネントの特徴は、要素の内容がコンポーネントの状態によって制御されることです。

コンポーネント内のイベントは合成イベントであるため、ネイティブイベントと同等ではありません。

たとえば、入力コンポーネントは内部状態を変更します。一般的な定義は次のとおりです。

プライベート updateValue(e: React.ChangeEvent<HTMLInputElement>) {
    this.setState({ itemText: e.target.value })
}

一般的なイベントオブジェクトの種類:

ClipboardEvent<T = Element> クリップボードイベントオブジェクト
DragEvent<T = Element> ドラッグイベントオブジェクト
ChangeEvent<T = Element> 変更イベントオブジェクト
KeyboardEvent<T = Element> キーボードイベントオブジェクト
MouseEvent<T = Element> マウスイベントオブジェクト
TouchEvent<T = Element> タッチイベントオブジェクト
WheelEvent<T = Element> ホイールイベントオブジェクト
AnimationEvent<T = Element> アニメーションイベントオブジェクト
TransitionEvent<T = Element> 遷移イベントオブジェクト

TはDOM要素型を受け取る

結論

上記は、React プロジェクトでの TypeScript の単純な使用法ですが、React プロジェクトを作成するときには、フック、デフォルトパラメーター、ストアなども使用されます。

フレームワークでTypescriptを使用するための学習コストは比較的高く、習熟するには継続的に記述する必要があります。

React プロジェクトでの TypeScript の実装に関するこの記事はこれで終わりです。React プロジェクトでの TypeScript の適用に関する詳細なコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: