TypeScript Academy · Lektion

Generiske komponenter og forwardRef

Byg genanvendelige, typede komponenter med generics

Lektion 4 af 413 trin

Generiske komponenter og forwardRef er en gratis TypeScript Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i TypeScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. TypeScript Academy-kurset indeholder 4 lektioner i alt.

Velkommen

I denne lektion lærer du om generiske komponenter og forwardRef i TypeScript med React.

Grænseflade for komponentens props

Definér en grænseflade for React-komponenters props for at dokumentere og håndhæve komponentens API.

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

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

FC kontra eksplicit returtype

React.FC tilføjer children og andre typer automatisk. En eksplicit returtype (JSX.Element | null) er ofte tydeligere.

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

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

Typning af useState

useState udleder typen ud fra startværdien. Angiv et typeparameter, når startværdien er null eller tvetydig.

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

Typning af useReducer

useReducer fungerer bedst med en diskrimineret unionstype for handlinger.

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;
  }
}

Typning af useRef til DOM

useRef til DOM-elementer kræver et typeargument. Initialisér med null, fordi elementet endnu ikke findes.

const inputRef = useRef<HTMLInputElement>(null);

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

Typning af hændelseshåndteringer

React-hændelsestyper omfatter React.ChangeEvent, React.MouseEvent og React.FormEvent.

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

Generiske komponenter

Generiske komponenter accepterer et typeparameter til fleksible, typesikre lister og valgelementer.

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

forwardRef med TypeScript

forwardRef kræver typeparametre for både ref-elementtypen og props.

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

Returtyper for brugerdefinerede hooks

Angiv returværdierne fra brugerdefinerede hooks eksplicit for at undgå, at tupler udledes som any[].

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

Kontekst med TypeScript

Angiv typen for React-kontekst med en union, der inkluderer undefined, så brugere tvinges til at kontrollere, om konteksten findes.

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;
}

Hurtigt tjek

Hvad er den korrekte type for en ref til et HTML-inputelement?

Besvar den i den interaktive lektion

Opsummering

Angiv typer for React-props med grænseflader, useState med typeparametre, hændelser med React-hændelsestyper, refs med generiske DOM-elementtyper og forwardRef med to typeparametre. Generiske komponenter gør det muligt at genbruge brugergrænseflader med typesikkerhed.

Gratis at komme i gang

Lær TypeScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 101
Lektioner: 352

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Generiske komponenter og forwardRef” gratis?

Ja — hele teksten til “Generiske komponenter og forwardRef” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af TypeScript Academy-kurset, skal du opgradere til CoddyKit PRO. TypeScript Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Generiske komponenter og forwardRef”?

Byg genanvendelige, typede komponenter med generics Du øver dig i TypeScript Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på TypeScript Academy?

Der kræves ingen tidligere erfaring. TypeScript Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.

Hvor lang tid tager lektionen “Generiske komponenter og forwardRef”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne TypeScript Academy-lektion?

Ja. Alle TypeScript Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til TypeScript Academy