React: Typescript i komponenty

Typescript i komponenty

Poniżej znajdziesz listę przydatnych informacji, jak dodać Typescript przy tworzeniu własnych komponentów:

Właściwości komponentu

Mamy komponent Person.jsx:

const Person = ({ name, weight, height }) => {
    return (
        <div>
            <div>Name: <strong>{name}</strong></div>
            <div>Weight: <strong>{weight} kg</strong></div>
            <div>Height: <strong>{height} cm</strong></div>
        </div>
    )
}

Jak dodać typy do właściwości komponentu?

Po pierwsze musisz stworzyć plik o rozszerzeniu: .tsx.

Na przykład: Person.tsx:

interface IPersonProps {
    name: string;
    weight: number;
    height: number;
}

const Person = ({ name, weight, height }: IPersonProps) => {
    return (
        <div>
            <div>Name: <strong>{name}</strong></div>
            <div>Weight: <strong>{weight} kg</strong></div>
            <div>Height: <strong>{height} cm</strong></div>
        </div>
    )
}

Typ dla children

React umożliwia przekazanie komponentu listy komponentów do innego komponentu w taki sposób:

<ParentComponent><ChildrenComponent /></ParentComponent>

Robi się to poprzez specjalną właściwość o nazwie props.

Jak dodać typ do props?

interface IPersonProps {
    name: string;
    weight: number;
    height: number;
    children: JSX.Element | JSX.Element[];
}

const Person = ({ name, weight, height, children }: IPersonProps) => {
    return (
        <div>
            <div>Name: <strong>{name}</strong></div>
            <div>Weight: <strong>{weight} kg</strong></div>
            <div>Height: <strong>{height} cm</strong></div>
            {children}
        </div>
    )
}

function App() {
    return (
        <>
            <Person name="Jan Kowalski" weight={85} height={190}>
                <div>
                    <strong>Hobby:</strong>
                    <span>Playing Tomb Raider</span>
                </div>
            </Person>
        </>
    );
}

Zwracany typ

Do funkcji Person, która tworzy komponent, można też dodać zwracany typ:

const Person = ({ name, weight, height, children }: IPersonProps): JSX.Element => {
    return (
        <div>
            <div>Name: <strong>{name}</strong></div>
            <div>Weight: <strong>{weight} kg</strong></div>
            <div>Height: <strong>{height} cm</strong></div>
            {children}
        </div>
    )
}