Typowanie Props - Interfejsy i Wlasciwosci Opcjonalne

Props to kosmiczna komunikacja między komponentami. TypeScript pozwala Ci dokładnie określić, jakie dane moga byc przesylane - to jak protokol komunikacyjny na statku kosmicznym.

Interfejsy dla props

Interfejsy to najczestszy sposób definiowania typow props w React:

1// Interfejs definiuje "ksztalt" danych
2interface CrewMemberProps {
3  name: string;
4  rank: string;
5  experience: number;
6  specialization: string;
7}
8
9function CrewMember({ name, rank, experience, specialization }: CrewMemberProps) {
10  return (
11    <div>
12      <h3>{name}</h3>
13      <p>Ranga: {rank}</p>
14      <p>Lata doswiadczenia: {experience}</p>
15      <p>Specjalizacja: {specialization}</p>
16    </div>
17  );
18}
19
20// Uzycie - TypeScript sprawdzi wszystkie props
21<CrewMember
22  name="Nova"
23  rank="Kapitan"
24  experience={15}
25  specialization="Nawigacja"
26/>

Props opcjonalne

Nie wszystkie props sa wymagane. Uzyj znaku

?

aby oznaczyc props jako opcjonalny:

1interface MissionProps {
2  title: string;          // wymagany
3  description: string;    // wymagany
4  priority?: "low" | "medium" | "high";  // opcjonalny
5  deadline?: Date;        // opcjonalny
6  assignedCrew?: string[]; // opcjonalny
7}
8
9function MissionCard({ title, description, priority = "medium", deadline, assignedCrew }: MissionProps) {
10  return (
11    <div>
12      <h3>{title}</h3>
13      <p>{description}</p>
14      <span>Priorytet: {priority}</span>
15      {deadline && <p>Termin: {deadline.toLocaleDateString()}</p>}
16      {assignedCrew && (
17        <ul>
18          {assignedCrew.map(member => <li key={member}>{member}</li>)}
19        </ul>
20      )}
21    </div>
22  );
23}
24
25// Mozna użyć bez opcjonalnych props
26<MissionCard title="Zwiad" description="Rozpoznanie sektora 7" />
27
28// Lub że wszystkimi
29<MissionCard
30  title="Zwiad"
31  description="Rozpoznanie sektora 7"
32  priority="high"
33  assignedCrew={["Nova", "Ra"]}
34/>

Typowanie children

Props

children

to specjalny props w React. Oto jak go poprawnie typowac:

1// React.ReactNode - przyjmuje wszystko co React może renderowac
2interface PanelProps {
3  title: string;
4  children: React.ReactNode;
5}
6
7function Panel({ title, children }: PanelProps) {
8  return (
9    <div className="panel">
10      <h2>{title}</h2>
11      <div className="content">{children}</div>
12    </div>
13  );
14}
15
16// Uzycie
17<Panel title="Dane Misji">
18  <p>Status: aktywna</p>
19  <MissionCard title="Zwiad" description="..." />
20</Panel>

Typ vs Interfejs

Możesz użyć również

type

zamiast

interface

:

1// Type alias - alternatywa dla interface
2type ButtonVariant = "primary" | "secondary" | "danger";
3
4type ButtonProps = {
5  label: string;
6  variant: ButtonVariant;
7  disabled?: boolean;
8  onClick: () => void;
9};
10
11// Interface - można rozszerzać
12interface BaseProps {
13  id: string;
14  className?: string;
15}
16
17interface ShipProps extends BaseProps {
18  name: string;
19  speed: number;
20}
21
22// ShipProps ma: id, className, name, speed

Rozszerzanie interfejsow

Interfejsy można łączyć i rozszerzać, tworząc bardziej skomplikowane struktury:

1interface Coordinates {
2  x: number;
3  y: number;
4  z: number;
5}
6
7interface SpaceObject {
8  name: string;
9  coordinates: Coordinates;
10}
11
12interface Planet extends SpaceObject {
13  radius: number;
14  habitable: boolean;
15  atmosphere: string[];
16}
17
18interface Star extends SpaceObject {
19  temperature: number;
20  luminosity: number;
21  spectralClass: string;
22}