TypeScript pomalu

Stav a události v Reactu

V komponentách často vytváříme interní stav pomocí useState. Potřebujeme nastavit, jakého typu bude hodnota, která bude ve stavu uložená.

Pokud jde o základní datové typy, typ se sám odvodí z výchozí hodnoty a my nemusíme nic dělat:

import {useState} from 'react';

export const MyComponent = () => {
  // count má typ number, protože hodnota 0 je number
  const [count, setCount] = useState(0);

  // name má typ string, protože 'Alena' ej string
  const [name, setName] = useState('Alena');
}

Pokud ale potřebujeme do stavu ukládat například objekt, chceme pro tento objekt vytvořit interface a potom tento interface podstrčit do useState jako typ hodnoty, která tam bude uložená:

import {useState} from 'react';

export interface User {
  name: string;
  age: number;
  hasDog: boolean;
}

export const MyComponent = () => {
  const [user, setUser] = useState<User>({
    name: 'Alena',
    age: 27,
    hasDog: true,
  });
}

Události

Často potřebujeme u událostí použít tzv. eventObject. Ten má pro každý typ události jinou podobu. Obsahuje jiné vlastnosti, pokud šlo o událost kliknutí na tlačítko, a jiné vlastnosti, pokud šlo o událost změna hodnoty formulářového pole.

Pokud naše událost potřebuje použít event object, musíme správně nastavit jeho typ, aby TypeScript věděl, jaké vlastnosti v objektu má očekávat.

Kliknutí na tlačítko

function handleClick(e: React.MouseEvent<HTMLButtonElement>) {
  console.log("Kliknuto!", e.clientX, e.clientY);
}

return <button onClick={handleClick}>Klikni</button>;

Změna formulářového pole

function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
  console.log(e.target.value);
}

return <input onChange={handleChange} />;

Pro prvek <textarea> by to bylo React.ChangeEvent<HTMLTextAreaElement> atd.

Odeslání formuláře

function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
  e.preventDefault();
  console.log("Formulář odeslán");
}

return <form onSubmit={handleSubmit}>...</form>;

Události pro jiné elementy

Jak zjistit, jakého typu je událost

Můžeš hledat na Googlu nebo se zeptat ChatuGPT. Nejjednodušší ale je, nechat si napovědět přímo v editoru. Stačí do události napsat anonymní funkci, která přijímá parametr e, a pak se na něj myší postavit. VS Code ti ukáže nápovědu TypeScriptu, kde bude uvedeno, jakého typu event být.

Například chci reagovat na kliknutí na <div>:

export const ClickableDiv = () => {
  return (
    <div onClick={(e) => {}}> Klikni na mě </div>
  )
}

Když najedu myší na e, VS Code mi řekne, že e je typu React.MouseEvent<HTMLDivElement>.