Типізація React-компонентів

type UserCardProps = {
  name: string;
  age: number;
};

function UserCard({ name, age }: UserCardProps) {
  return (
    <article>
      <h2>{name}</h2>
      <p>Вік: {age}</p>
    </article>
  );
}

function App() {
  return (
    <main>
      <UserCard name="Олена" age={28} />
      <UserCard name="Андрій" age={35} />
    </main>
  );
}

<UserCard name="Олена" age="28" />

type ButtonProps = {
  text: string;
  disabled: boolean;
};

function Button({ text, disabled }: ButtonProps) {
  return (
    <button disabled={disabled}>
      {text}
    </button>
  );
}

type ButtonProps = {
  text: string;
  disabled?: boolean;
};

function Button({ text, disabled = false }: ButtonProps) {
  return (
    <button disabled={disabled}>
      {text}
    </button>
  );
}

function App() {
  return <Button text="Зберегти" />;
}

type ProductProps = {
  title: string;
  price: number;
  isAvailable: boolean;
};

function Product({ title, price, isAvailable }: ProductProps) {
  return (
    <section>
      <h2>{title}</h2>
      <p>Ціна: {price} грн</p>
      <p>{isAvailable ? "Є в наявності" : "Немає в наявності"}</p>
    </section>
  );
}

<Product
  title="Бездротова клавіатура"
  price={1800}
  isAvailable={true}
/>

<Product
  title="Миша"
  price={900}
  isAvailable={false}
/>

interface UserProps {
  name: string;
  email: string;
}

function User({ name, email }: UserProps) {
  return (
    <div>
      <strong>{name}</strong>
      <span>{email}</span>
    </div>
  );
}

type GreetingProps = {
  name: string;
};

function Greeting({ name }: GreetingProps) {
  return <h1>Привіт, {name}!</h1>;
}

import type { React } from "react";

type MessageProps = {
  text: string;
  visible: boolean;
};

function Message({
  text,
  visible,
}: MessageProps): React.JSX.Element | null {
  if (!visible) {
    return null;
  }

  return <p>{text}</p>;
}

type MessageProps = {
  text: string;
  visible: boolean;
};

function Message({
  text,
  visible,
}: MessageProps): JSX.Element | null {
  if (!visible) {
    return null;
  }

  return <p>{text}</p>;
}

function App() {
  return (
    <Card>
      <p>Вміст картки</p>
    </Card>
  );
}

import type { ReactNode } from "react";

type CardProps = {
  title: string;
  children: ReactNode;
};

function Card({ title, children }: CardProps) {
  return (
    <section>
      <h2>{title}</h2>
      <div>{children}</div>
    </section>
  );
}

function App() {
  return (
    <Card title="Профіль">
      <p>Інформація про користувача</p>
    </Card>
  );
}

import type { ReactNode } from "react";

type PanelProps = {
  children?: ReactNode;
};

function Panel({ children }: PanelProps) {
  return <div>{children}</div>;
}

type SaveButtonProps = {
  onSave: () => void;
};

function SaveButton({ onSave }: SaveButtonProps) {
  return (
    <button type="button" onClick={onSave}>
      Зберегти
    </button>
  );
}

function App() {
  function handleSave() {
    console.log("Дані збережено");
  }

  return <SaveButton onSave={handleSave} />;
}

type UserActionsProps = {
  onSelect: (userId: number) => void;
};

function UserActions({ onSelect }: UserActionsProps) {
  return (
    <button type="button" onClick={() => onSelect(42)}>
      Обрати користувача
    </button>
  );
}

import type { ReactNode } from "react";

type LayoutProps = {
  title: string;
  children: ReactNode;
  showFooter?: boolean;
};

type ActionButtonProps = {
  text: string;
  onClick: () => void;
};

function ActionButton({
  text,
  onClick,
}: ActionButtonProps): React.JSX.Element {
  return (
    <button type="button" onClick={onClick}>
      {text}
    </button>
  );
}

function Layout({
  title,
  children,
  showFooter = true,
}: LayoutProps): React.JSX.Element {
  return (
    <div>
      <header>
        <h1>{title}</h1>
      </header>

      <main>{children}</main>

      {showFooter && <footer>Кінець сторінки</footer>}
    </div>
  );
}

function App(): React.JSX.Element {
  function handleButtonClick(): void {
    console.log("Кнопку натиснуто");
  }

  return (
    <Layout title="Панель керування">
      <p>Вітаємо в застосунку!</p>
      <ActionButton
        text="Виконати дію"
        onClick={handleButtonClick}
      />
    </Layout>
  );
}

export default App;

import type { FC } from "react";

type TitleProps = {
  text: string;
};

const Title: FC<TitleProps> = ({ text }) => {
  return <h1>{text}</h1>;
};

type TitleProps = {
  text: string;
};

function Title({ text }: TitleProps) {
  return <h1>{text}</h1>;
}

type ProfileProps = {
  age: number;
};

function Profile({ age }: ProfileProps) {
  return <p>Вік: {age}</p>;
}

// Помилка: age має бути number
<Profile age="25" />;

<Profile age={25} />

type GreetingProps = {
  name?: string;
};

function Greeting({ name = "гість" }: GreetingProps) {
  return <p>Привіт, {name}!</p>;
}

type ModalProps = {
  open: boolean;
};

function Modal({ open }: ModalProps) {
  return open ? <div>Модальне вікно</div> : null;
}

// Помилка: "true" є рядком
<Modal open="true" />;

<Modal open={true} />

<ActionButton onClick={handleButtonClick()} />

<ActionButton onClick={handleButtonClick} />

import type { ReactNode } from "react";

type BoxProps = {
  children: ReactNode;
};