JS/TSTypeScript

TS in React

  1. React.FC

    Description is not a regular function, but a functional component. There must be a return value.

    1
    2
    3
    const TodoList: React.FC = () => {
        return <div></div>
    };

  2. Props

    There are two ways to write props types, and they are equivalent.

    1. Generic interface React.FC<props type>

      1
      2
      3
      4
      5
      6
      interface TodoListProps {
          items: {id: string, text: string}[];
      };
      const TodoList: React.FC<TodoListProps> = props => {
          return(...)
      }

    1. Declare the props type in the parameters

      1
      2
      3
      4
      5
      6
      interface TodoListProps {
          items: {id: string, text: string}[];
      };
      const TodoList = (props: TodoListProps) => {
          return(...)
      }

    props may also be functions. This should be written as:

    1
    2
    3
    4
    5
    6
    type NewTodoProps = {
    onAddTodo: (todoText: string) => void;
    }
    const NewTodo: React.FC<NewTodoProps> = props => {
        return(...)
    }

  3. Type of event

    Common Event event objects are as follows:

    1. Clipboard event object: ClipboardEvent<T = Element>

    2. Drag event object: DragEvent<T = Element>

    3. Focus event object: FocusEvent<T = Element>

    4. Form event object: FormEvent<T = Element>

    5. Change event object: ChangeEvent<T = Element>

    6. Keyboard event object: KeyboardEvent<T = Element>

    7. Mouse event object: MouseEvent<T = Element, E = NativeMouseEvent>

    8. Touch event object: TouchEvent<T = Element>

    9. Wheel event object: WheelEvent<T = Element>

    10. Animation event object: AnimationEvent<T = Element>

    11. Transition event object: TransitionEvent<T = Element>

    The generic types of these Event event objects will receive an Element element type, which is the type of the label element bound to this event.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    type State = {
      text: string;
    };
       
    const App: React.FC = () => {
      const [text, setText] = useState<string>("")
       
      const onChange = (e: React.FormEvent<HTMLInputElement>): void => {
        setText(e.currentTarget.value);
      };
     
      return (
        <div>
          <input type="text" value={text} onChange={onChange} />
        </div>
      );
    }

  4. useState() declaration type

    Use useState() to declare the type of state.

    By default, React will automatically deduce the type of state and update function based on the initial value of the set state. If the initial value is null, the type of state needs to be explicitly declared.

    1
    2
    3
    const [count, setCount] = useState<number>(1); //<number> can be omitted
    const [count, setCount] = useState<number | null>(null); //need to display statement
    const [todos, setTodos] = useState<{id: string; text: string}[]>([]); //It is best to change it to interface[].

    If state is an object and you want to initialize an empty object, you can use assertions to handle it:

    1
    const [user, setUser] = React.useState<IUser>({} as IUser);

  5. Use useRef to get the type of user input

    1
    const textInputRef = useRef<HTMLInputElement>(null);

  6. More knowledge about using TS in React

    https://juejin.cn/post/7021674818621669389


Share