React プロジェクトにおける TypeScript の使用の概要

const MyComp: React.FC<{ title: string; }> = ({title}) => <h2>{title}</h2>;

// リアクトノード
定数a: React.ReactNode =
  ヌル
  未定義 || <div>hello</div> || <MyComp title="world" /> ||
  "abc" ||
  123 ||
  真実;

// ReactElement と JSX.Element
const b: React.ReactElement = <div>hello world</div> || <MyComp title="good" />;

const c: JSX.Element = <MyComp title="good" /> || <div>hello world</div>;

// 入力ボックスにテキストを入力します const handleInputChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
  コンソールログ(evt);
};

// ボタンクリック const handleButtonClick = (evt: React.MouseEvent<HTMLButtonElement>) => {
  コンソールログ(evt);
};

// モバイル端末タッチ div
定数 handleDivTouch = (イベント: React.TouchEvent<HTMLDivElement>) => {
  コンソールログ(evt);
};

// ❌初期値 0 はすでにカウント型を記述しているので、これは不要です。const [count, setCount] = useState<number>(0);

// ✅これはより良いです const [count, setCount] = useState(0);

インターフェースIUser{
  名前: 文字列;
  年齢: 番号;
}

const [user, setUser] = React.useState<IUser | null>(null);

console.log(ユーザー名?.名前);

// DOMに接続します。初期値はundefinedではなくnullです。汎用変数を指定する場合は、HTMLxxxElementを指定する必要があります。
// 呼び出し時に inputRef.current に値が必要であることが確実な場合は、null 以外のアサーションを使用して null の後に追加できます。
const inputRef = useRef<HTMLInputElement>(null!);

const ハンドルクリック = () => {
  inputRef.current.focus(); // もちろん、非 null アサーションは必要ありません。inputEl.current?.focus() オプション チェーンを使用することもできます。}

戻る （
  <入力ref={inputRef} />
  <button onClick={handleClick}>クリック</button>
）

// 初期値を通じてジェネリック変数の型を自動的に指定します const sum = useRef(0);

// .current を通じて sum.current = 3 を直接割り当てます。
// 非同期更新の問題はありません console.log(sum.current); // 3

ルートリデューサーをストアに追加します。

エクスポート型 RootState = ReturnType<typeof rootReducer>;

const { var1, var2 } = useSelector((store: RootState) => store.xxx);

定数useInfo = () => {
  定数[年齢、年齢の設定] = useState(0);

  return [age, setAge] as const; // 型はタプル、[number, React.Dispatch<React.SetStateAction<number>>]
};

「redux」からAnyActionをインポートします。

定数DEF_STATE = {
  カウント: 0,
  タイプ: '整数'
};

// 制限を緩和するためにreduxのAnyActionを使用する function countReducer(state = DEF_STATE, action: AnyAction) {
  スイッチ（アクションタイプ）{
    ケース "INCREASE_COUNT":
      戻る {
        ...州、
        カウント: 状態.count + 1,
      };
    ケース「DECREASE_COUNT」:
      戻る {
        ...州、
        カウント: 状態.count - 1,
      };
    デフォルト：
      状態を返します。
  }
}

デフォルトの countReducer をエクスポートします。

// たとえば、現在のコンポーネント名はInfoCardです
エクスポートインターフェースInfoCardProps {
  名前: 文字列;
  年齢: 番号;
}

エクスポートインターフェース GetUserInfoReqParams {
    /** 名前*/
    名前: 文字列;
    /** 年*/
    年齢: 番号;
    /** 性別*/
    性別: 文字列;
}

// キー名が不明で、キー値が数値型に制限されていることを示します export interface NotSureAboutKey {
  [キー: 文字列]: 数値;
}

// キー名と値が不明な場合は、次のインターフェースが任意のオブジェクトに適用されます。エクスポートインターフェースAllNotSure {
  [キー: 文字列]: 任意;
}

// 通常、インターフェースのジェネリック変数にはデフォルトの型を指定します。interface IHuman<T = unknown> {
  名前: 文字列;
  年齢: 番号;
  性別: T;
}

// 他の場所で使用する場合 const youngMan: IHuman<string> = {
    名前: 'zhangsan'、
    年齢: 18歳
    性別: '男性'
}