反応する機能部品によるタイプスクリプト

typescriptはJavaScriptアプリケーションのための非常に人気の強化になっている.typescriptはJavaScriptのスーパーセットで、静的タイピングを行い、プレーンJavaScriptにコンパイルします.他の静的にタイプされたC言語のような言語に似ています.
このブログでは、人気のフロントエンド・フレームワーク(ER . library)に実装スクリプトの基礎をカバーします.
あなたが完全にtypescriptに新しいならば、チェックしてください.

始める
を取得し、実行するには、人気の発電機を使用して新しい反応TypeScriptのプロジェクトディレクトリを作成し、反応アプリを作成してみましょう.以下のコマンドは、基本的なタイプライブラリをインストールして、テストと構築のためにいくつかのスクリプトを与えて、デフォルトのtsconfigファイルを与えます.

npx create-react-app my-app --template typescript

次に、デフォルトの反応アプリを見て起動スクリプトを実行しましょう.

npm run start

これは自動的にブラウザウィンドウを開くべきです.回転反応のロゴはクールですが、私たちの変更に焦点を当てることができるように、このbloatを取り除くことにしましょう.
return文のdivを単純なHello Worldメッセージで置き換えます.

<div className="App">
  <h1>Hello World</h1>
</div>

スタートスクリプトを実行したままにしておくと、この変更はブラウザに反映されます.

機能性機能部品
子というファイルを作成します.TSXは、次の起動コードです.これは、3つのプロパティを持つ単純なコンポーネントを作成します.Bioはデフォルト値に設定する必要があります.

import React from 'react';

const Child = ({ name, id, bio = 'Bio empty' }) => {
  return (
    <div>
      <h2>Name: {name}, Id: {id}</h2>
      <p>{bio}</p>
    </div>
  )
};

export default Child;

子モジュールをアプリケーションコンポーネントにインポートし、h 1タグの下に次の要素を追加します.

<Child name="Billy" id={123} />

この単純なレンダリングでもコンパイルエラーが発生します.これは、プロパティを入力していないためです.よく見ると、私たちの子コンポーネント関数を入力しません.ありがたいことに、我々は単純にFCタイプをインポートすることによって、反応タイプライブラリを利用することができます.これは、機能的なコンポーネントの別名でもあります.また、関数の戻り値となるreactElementをインポートします

import React, { FC, ReactElement } from 'react';

次に、子コンポーネントのプロパティを入力します.バイオのためのデフォルトパラメータを使用するために、我々はオプションでそれを作るでしょう?文字.

type ChildProps = {
  name: string,
  id: number,
  bio?: string,
}

最後に、関数型と戻り値の型を定義します.

const Child: FC<ChildProps> = ({/* destructured props */}): ReactElement => { 
  /* function body */ 
};

VSCodeのようなタイプスクリプトと互換性のあるIDEを使用している場合は、そのプロパティをオーバーフローして、型が正しく定義されていることを確認できます.
IDの文字列を渡すなど、親コンポーネントの属性の型を変更しようとすると、TypeScriptはコンパイルエラーをスローします.
あなたの子コンポーネントを正しくレンダリングする必要があります.

反応フック

usestate ()
USENTフックを使用する場合は、正しい値に初期値を設定するようにしてください.また、入力スクリプトは適切なタイピングを決定するために型推論を使用します.共通のパターンは、プロップとして初期値を確立することです.

const Child: FC<{ initialClick?: number }> = ({ initialClick = 0 }): ReactElement => {
  const [click, setClick] = useState(initialClick);
  return (
    <div>
      <p>Click: {click}</p>
      <button onClick={() => setClick(click + 1)}>Click Me!</button>
    </div>
  )
};

TypeScriptは、ハードコード化された初期状態からタイプを推論することもできます.

// click will be inferred to be a number
const [click, setClick] = useState(0);

useeffect ()
UseEffectは、コンポーネントライフサイクルメソッドに置き換えられたスイス軍フックです.最初の関数、および特定の状態の2番目のオプションパラメータでなければなりません.これらの2つのパラメータが正しいタイプである限り、typescriptはどんな余分のコードなしででも正しくコンパイルされます.ここでは有効なフックを強調する簡単な例を示します.この効果は、コンポーネントが読み込まれたとき、ボタンAがクリックされたときのみトリガされます.

const Child: FC<ChildProps> = (): ReactElement => {
  const [clickA, setClickA] = useState(0);
  const [clickB, setClickB] = useState(0);

  useEffect(() => {
    if (clickA === 0) {
      console.log('Component loaded!')
    } else {
      console.log('Button A was clicked!');
    }
  }, [clickA]);

  return (
    <div>
      <p>A Clicks: {clickA}</p>
      <p>B Clicks: {clickB}</p>
      <button onClick={() => setClickA(clickA + 1)}>Button A</button>
      <button onClick={() => setClickB(clickB + 1)}>Button B</button>
      <p id="click-a"></p>
    </div>
  )
};

userend ()
userefは子要素に関する親要素情報を与えることができるので興味深いフックです.機能コンポーネントの関数本体の内部で発生する典型的な代入です.

const buttonElement = useRef<HTMLButtonElement>(null);

子要素のref属性に定数を代入します.

<button onClick={() => handleClick()} ref={buttonElement}>Button A</button>

一度参照を割り当てると、その参照に関するelement property or methodをアクセスすることによって使用できます.現在のプロパティ.以下は、GetBoundingClientRectメソッドを使用してボタンに関する位置情報にアクセスします.しかしながら、typescriptはこのコードに満足でありません.

const handleClick = () => {
  // this will throw an error because buttonElement.current could be null
  setButtonInfo(buttonElement.current.getBoundingClientRect());
}

簡単な回避策は、あなたの参照を条件付きでラップすることです.

const handleClick = () => {
  if (buttonElement.current !== null) {
    setButtonInfo(buttonElement.current.getBoundingClientRect());
  }
}

すべてをまとめるとき、あなたが割り当てているrefのタイプを指定するようにしてください.また、ButtonInfo状態の型をClientRectに割り当てます.

const Child: FC<{initialInfo?: ClientRect}> = ({ initialInfo }): ReactElement => {
  const [buttonInfo, setButtonInfo] = useState(initialInfo);

  const buttonElement = useRef<HTMLButtonElement>(null);

  const handleClick = () => {
    if (buttonElement.current !== null) {
      setButtonInfo(buttonElement.current.getBoundingClientRect());
    }
  }

  return (
    <div>
      <button onClick={() => handleClick()} ref={buttonElement}>Button A</button>
      <p>Top: {buttonInfo?.height}</p>
      <p>Bottom: {buttonInfo?.width}</p>
    </div>
  )
};

結論
初めに、typescriptはタイプについて多くを考えるのに使用されないJavaScriptプログラマーへの混乱のように感じることができます.しかし、これらの習慣は、特に大規模または複雑なアプリケーションでは、トリッキーなバグと開発の時間の浪費につながることができます.TypeScriptは、より良い習慣を採用し、反応コミュニティから大きなサポートをしています.
このブログが役に立ちましたように.クラススクリプトについての詳細については、クラスコンポーネントとの統合を含めて反応するために、私はthis blogを推奨します.