Как правильно использовать React реквизиты в Typescript?

Question

Я новичок в React и машинописи.

Я обнаружил, что мне нужно объявить реквизиты как таковые:

const Title = ({title}:{[key:string]:any}) => {

Но это кажется мне немного запутанным. Есть ли лучший способ go об этом?

Answer 1

Я бы предложил использовать FC generi c (который является псевдонимом для FunctionComponent generi c). Я предпочитаю использовать это, а не использовать generi c, потому что он добавляет свойство children и вводит возвращаемое значение из функционального компонента, React.Element против JSX.Element.

import * as React from "react";
import {FC} from "react";

interface ITitleProps {
   title: string;
}

// This works as expected
export const Title1: FC<ITitleProps> = ({
    title,
    children // Added by 'FC'
}) => {
    return (
        <div>
            <h1>{title}</h1>
            <p>{children}</p>
        </div>
    );
};

// This produces an error
export const Title2 = ({
    title,
    children // property 'children' does not exist on type 'ITitleProps'
}: ITitleProps) => {
    return (
        <div>
            <h1>{title}</h1>
            <p>{children}</p>
        </div>
    );
};

Этот GitHub был неоценим, пытаясь понять, как использовать TS с React: React TypeScript Cheatsheet

Answer 2

Вы можете сделать это простым, если хотите, объявив интерфейс со всеми ожидаемыми реквизитами:

interface MyProps {
  A: string;
  B: number;
  C?: number; // C is optional
}

const MyComponent = ({ A, B }: MyProps) =>  { ... }