Корисні вбудовані типи #TypeScript з прикладами.

TypeScript містить набір із 17 + 4 допоміжних типів. Розберемо найкорисніші.

1. Record<Keys, Type>
Найкорисніший допоміжний тип з усіх - словник

const dictionary: Record<string, string> = {};
dictionary['hello'] = 'world';

Стане в нагоді для конструювання динамічних об'єктів, коли ви заздалегідь не знаєте структуру майбутнього об'єкту. Дозволяє уникнути any.

2. Omit<TObject, TKeys>
Допоможе прибрати небажані властивості з об'єкту, наприклад пропси, що вже не потрібні:

type TextProps = { color: 'red' | 'green'; children: ReactNode };
const Text = (props: TextProps) => <></>;
const RedText = ({ children }: Omit<TextProps, 'color'>) => (
  <Text color="red">{children}</Text>
);

Також стане в нагоді для кастомізації існуючого типу, який ви не бажаєте писати заново:

type AppRequestInit = Omit<RequestInit, 'body'> & { body: object };
const data: AppRequestInit = { body: {} };

Для того щоб "взяти" якість властивості з об'єкту, ви можете використовувати Pick<TObject, TKeys>

3. Parameters<Type>
Дозволяє отримати тип аргументів функції/компоненту, якщо пакет їх напряму не експортує.

const Text = (props: TextProps) => <></>;
type Props = Parameters<typeof Text>[0];
const props: Props = { color: 'red', children: 0 };

Parameters повертає масив типів аргументів функції, тому ми за допомогою індексатору беремо перший тип.

Компліментарним до Parameters є тип ReturnType<Type> який дозволяє отримати тип значення, що функція повертає.

4. Partial<T>
Ще один досить корисний тип, який можна використати під час написання тестів. Робить усі властивості першого рівня не обов'язковими, але зберігає intellisense.

type User = {name:string}; 
type MockedUser = Partial<User>;
const mockedUser: MockedUser = {};

Протилежним до нього є тип Required<T> який робить всі властивості обов'язковими.

Це далеко не весь перелік допоміжних типів, але це те, що може вам згодитися у більш-менш повсякденній роботі. Повний перелік тут.

Бережіть себе, допомагайте ЗСУ,
@reactbeginners