CODELINE

Python
JavaScript
PHP
Wordpress
React

Szybki TS – Record, mapped type

Szybka lekcja, poznajemy utility type Record oraz piszemy nasz pierwszy mapped type. Do dzieła.

Ok, przykład z dokumentacji:

type CatName = "miffy" | "boris" | "mordred";
 
interface CatInfo {
  age: number;
  breed: string;
}
 
const cats: Record<CatName, CatInfo> = {
  miffy: { age: 10, breed: "Persian" },
  boris: { age: 5, breed: "Maine Coon" },
  mordred: { age: 16, breed: "British Shorthair" },
};

Czyli ma być union type, który zawiera wszystkie klucze, jakie ma mieć Record, oraz typ, jaki będzie wartością tych kluczy. Widzieliśmy już record w poprzedniej lekcji:

type Streams = 'salary' | 'bonus' | 'sidehustle'

type Incomes = Record<Streams, number>

// type Incomes = {
//     salary: number;
//     bonus: number;
//     sidehustle: number;
// }

const monthlyIncomes: Incomes = {
    salary: 500,
    bonus: 100,
    sidehustle: 250
}

for (const revenue in monthlyIncomes) {
    console.log(monthlyIncomes[revenue as keyof Incomes])
}

Teraz pytanie, jak coś takiego napisać. Cóż, zacznijmy od zdefiniowania klucza i typu:

type MyRecord<K extends string|number|symbol, T> = {};

Klucz może być napisem, liczą lub symbolem, niczym innym. T to jakiś typ, jaki ma być przypisany do wartości tych kluczy.

Ok, to teraz musimy znaleźć jakąś składnię do przeiterowania po wszystkich kluczach, jakie zostaną podane i przypisania im typu T w obiekcie po prawej stronie:

type MyRecord<K extends string|number|symbol, T> = {
    [P in K]: T;
};

Zwyczajowo to się P nazywa, od property. K od key (klucz), T od type. Czyli mają być properties takie jak w K, ich wartość to T.

Zobaczmy, czy MyRecord zadziała tak, jak wbudowany utility type Record:

type Streams = 'salary' | 'bonus' | 'sidehustle'

type MyRecord<K extends string|number|symbol, T> = {
    [P in K]: T;
};
type Incomes = MyRecord<Streams, number>

// type Incomes = {
//     salary: number;
//     bonus: number;
//     sidehustle: number;
// }

const monthlyIncomes: Incomes = {
    salary: 500,
    bonus: 100,
    sidehustle: 250
}

for (const revenue in monthlyIncomes) {
    console.log(monthlyIncomes[revenue as keyof Incomes])
}

Działa tak samo. Więcej TSa niedługo!