Comics: Eat that frog!

Opublikowano: 28.02.2023 - tagi: Podsumowanie Luty 2023 Blog
W lutym opublikowałem 8 wpisów:
React:
Git:
JavaScript:
TypeScript:
Narysowałem dwa komiksy:
Przeczytałem dwie książki:
Przesłuchałem trzy audiobooki:
Opublikowano: 23.02.2023 - tagi: TypeScript JavaScript Typ
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.
Opublikowano: 21.02.2023 - tagi: JavaScript Czas
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.
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.
Opublikowano: 18.02.2023 - tagi: React Typescript JavaScript Komponent
Poniżej znajdziesz listę przydatnych informacji, jak dodać Typescript przy tworzeniu własnych komponentów:
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>
)
}
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>
</>
);
}
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>
)
}