Strojopis Zajímavé typy

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.