Frontend Academy · Oppitunti

Apuohjelmatyypit: Partial, Required, Pick ja Omit

Muunna olemassa olevia tyyppejä sisäänrakennetuilla apuohjelmatyypeillä ja luo muunnelmia ilman päällekkäistä koodia

Oppitunti 2/413 vaihetta

Apuohjelmatyypit: Partial, Required, Pick ja Omit on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/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 Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.

Sisäänrakennetut utiliteettityypit

TypeScript sisältää joukon geneerisiä utiliteettityyppejä, jotka muuntavat muita tyyppejä. Niiden ansiosta samanlaisten rajapintamuunnelmien manuaalista uudelleenkirjoittamista ei tarvita.

Partial<T>

Tekee kaikista T:n ominaisuuksista valinnaisia. Sopii erinomaisesti update- ja patch-payload-kuormiin, joissa kaikkia kenttiä ei tarvitse antaa.

interface User { name: string; email: string; age: number; }

function updateUser(id: string, changes: Partial<User>) {
  // changes.name is string | undefined
  // changes.email is string | undefined
}

updateUser('1', { name: 'Bob' }); // only update name

Required<T>

Partialin vastakohta — tekee kaikista ominaisuuksista pakollisia ja poistaa valinnaisuuden (?) ilmaisevat määreet.

interface Config {
  host?: string;
  port?: number;
  debug?: boolean;
}

function validate(config: Required<Config>) {
  // All three are now required
  console.log(config.host, config.port, config.debug);
}

Pick<T, K>

Luo tyypin, jossa on vain T:stä määritetyt ominaisuudet. Hyödyllinen, kun suurista objekteista halutaan säilyttää vain tarvittavat kentät.

interface User { id: number; name: string; email: string; password: string; }

type PublicUser = Pick<User, 'id' | 'name' | 'email'>;
// { id: number; name: string; email: string }
// password is excluded — safe to send to client

Omit<T, K>

Luo tyypin, josta määritetyt ominaisuudet on poistettu. Pickin vastakohta.

type UserWithoutPassword = Omit<User, 'password'>;
// { id: number; name: string; email: string }

type CreateUserDto = Omit<User, 'id'>; // new users don't have an id yet

Readonly<T>

Tekee kaikista ominaisuuksista readonly-ominaisuuksia ja estää niiden uudelleenasettamisen. Hyödyllinen määritysobjekteissa ja muuttumattomassa datassa.

const config: Readonly<Config> = {
  host: 'localhost',
  port: 3000,
};
config.port = 8080; // Error: cannot assign to 'port' because it is read-only

Record<K, V>

Luo objektityypin, jonka avaimet ovat tyyppiä K ja arvot tyyppiä V. Tämä on selkeämpi kuin raaka indeksiallekirjoitus, kun avaimet ovat tunnettu unioni.

type Role = 'admin' | 'editor' | 'viewer';
type Permissions = Record<Role, { canEdit: boolean; canDelete: boolean }>;

const perms: Permissions = {
  admin:  { canEdit: true,  canDelete: true  },
  editor: { canEdit: true,  canDelete: false },
  viewer: { canEdit: false, canDelete: false },
};

ReturnType<T> ja Parameters<T>

Poimivat funktiotyypin paluu- ja parametrityypit. Hyödyllisiä, kun ette voi importata tyyppiä mutta tarvitsette funktion allekirjoitusta vastaavan tyypin.

function fetchUser(id: number) {
  return { id, name: 'Alice' };
}

type UserResult = ReturnType<typeof fetchUser>; // { id: number; name: string }
type FetchParams = Parameters<typeof fetchUser>; // [id: number]

Awaited<T>

Purkaa Promise-tyypin sen ratkaistuksi arvoksi. Hyödyllinen asynkronisten funktioiden kanssa työskenneltäessä.

type UserResponse = Awaited<ReturnType<typeof fetchUser>>;
// Resolves both the function return and the Promise

async function load() { return { user: { name: 'Alice' } }; }
type Loaded = Awaited<ReturnType<typeof load>>; // { user: { name: string } }

Extract<T, U> ja Exclude<T, U>

Extract<T, U> säilyttää T:stä vain tyypit, jotka voidaan sijoittaa tyyppiin U. Exclude<T, U> poistaa ne.

type A = 'a' | 'b' | 'c' | 'd';
type BC = Extract<A, 'b' | 'c' | 'e'>; // 'b' | 'c'
type AD = Exclude<A, 'b' | 'c'>;       // 'a' | 'd'

// NonNullable removes null and undefined:
type T = string | null | undefined;
type NonNull = NonNullable<T>; // string

Utiliteettityyppien yhdistäminen

Utiliteettityyppejä voidaan yhdistää täsmällisten tyyppien luomiseksi.

type UpdatePayload<T> = Partial<Omit<T, 'id' | 'createdAt'>>;
// Use for PATCH endpoints — omit immutable fields, make rest optional

function patch(id: string, data: UpdatePayload<User>) {
  // data can have any subset of mutable user fields
}

Pikatarkistus

Mikä utiliteettityyppi poistaa määritetyt avaimet rajapinnasta?

Vastaa interaktiivisessa oppitunnissa

Kertaus: utiliteettityypit

Partial tekee kaikista kentistä valinnaisia. Required poistaa valinnaisuuden ilmaisevat määreet. Pick säilyttää valitut avaimet. Omit poistaa valitut avaimet. Readonly estää muokkaamisen. Record yhdistää unionin avaimet arvotyyppeihin. ReturnType ja Parameters poimivat funktioiden tyypit. Yhdistelkää utiliteetteja täsmällisten DTO-tyyppien luomiseksi.

Aloita maksutta

Opi HTML 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: 41
Oppitunnit: 163

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Apuohjelmatyypit: Partial, Required, Pick ja Omit” ilmainen?

Kyllä – oppitunnin ”Apuohjelmatyypit: Partial, Required, Pick ja Omit” 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 Frontend Academy-kurssin, päivitä CoddyKit PROhon. Frontend Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Apuohjelmatyypit: Partial, Required, Pick ja Omit”?

Muunna olemassa olevia tyyppejä sisäänrakennetuilla apuohjelmatyypeillä ja luo muunnelmia ilman päällekkäistä koodia Harjoittelet Frontend Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Frontend Academy-opiskelun?

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

Kuinka kauan ”Apuohjelmatyypit: Partial, Required, Pick ja Omit”-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ä Frontend Academy-oppitunnilla?

Kyllä. Jokainen Frontend 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

Generics: T, extends ja rajoitteet
Apuohjelmatyypit: Partial, Required, Pick ja Omit
Mapitetut ja ehdolliset tyypit
Tyyppien kaventaminen: typeof, instanceof ja diskriminoidut unionit

← Takaisin: Frontend Academy