СЕКРЕТНАЯ МОЩЬ индексированных типов доступа | Продвинутый TypeScript #frontend #typescript

Показать описание

С помощью TypeScript можно делать ДЕЙСТВИТЕЛЬНО интересные вещи.

Используя индексированные типы доступа мы можем получить тип основного цвета, просто передав значение primary. Также мы получим неосновные цвета, указав их через объединение (union). Мы также получим все цвета, используя keyof ColorVariants.

Можем проделать тоже самое с массивами и кортежами. Из массива букв, мы можем получить a или b. А тип Letter это объединение всех букв.

Можно делать это и с объектами с глубоким доступом, комбинируя их.

Тип Роль - это конфигурация роли пользователя, в которую мы передаем ключ конфигурации роли пользователя, которая обеспечивает доступ к user и superAdmin, а затем number, который возвращает все элементы каждого массива.

В итоге мы получаем простое объединение.

interface ColorVariants {
primary: "blue";
secondary: "red";
tertiary: "green";
}

type PrimaryColor = ColorVariants["primary"];

type NonPrimaryColor = ColorVariants["secondary" | "tertiary"];

type EveryColor = ColorVariants[keyof ColorVariants];

type Letters = ["a", "b", "c"];

type AorB = Letters[0 | 1];

type Letter = Letters[number];

interface UserRoleConfig {
user: ["view", "create", "update"];
superAdmin: ["view", "create", "update", "delete"];
}

type Role = UserRoleConfig[keyof UserRoleConfig][number];

#reactjs
#react
#javascript
#typescript
#usestate
#useeffect
#frontend