W lutym opublikowałem 8 wpisów:

React:

1. Jak używać async i await w useEffect?
2. Typescript i komponenty

Git:

1. Jak pobrać informacje o zdalnym repozytorium?

JavaScript:

1. Operator ??
2. Jak pobrać strefę czasową użytkownika?

TypeScript:

1. Partial

Narysowałem dwa komiksy:

1. Big picture
2. Recursion

Przeczytałem dwie książki:

1. Historia nowego nazwiska - Elena Ferrante
2. Mądrość tłumu - Joe Abercrombie

Przesłuchałem trzy audiobooki:

1. Cień i kość - Leigh Bardugo
2. Faceci w gumofilcach - Andrzej Pilipiuk
3. Just Keep Buying - Nick Maggiulli

Do czego służy Partial?

Spójrz na poniższy kod:

interface Product {
	name: string;
	price: number;
	description: string;
	weight: number;
}

Mamy tutaj typ Product wszystkie jego pola są wymagane. Więc jeśli spróbujesz stworzyć obiekt o typie Product nie definiując wartości dla wszystkich wymaganych pól TypeScript zgłosi błąd.

Kolejny kod:

const buildProduct = (): Product => {
	return {
		name: randomName(),
		price: randomPrice().
		description: randomDescription(),
		weight: randomWeight()
	}
}

Powyższa funkcja tworzy obiekt typu Product. Przydatny builder, kiedy na przykład piszesz testy. Problem z tym kodem jest taki, gdy potrzebujesz przekazać wartości do konkretnych pól. Oczywiście możesz stworzyć obiekt i przypisać potrzebne wartości.

Można też tak:

const product: Product = buildProduct({ name: 'Super product', price: 150 });

Jak to zrobić?

const buildProduct = (product: Product): Product

Taki zapis oczywiście nie zadziała. W takich sytuacjach sprawdzi się Partial:

const buildProduct = (product: Partial<Product>): Product => {
	return {
		name: randomName(),
		price: randomPrice().
		description: randomDescription(),
		weight: randomWeight(),
		...product
	}
}

Teraz zapis:

const product: Product = buildProduct({ name: 'Super product', price: 150 });

Zadziała.

Partial jak widać pozwala na powiedzenie TypeScript: wartości danego typu są opcjonalne.

Strefa czasowa użytkownika

Piszesz aplikację, której działanie polega na podstawie tego, w jakiej strefie czasowej jest użytkownik? Inny powinien zostać wyświetlony dla użytkownika, który znajduje się w Azji, a inny dla kogoś z Europy?

Skąd mamy wiedzieć, w jakiej strefie czasowej jest użytkownik?

W tym wpisie znajdziesz sposób na pobranie strefy czasowej, w której znajduje się Twój użytkownik. Podanej w systemie IANA. To znaczy:

Europe/Warsaw
Asia/Bangkok

Wiele bibliotek od obsługi czasu korzysta z tego formatu.

Pobranie strefy czasowej użytkownika

Wystarczy wywołać:

console.log(Intl.DateTimeFormat().resolvedOptions().timeZone) // Europe/Warsaw

Metoda resolvedOptions obiekt, który zawiera właściwość timeZone. Wartość jest określona w systemie IANA.

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