私の反応タイプシートカンニングペーパー

私はtypescriptを使用して以来、私はそれを使用を停止することはできません.時々正しいタイプを見つけて、どこからそれをインポートする必要があります本当の頭痛です.特にReactJSアプリケーションを構築するとき.このブログ記事は、私の最も使用される反応タイプのタイプを公に文書化する絶好のチャンスです.機能部品にフォーカスし、フックを反応させる.
記事の構造は、各段落がスタンドアロンのチップであることです.
反応TypeScriptプロジェクトを作成するには、Create Reaction Appを使用できます.

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

反応をインポートする正しい方法について多くの協議がありました.これは最も更新される方法です.

import React from 'react';

機能コンポーネントの戻り値の型はReactElement

import React, { ReactElement } from 'react';
const Component = (): ReactElement => {
  return <></>;
};

ネイティブのHTML要素の小道具を拡張する場合は、ジェネリッククラスを使用できますHTMLAttributes . 新しいボタンを作りたいと思います.

import React, { HTMLAttributes } from 'react';

interface MyButtonProps extends HTMLAttributes<HTMLButtonElement> {
  ...
}

const MyButton = (props: MyButtonProps): ReactElement => {
  return <button {...props} />
}

我々は、ボタンを要素に小道具を転送するために破壊を使用することに注意してください.
子供の小道具はタイプ1ですReactNode .
反応のイベントシステムは、ネイティブのHTMLイベントではなく、独自の型を使用します.反応ライブラリからイベントをインポートすることを確認します.import { MouseEvent } from 'react' .
正しいタイプをuseRef ジェネリック.入力要素にrefを作成する場合は

import { useRef } from 'react';

const ref = useRef<HTMLInputElement | null>(null);

The ref.current タイプは自動的にHTMLInputElement .
同様にuseState .

import { useState } from 'react';

const [myState, setMyState] = useState<boolean | null>(null);

どちらの場合も初期値を指定すると、型は暗黙のうちに推論されます.
カスタムフックを作成する場合、明示的に戻り値の型を設定します.さもなければ、型スクリプトは型を誤って推論するかもしれません.
これは完全なカンニングペーパーからではなく、私が最も使用するものを文書化するのです.詳細については、この素晴らしいカンニングペーパーをチェックアウト:https://github.com/typescript-cheatsheets/react .
Daily すべての新しいタブを最高のプログラミングニュースを提供します.私たちはあなたのための資格のソースの数百人は、将来をハックできるようにランク付けされます.