TypeScript Academy · Oppitunti

Geneeriset komponentit ja forwardRef

Rakentakaa uudelleenkäytettäviä tyypitettyjä komponentteja geneerisyyden avulla

Oppitunti 4/413 vaihetta

Geneeriset komponentit ja forwardRef on ilmainen TypeScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu TypeScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. TypeScript Academy-kurssilla on yhteensä 4 oppituntia.

Tervetuloa

Tässä oppitunnissa käsitellään geneerisiä komponentteja ja forwardRef-toimintoa TypeScriptissä Reactin kanssa.

Komponentin props-rajapinta

Määritä React-komponenteille props-rajapinta komponentin API:n dokumentointia ja vaatimustenmukaisuuden varmistamista varten.

interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
}

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

FC vai eksplisiittinen palautustyyppi

React.FC lisää children- ja muut tyypit automaattisesti. Eksplisiittinen palautustyyppi (JSX.Element | null) on usein selkeämpi.

const Card: React.FC<{title: string}> = ({ title }) => <div>{title}</div>;

// Or explicit:
function Card2({ title }: { title: string }): JSX.Element {
  return <div>{title}</div>;
}

useState-funktion tyypittäminen

useState päättelee tyypin alkuarvosta. Määritä tyyppiparametri, kun alkuarvo on null tai epäselvä.

const [count, setCount] = useState(0);           // number
const [name, setName] = useState('');            // string
const [user, setUser] = useState<User | null>(null); // explicit

useReducer-funktion tyypittäminen

useReducer toimii parhaiten diskriminoidun unioni-toimintotyypin kanssa.

type Action = { type: 'increment' } | { type: 'decrement' } | { type: 'reset'; value: number };
function reducer(state: number, action: Action): number {
  switch (action.type) {
    case 'increment': return state + 1;
    case 'decrement': return state - 1;
    case 'reset': return action.value;
  }
}

DOM-elementtien useRef-tyypitys

DOM-elementtien kanssa käytettävä useRef tarvitsee tyyppiargumentin. Alusta se null-arvolla, koska elementtiä ei ole vielä olemassa.

const inputRef = useRef<HTMLInputElement>(null);

// Use:
if (inputRef.current) {
  inputRef.current.focus();
}

Tapahtumankäsittelijöiden tyypittäminen

Reactin tapahtumatyyppeihin kuuluvat React.ChangeEvent, React.MouseEvent ja React.FormEvent.

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

Geneeriset komponentit

Geneeriset komponentit hyväksyvät tyyppiparametrin joustavien ja tyyppiturvallisten listojen ja valintakomponenttien toteuttamiseen.

function List<T extends { id: number }>({ items }: { items: T[] }) {
  return <ul>{items.map(i => <li key={i.id}>{JSON.stringify(i)}</li>)}</ul>;
}

forwardRef TypeScriptissä

forwardRef tarvitsee tyyppiparametrit sekä ref-elementin tyypille että propseille.

const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ label, ...props }, ref) => (
    <label>{label}<input {...props} ref={ref} /></label>
  )
);

Mukautettujen hookien palautustyypit

Määritä mukautettujen hookien palautusarvot eksplisiittisesti, jotta monikkojen palautustyypeiksi ei päätellä any[]-tyyppiä.

function useToggle(init: boolean): [boolean, () => void] {
  const [state, setState] = useState(init);
  return [state, () => setState(s => !s)];
}

Konteksti TypeScriptissä

Määritä React-kontekstin tyypiksi unioni, joka sisältää undefined-arvon, jotta kontekstin käyttäjät joutuvat tarkistamaan sen olemassaolon.

const AuthContext = React.createContext<User | undefined>(undefined);
function useAuth(): User {
  const ctx = useContext(AuthContext);
  if (!ctx) throw new Error('useAuth must be used within AuthProvider');
  return ctx;
}

Pikatesti

Mikä on HTML-input-elementtiin viittaavan refin oikea tyyppi?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Määritä React-propsien tyypit rajapinnoilla, useState-tyypit tyyppiparametreilla, tapahtumat Reactin tapahtumatyypeillä, refit DOM-elementtien geneerisillä tyypeillä ja forwardRef kahdella tyyppiparametrilla. Geneeriset komponentit mahdollistavat tyyppiturvallisen, uudelleenkäytettävän käyttöliittymän.

Aloita maksutta

Opi TypeScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 101
Oppitunnit: 352

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Geneeriset komponentit ja forwardRef” ilmainen?

Kyllä – oppitunnin ”Geneeriset komponentit ja forwardRef” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko TypeScript Academy-kurssin, päivitä CoddyKit PROhon. TypeScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Geneeriset komponentit ja forwardRef”?

Rakentakaa uudelleenkäytettäviä tyypitettyjä komponentteja geneerisyyden avulla Harjoittelet TypeScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni TypeScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin TypeScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”Geneeriset komponentit ja forwardRef”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä TypeScript Academy-oppitunnilla?

Kyllä. Jokainen TypeScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

React-komponenttien propsien tyypittäminen
useState- ja useReducer-hookien tyypittäminen
useRef- ja tapahtumankäsittelijöiden tyypittäminen
Geneeriset komponentit ja forwardRef

← Takaisin: TypeScript Academy