Tento příspěvek byl původně publikován na blogu TK.
V těchto dnech stavím nový projekt, abych hluboce porozuměl některým tématům. Jde o uživatelskou zkušenost, výkon webu, dostupnost a typový systém pro konzistentní data.
Tento projekt v podstatě používám React with Typescript. Nejprve jsem implementoval vlastní hák pro zpracování dat. Jedním z možných datových typů, které může načtení vrátit, je Product
typ. Vypadá to takto:
type Product = {
name: string;
price: number;
imageUrl: string;
description: string;
isShippingFree: boolean;
discount: number;
};
Nyní, když jsem mohl načíst nějaké produkty, chtěl jsem použít seznam produktů k vykreslení v DOM. Tak jsem vytvořil Product
komponent. Ale protože používáme Typescript, rekvizity by měly být napsány. V tomto případě jsem použil Product
typ. Vypadá to takto:
export const Product = ({
imageUrl,
name,
description,
price,
discount,
isShippingFree,
}: ProductType) => (
<Box>
<Image imageUrl={imageUrl} imageAlt={name} />
<TitleDescription name={name} description={description} />
<Price price={price} discount={discount} />
<Tag label="Free Shipping" isVisible={isShippingFree} />
</Box>
);
A když jsem začal implementovat Image
komponentu, právě jsem prošel imageUrl
a imageAlt
jako rekvizity. Vypadá to takto:
export const Image = ({ imageUrl }) =>
<img src={imageUrl} />;
V tomto případě jsem nemohl použít Product
typ. Ale mohl bych to znovu použít.
Dozvěděl jsem se o tomto novém typu:částečném typu. Myšlenka Partial
type je vytvořit nový typ založený na předaném typu a nastavit všechny atributy na optional
.
Pokud tedy uděláme část Product
typu, vypadalo by to takto:
type Product = {
name?: string;
price?: number;
imageUrl?: string;
description?: string;
isShippingFree?: boolean;
discount?: number;
};
Všechny vlastnosti jsou nastaveny na nepovinné.
A teď to mohu použít pro Image
komponent:
export const Image = ({ imageUrl }): Partial<ProductType> =>
<img src={imageUrl} />;
Ale když použiji Image
komponentu, mohu předat jakékoli rekvizity, které chci. Chybí mi kontrola typu. Během kompilace se nezlomí.
Abych to napravil, mohl jsem sestavit ImagePropsType
a použijte jej jako typ rekvizit součásti.
type ImagePropsType = {
imageUrl: string;
};
export const Image = ({ imageUrl }): ImagePropsType =>
<img src={imageUrl} />;
Ale už mám typ pro imageUrl
uvnitř Product
typ. Začal jsem tedy hledat, jak bych mohl znovu použít typ:našel jsem Pick
typ.
Pick
typ mi umožňuje znovu použít Product
zadejte výběrem sady vlastností, které chci:
type ImagePropsType = Pick<ProductType, 'imageUrl'>;
Nyní zajistím, aby kontrola typu a znovupoužitelnost typu fungovaly dobře.
Chcete-li sestavit celý Image
komponentu, také jsem potřeboval předat další rekvizity jako:imageAlt
a width
.
Co jsem chtěl, je průsečík Pick<ProductType, 'imageUrl'>
, imageAlt
typ a width
typ.
V Typescript je znázornění průsečíku &
operátor.
Definoval jsem ImageUrlType
:
type ImageUrlType = Pick<ProductType, 'imageUrl'>;
A ImageAttrType
reprezentovat obě imageAlt
a width
:
type ImageAttrType = { imageAlt: string; width?: string };
A složte je dohromady hmyzem typů:
type ImagePropsType = ImageUrlType & ImageAttrType;
A konečný výsledek je:
import { ProductType } from 'types/Product';
type ImageUrlType = Pick<ProductType, 'imageUrl'>;
type ImageAttrType = { imageAlt: string; width?: string };
type ImagePropsType = ImageUrlType & ImageAttrType;
export const Image = ({ imageUrl, imageAlt, width }: ImagePropsType) =>
<img src={imageUrl} alt={imageAlt} width={width} />;
Mám adresy URL obrázku, alt, typy šířky protnuté a definované v ImagePropsType
. Dokáže typy považovat za data a skládat je. Toto je velmi skvělá funkce.
Toto jsou zajímavé nové typy, které jsem se tento týden naučil.
Můj Twitter a Github.