Summary - Utility types

Write a flexible form type with utility types.

Summary - Utility types

Utility types build new types from existing ones. Partial makes all properties optional, Required makes them required. Pick selects properties, Omit removes them. Record sets up a key-value mapping. Together they let you write flexible form types.

type FormAlan = Pick<Uye, "ad" | "eposta">;
type Guncelleme = Partial<FormAlan>;

Exercise Flexible form type

Define interface Uye with ad: string, eposta: string and yas: number. Define type FormTip as Pick<Uye, "ad" | "eposta">. Define type FormGuncelle as Partial<FormTip>. Write function guncelle(u: FormGuncelle): void whose body prints u.ad with console.log if present. Call guncelle({ ad: "Mert" }).

Show example solution

interface Uye {
  ad: string;
  eposta: string;
  yas: number;
}
type FormTip = Pick<Uye, "ad" | "eposta">;
type FormGuncelle = Partial<FormTip>;
function guncelle(u: FormGuncelle): void {
  if (u.ad) {
    console.log(u.ad);
  }
}
guncelle({ ad: "Mert" });

Test yourself

Which combination takes only <code>ad</code> and <code>eposta</code> from a form and makes them optional?
- Omit<Partial<Uye>, "eposta">>
- Partial<Pick<Uye, "ad" | "eposta">>
- Required<Omit<Uye, "ad">>
- Pick<Record<string, number>, "ad">>
Show answer

Partial<Pick<Uye, "ad" | "eposta">> — First Pick selects ad and eposta, then Partial makes both optional. The others either keep the wrong fields or do not make them optional.

Form update type

interface Uye { ad: string; eposta: string; yas: number; }
type FormGuncelle = ____<Pick<Uye, "ad" | "eposta">>;

Show answer

interface Uye { ad: string; eposta: string; yas: number; }
type FormGuncelle = Partial<Pick<Uye, "ad" | "eposta">>;

Match utility types

Partial<T>

All properties optional
Required<T>

All properties required
Pick<T, K>

Selects properties in K
Omit<T, K>

Removes properties in K

Next lesson: keyof operator

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies