Discriminated Union yordamida React props'larni tipini tekshirish

Odatda nima yo’l tutamiz

React’da komponent yasashda hatoliklarga ko’zim tushib qoladi, aynan props type bilan bo’lgan muamolar, quyidagi kodda odatiy kodni ko’rishingiz mumkun. Bu xolatda Typescript o’z mazmunini yo’qotadi.

import React from "react";

type ButtonProps = {
  variant: "primary" | "icon";
  icon?: React.ReactNode;
};

export const Button = (props: ButtonProps) => {
  if (props.variant === "primary") {
    return <button class="px-4 py-2">Button</button>;
  } else {
    return <button class="square">{icon}</button>;
  }
};

Keling buni to’g’irlaymiz

Biz har bitta turi uchun o’z props type ni yaratamiz, asosiysi variant field hamma turlarida bo’lishi shart.

import React, { ReactNode } from "react";

type PrimaryProps = {
  variant: "primary";
};

type IconProps = {
  variant: "icon";
  icon: ReactNode;
};

type ButtonProps = PrimaryProps | IconProps;

export const Button = (props: ButtonProps) => {
  if (props.variant === "primary") {
    return <button class="px-4 py-2">Button</button>;
  } else {
    return <button class="square">{icon}</button>;
  }
};

Endi ushbu komponent aqilliroq va Typescript o’z mazmunini topdi.

Destrukturizatsiya qilishda hatolik beryapti !

Kelgin destrukturizatsiya holatini ko’rib chiqamiz. Quyidagi o’zgarishdan kegin destrukturizatsiya qilingan qatorda hatolik beradi, sababi icon qaysi holatda kelish yoki kelmasligini Typescript bilmaydi.

import React, { ReactNode } from "react";

type PrimaryProps = {
  variant: "primary";
};

type IconProps = {
  variant: "icon";
  icon: ReactNode;
};

type ButtonProps = PrimaryProps | IconProps;

 export const Button = (props: ButtonProps) => {
 export const Button = ({variant, icon}: ButtonProps) => {
  if (variant === "primary") {
    return <button className="px-4 py-2">Button</button>;
  } else {
    return <button className="square">{icon}</button>;
  }
};

Keling, bu holatni hal qilishga harakat qilib ko’ramiz, icon ni o’zini yozmaymizda, uni rest parameter ichida olamiz. Bu holatdayam rest.icon yozilgan joydan hatolik beradi.

import React, { ReactNode } from "react";

type PrimaryProps = {
  variant: "primary";
};

type IconProps = {
  variant: "icon";
  icon: ReactNode;
};

type ButtonProps = PrimaryProps | IconProps;

 export const Button = ({variant, icon}: ButtonProps) => {
 export const Button = ({variant, ...rest}: ButtonProps) => {
  if (variant === "primary") {
    return <button className="px-4 py-2">Button</button>;
  } else {
    return <button className="square">{rest.icon}</button>;
  }
};

Destrukturizatsiya qilish uchun yechim

Destrukturizatsiya qilishda quyidagi usuldan foydalanish mumkun. Agar boshqa yo’llarini bilsangiz izohda qoldiring, juda foydali bo’lar edi.

import React, { ReactNode } from 'react';

type PrimaryProps = {
  variant: 'primary';
};

type IconProps = {
  variant: 'icon';
  icon: ReactNode;
};

type ButtonProps = PrimaryProps | IconProps;

export const Button = ({ variant, ...rest }: ButtonProps) => {
  if (variant === 'primary') {
    return <button className='px-4 py-2'>Button</button>;
  } else {
  } else if ('icon' in rest) {
    return <button className='square'>{rest.icon}</button>;
  }
};

Tabriklayman sizda engi aqilli react komponent bor quyida to’liq kodi keltirilgan

import React, { ReactNode } from "react";

type PrimaryProps = {
  variant: "primary";
};

type IconProps = {
  variant: "icon";
  icon: ReactNode;
};

type ButtonProps = PrimaryProps | IconProps;

export const Button = ({ variant, ...rest }: ButtonProps) => {
  if (variant === "primary") {
    return <button className="px-4 py-2">Button</button>;
  } else if ("icon" in rest) {
    return <button className="square">{rest.icon}</button>;
  }
};

Savolingiz yoki biror bir fikringiz bo’lsa izohda yozib qoldiring.

"Generic type" ni react komoponentlarda ishlatish.