Frontend Academy · Lektion

TypeScript med React: FC-generics og hooks

Typ React-komponenter med generiske props, annotér useState og useRef med eksplicitte typer, og typ brugerdefinerede hooks, der returnerer tupler.

Lektion 3 af 413 trin

TypeScript med React: FC-generics og hooks er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 3 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 Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.

Typeangivelse for komponenter

Moderne React: angiv typen for props med en interface, og brug en almindelig funktion. React.FC findes, men anbefales ikke længere (children tilføjes implicit, og generiske typer understøttes ikke).

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

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

Typeangivelse af children

Brug React.ReactNode til alle children, der kan gengives.

interface CardProps {
  title: string;
  children: React.ReactNode;
}

function Card({ title, children }: CardProps) {
  return (
    <div className="card">
      <h2>{title}</h2>
      {children}
    </div>
  );
}

Typeangivelse af useState

useState udleder normalt typen fra startværdien. Angiv en eksplicit type, når startværdien er null eller ikke repræsenterer hele den mulige type.

const [count, setCount] = useState(0);              // number
const [name, setName] = useState('');                // string

const [user, setUser] = useState<User | null>(null); // explicit
const [items, setItems] = useState<Item[]>([]);      // explicit array type

Typeangivelse af useRef

Der findes to former: en reference til et DOM-element (initialiseret til null) eller en variabel beholder.

const inputRef = useRef<HTMLInputElement>(null);
const timerRef = useRef<number | null>(null);

useEffect(() => {
  inputRef.current?.focus();
  timerRef.current = window.setInterval(tick, 1000);
  return () => clearInterval(timerRef.current!);
}, []);

Typeangivelse af hændelsesbehandlere

Brug Reacts syntetiske hændelsestyper.

function Form() {
  function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
  }
  function onChange(e: React.ChangeEvent<HTMLInputElement>) {
    setValue(e.target.value);
  }
  function onClick(e: React.MouseEvent<HTMLButtonElement>) {
    /* ... */
  }
  return <form onSubmit={onSubmit}>...</form>;
}

Generiske komponenter

Komponenter kan være generiske — TypeScript udleder typeparameteren fra det sted, hvor funktionen kaldes.

interface ListProps<T> {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
  keyOf: (item: T) => string | number;
}

function List<T>({ items, renderItem, keyOf }: ListProps<T>) {
  return <ul>{items.map(i => <li key={keyOf(i)}>{renderItem(i)}</li>)}</ul>;
}

<List<User>
  items={users}
  renderItem={u => u.name}
  keyOf={u => u.id}
/>

Typeangivelse af brugerdefinerede hooks

Brugerdefinerede hooks er funktioner — angiv deres typer som for enhver anden funktion. Returtupler kræver en eksplicit annotering for at undgå, at arraytypen udvides.

function useToggle(initial = false): [boolean, () => void] {
  const [value, setValue] = useState(initial);
  const toggle = () => setValue(v => !v);
  return [value, toggle]; // tuple — annotation makes this stable
}

const [isOpen, toggle] = useToggle();

Typeangivelse af kontekst

createContext kræver en startværdi med samme type som den værdi, du vil levere. Brug en ikke-null-assertion eller et standardobjekt.

interface AuthContextValue {
  user: User | null;
  signIn: (email: string, pw: string) => Promise<void>;
  signOut: () => void;
}

const AuthContext = createContext<AuthContextValue | null>(null);

export function useAuth() {
  const ctx = useContext(AuthContext);
  if (!ctx) throw new Error('useAuth must be inside AuthProvider');
  return ctx;
}

Typeangivelse af useReducer

Angiv tilstanden og unionen af handlinger eksplicit.

type State = { count: number };
type Action =
  | { type: 'increment' }
  | { type: 'decrement' }
  | { type: 'set'; value: number };

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'increment': return { count: state.count + 1 };
    case 'decrement': return { count: state.count - 1 };
    case 'set':       return { count: action.value };
  }
}

const [state, dispatch] = useReducer(reducer, { count: 0 });

Undgå React.FC

React.FC er gået af mode: den tilføjer implicit children, understøtter ikke generiske komponenter på en god måde og hæmmer nogle optimeringer. Foretræk almindelige funktionskomponenter med typeangivne props.

Hjælpeværktøjet ComponentPropsWithoutRef

Hvis du vil arve props fra et indbygget element, f.eks. udvide en knap eller et inputfelt, skal du bruge ComponentPropsWithoutRef.

type ButtonProps = React.ComponentPropsWithoutRef<'button'> & {
  variant?: 'primary' | 'secondary';
};

function Button({ variant = 'primary', ...rest }: ButtonProps) {
  return <button className={`btn ${variant}`} {...rest} />;
}

Hurtigt tjek

Hvorfor frarådes det generelt at bruge React.FC til fordel for almindelige funktionskomponenter med typer?

Besvar den i den interaktive lektion

Opsummering: TypeScript + React

Brug interfaces til props, og foretræk almindelige funktioner frem for React.FC. children: React.ReactNode. useState udleder ofte typen automatisk, men angiv typen ved null eller tomme arrays. Brug useRef til DOM-elementer. Brug React-hændelsestyper til hændelseshåndteringsfunktioner. Brug generiske komponenter til genanvendelige lister og formularer. En tuple som returværdi fra brugerdefinerede hooks kræver en typeangivelse. Brug ComponentPropsWithoutRef til at udvide indbyggede elementer.

Gratis at komme i gang

Lær HTML 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: 41
Lektioner: 163

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “TypeScript med React: FC-generics og hooks” gratis?

Ja — hele teksten til “TypeScript med React: FC-generics og hooks” 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 Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “TypeScript med React: FC-generics og hooks”?

Typ React-komponenter med generiske props, annotér useState og useRef med eksplicitte typer, og typ brugerdefinerede hooks, der returnerer tupler. Du øver dig i Frontend 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å Frontend Academy?

Der kræves ingen tidligere erfaring. Frontend 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 3 af 4.

Hvor lang tid tager lektionen “TypeScript med React: FC-generics og hooks”?

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 Frontend Academy-lektion?

Ja. Alle Frontend 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

Skabelonliteral-typer
Dekoratorer og metadata
TypeScript med React: FC-generics og hooks
Strict Mode og eliminering af any

← Tilbage til Frontend Academy