Kuvatut tyypit

Mapped-tyyppien avulla voitte muuntaa olemassa olevia tyyppejä uusiksi tyypeiksi soveltamalla toimintoja tyypin jokaiseen ominaisuuteen.

Ne ovat tehokas tapa luoda joustavia ja uudelleenkäytettäviä tyyppirakenteita TypeScriptissä.

Mapped-tyypeissä käytetään esimerkiksi syntaksia { [P in keyof T]: T[P] } tyypin T ominaisuuksien läpikäymiseen.

Tässä on yksinkertainen esimerkki siitä, miten mapped-tyypin avulla luodaan tyypistä vain luku -muotoinen versio:

type User = {
  name: string;
  age: number;
};

type ReadonlyUser = {
  readonly [P in keyof User]: User[P];
};

TypeScript tarjoaa useita sisäänrakennettuja mapped-tyyppejä, kuten:

• Readonly<T>: Tekee kaikista tyypin T ominaisuuksista vain luettavia.
• Partial<T>: Tekee kaikista tyypin T ominaisuuksista valinnaisia.
• Required<T>: Tekee kaikista tyypin T ominaisuuksista pakollisia.

type User = {
  name: string;
  age: number;
};

// Example of Partial
const user: Partial<User> = {
  name: 'John',
};

Mapped-tyyppejä voidaan käyttää myös unionityyppien kanssa uusien yhdistettyjen tyyppien luomiseen:

type Status = 'active' | 'inactive';

type StatusFlags = {
  [K in Status]: boolean;
};

const flags: StatusFlags = {
  active: true,
  inactive: false,
};

Voitte käyttää ehdollisia tyyppejä yhdessä mapped-tyyppien kanssa monimutkaisempien tyyppimuunnosten luomiseen.

type User = {
  name: string;
  age?: number;
};

type NonOptional<T> = {
  [K in keyof T]-?: T[K];
};

type RequiredUser = NonOptional<User>;

Seuraavassa näette, miten voitte luoda mapped-tyypin tiettyjen ominaisuuksien poissulkemista varten:

type User = {
  id: number;
  name: string;
  password: string;
};

type PublicUser = {
  [K in keyof User as Exclude<K, 'password'>]: User[K];
};

Luokaa mapped-tyyppi, joka lisää readonly-määritteen Product-tyypin kaikkiin ominaisuuksiin. Testatkaa sitä määrittämällä uuden tyypin muuttuja.

Onnittelut!

Olette oppineet käyttämään mapped-tyyppejä olemassa olevien tyyppien muuntamiseen dynaamisesti uusiksi tyypeiksi. Harjoitelkaa näitä tekniikoita, jotta TypeScript-koodinne olisi entistä tehokkaampaa!