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>
    )
}

Operator ??

Potrzebujesz sprawdzić, czy zmienna jest typu null lub undefined i ewentualnie dostarczyć alternatywną wartość? Użyj operatora: ??.

Przykład:

null ?? 'no value'; // no value
undefined ?? 'no value'; // no value

Zasada działania: jeśli wartość po lewej stronie operatora jest null lub undefined to wybierana jest wartość alternatywna (z prawej strony).

W innym przypadku będzie wybierana wartość z lewej strony:

0 ?? 'no value'; // 0
-1 ?? 'no value'; // -1
"" ?? 'no value'; // "" - pusty string
NaN ?? 'vo value'; // NaN
false ?? 'no value'; // false

Zdalne repozytorium

Aby pobrać listę o dostępnych, zdalnych repozytoriach wystarczy wywołać komendę:

git remote

Zwykle jest minimum jedno repozytorium:

origin

origin to skrót do zdalnego repozytorium, za pomocą którego można wygodnie posługiwać się w pracy z Git.

Na przykład wysyłanie danych na serwer:

git push origin master

Informacje o zdalnym repozytorium

Jeśli potrzebujesz zdobyć informacje o adresie do zdalnego repozytorium, wywołaj komendę:

git remote -v

Wynik:

origin	https://github.com/user/myrepo (fetch)
origin	https://github.com/user/myrepo (push)

Znacznie bardziej szczegółowe informacje uzyskasz za pomocą komendy:

git remote show [skrót-do-zdalnego-repozytorium]

Czyli jeśli używamy origin:

git remote show origin

Asynchroniczny useEffect?

Obsługa żądań HTTP w useEffect jest prosta:

import { useState, useEffect } from 'react';

const Component = () => {
	const [state, setState] = useState(null);
	
	useEffect(() => {
		fetch('/api/data').then((data) => setState(data));
	}, []);
}

A co jeśli chcesz użyć async/await?

Może tak?:

import { useState, useEffect } from 'react';

const Component = () => {
    const [state, setState] = useState(null);

    useEffect(async () => {
        const data = await fetch('/api/data');
        setState({ data });
    }, []);
}

To zadziała, ale nie powinno się pisać w taki sposób. Dlaczego? useEffect umożliwia wywołanie funkcji, kiedy komponent nie jest już potrzebny. Dzięki niej możemy po sobie posprzątać, o ile jest taka potrzeba.

Załóżmy jednak, że potrzebujesz wywołać funkcję "czyszczącą":

import { useState, useEffect } from 'react';

const Component = () => {
    const [state, setState] = useState(null);

    useEffect(async () => {
        const data = await fetch('/api/data');
        setState({ data });

        return () => {
            ...
        }
    }, []);
}

Problem polega na tym, że z powodu użycia async/await w taki sposób funkcja "czyszcząca" nigdy nie zostanie wywołana!

Jak użyć async/await?

Rozwiązanie tego problem jest bardzo proste. Można to zapisać w taki sposób:

import { useState, useEffect } from 'react';

const Component = () => {
    const [state, setState] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            const data = await fetch('/api/data');
            setState({ data });
        }
        
        fetchData();
        
        return () => {
            ...
        }
    }, []);
}