TypeScript типы

Библиотека Ant Design изначально проектировалась с поддержкой TypeScript, поэтому большинство компонентов имеет строгие и детально описанные типы. Это позволяет:

получать автодополнение в редакторе
избегать ошибок на этапе компиляции
документировать API компонентов через типы
безопасно работать со сложными компонентами

Типы охватывают:

свойства компонентов (Props)
события
структуры данных
generic-типы
интерфейсы для конфигураций

Каждый компонент Ant Design экспортирует собственные типы, которые можно использовать напрямую в приложении.

Типизация свойств компонентов (Props)

Каждый компонент Ant Design имеет интерфейс свойств, описывающий допустимые параметры.

Пример использования компонента Button:

import { Button } from 'antd';

function App() {
  return (
    <Button type="primary" disabled>
      Click
    </Button>
  );
}

Внутренне используется интерфейс:

interface ButtonProps {
  type?: 'primary' | 'default' | 'dashed' | 'link' | 'text';
  danger?: boolean;
  ghost?: boolean;
  disabled?: boolean;
  loading?: boolean;
  size?: 'small' | 'middle' | 'large';
  onClick?: React.MouseEventHandler<HTMLElement>;
}

TypeScript обеспечивает:

проверку допустимых значений
автодополнение
предупреждения при неверных параметрах

Пример ошибки:

<Button type="blue" />

Компилятор сообщит:

Type '"blue"' is not assignable to type 'ButtonType'

Импорт типов компонентов

Типы можно импортировать отдельно от компонентов.

import type { ButtonProps } from 'antd';

Это полезно при:

создании обёрток
написании собственных компонентов
типизации конфигураций

Пример:

const defaultButtonProps: ButtonProps = {
  type: 'primary',
  size: 'large'
};

Использование типов в собственных компонентах

Часто создаются обёртки вокруг компонентов Ant Design.

import { Button } from 'antd';
import type { ButtonProps } from 'antd';

interface SubmitButtonProps extends ButtonProps {
  isSubmitting: boolean;
}

export const SubmitButton = ({ isSubmitting, ...props }: SubmitButtonProps) => {
  return (
    <Button loading={isSubmitting} type="primary" {...props} />
  );
};

В результате:

сохраняются все свойства Button
добавляются новые

Типизация событий

Компоненты Ant Design используют стандартные типы React.

Пример обработчика клика:

import { Button } from 'antd';

const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
  console.log(event.currentTarget);
};

<Button onCl ick={handleClick}>Click</Button>;

Тип события:

React.MouseEvent<HTMLButtonElement>

Это даёт доступ к:

target
currentTarget
preventDefault()
stopPropagation()

Generic-типы компонентов

Некоторые компоненты Ant Design используют generics для типизации данных.

Наиболее известный пример — Table.

import { Table } from 'antd';

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

const columns = [
  {
    title: 'Name',
    dataIndex: 'name'
  },
  {
    title: 'Age',
    dataIndex: 'age'
  }
];

<Table<User> columns={columns} dataSource={data} />;

Generic <User> сообщает таблице тип данных строки.

Это влияет на:

типизацию render
типизацию filters
типизацию sorter

Типизация колонок таблицы

Для колонок существует тип ColumnsType.

import type { ColumnsType } from 'antd/es/table';

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

const columns: ColumnsType<User> = [
  {
    title: 'Name',
    dataIndex: 'name'
  },
  {
    title: 'Age',
    dataIndex: 'age'
  }
];

Теперь TypeScript проверяет:

существование поля
тип значения

Ошибка:

dataIndex: 'salary'

если поле отсутствует в интерфейсе.

Типизация функции render

Колонка таблицы может содержать функцию render.

const columns: ColumnsType<User> = [
  {
    title: 'Age',
    dataIndex: 'age',
    render: (age: number) => <b>{age}</b>
  }
];

Типы параметров:

render(value, record, index)

Где:

value: значение поля
record: вся строка таблицы
index: индекс строки

Пример:

render: (age: number, user: User) => (
  <span>{user.name}: {age}</span>
)

Типизация Form

Компонент Form активно использует generics.

import { Form, Input } from 'antd';

interface LoginForm {
  email: string;
  password: string;
}

const [form] = Form.useForm<LoginForm>();

Теперь поля формы строго типизированы.

form.setFieldsValue({
  email: 'test@mail.com'
});

Ошибка:

form.setFieldsValue({
  username: 'test'
});

Типизация Form.Item

Поле формы связано с ключом интерфейса.

<Form<LoginForm>>
  <Form.Item name="email">
    <Input />
  </Form.Item>
</Form>

TypeScript проверяет существование поля email.

Если указать:

name="username"

будет ошибка.

Типизация Select

Компонент Sel ect поддерживает строгие типы значений.

import { Sel ect } fr om 'antd';

type Role = 'admin' | 'user' | 'moderator';

const options = [
  { value: 'admin', label: 'Admin' },
  { value: 'user', label: 'User' }
];

<Select<Role>
  options={options}
  onCha nge={(value) => console.log(value)}
/>

Тип value автоматически становится Role.

Типизация Upload

Компонент загрузки файлов использует тип UploadFile.

import type { UploadFile } fr om 'antd/es/upload/interface';

const fileList: UploadFile[] = [];

Структура файла:

interface UploadFile {
  uid: string;
  name: string;
  status?: 'error' | 'success' | 'done' | 'uploading' | 'removed';
  url?: string;
  percent?: number;
}

Типизация модальных окон

Модальное окно использует интерфейс ModalProps.

import type { ModalProps } from 'antd';

const modalConfig: ModalProps = {
  title: 'Delete',
  okText: 'Confirm',
  cancelText: 'Cancel'
};

Использование:

<Modal {...modalConfig} />

Типизация сообщений

Компонент message имеет строгие типы для конфигурации.

import { message } from 'antd';

message.success({
  content: 'Saved',
  duration: 2
});

Тип:

interface ArgsProps {
  content: ReactNode;
  duration?: number;
  icon?: ReactNode;
}

Меню использует тип MenuProps.

import type { MenuProps } from 'antd';

const items: MenuProps['items'] = [
  {
    key: 'home',
    label: 'Home'
  },
  {
    key: 'about',
    label: 'About'
  }
];

Это удобный способ извлечь вложенные типы.

Utility-типы Ant Design

Ant Design использует и экспортирует некоторые вспомогательные типы.

Пример извлечения типа из свойства:

type MenuItems = MenuProps['items'];

Это позволяет:

переиспользовать типы
избегать дублирования интерфейсов

Partial и Required в конфигурациях

TypeScript utility-типы часто используются при работе с конфигурациями компонентов.

Пример:

type PartialButtonProps = Partial<ButtonProps>;

Теперь все поля становятся необязательными.

const config: PartialButtonProps = {
  type: 'primary'
};

Расширение типов компонентов

Типы можно расширять через наследование.

import type { InputProps } from 'antd';

interface CustomInputProps extends InputProps {
  label: string;
}

Компонент:

const CustomInput = ({ label, ...props }: CustomInputProps) => (
  <>
    <label>{label}</label>
    <Input {...props} />
  </>
);

Извлечение типов через typeof

Иногда необходимо извлечь тип компонента.

import { Button } from 'antd';

type ButtonComponent = typeof Button;

Также можно получить тип props:

type Props = React.ComponentProps<typeof Button>;

Это полезно при создании обёрток.

Типизация ref

Некоторые компоненты поддерживают ref.

import { Input } from 'antd';
import { useRef } from 'react';

const inputRef = useRef<InputRef>(null);

Тип:

import type { InputRef } from 'antd';

Использование:

inputRef.current?.focus();

Типизация DataSource

Для таблиц тип данных источника:

interface Product {
  id: number;
  title: string;
  price: number;
}

const data: Product[] = [
  { id: 1, title: 'Phone', price: 500 }
];

Использование:

<Table<Product>
  rowKey="id"
  columns={columns}
  dataSource={data}
/>

TypeScript проверяет соответствие колонок и данных.

Глубокая типизация Ant Design

Особенность Ant Design — глубокая вложенная типизация:

события
конфигурации
generics
утилитарные типы
React-совместимость

Это позволяет безопасно строить сложные интерфейсы:

админ-панели
таблицы с фильтрами
динамические формы
системы управления данными

TypeScript становится полноценным инструментом документации API компонентов и значительно снижает вероятность ошибок в крупных React-приложениях.

TypeScript типы

Типизация свойств компонентов (Props)

Импорт типов компонентов

Использование типов в собственных компонентах

Типизация событий

Generic-типы компонентов

Типизация колонок таблицы

Типизация функции render

Типизация Form

Типизация Form.Item

Типизация Select

Типизация Upload

Типизация модальных окон

Типизация сообщений

Типизация конфигурации Menu

Utility-типы Ant Design

Partial и Required в конфигурациях

Расширение типов компонентов

Извлечение типов через typeof

Типизация ref

Типизация DataSource

Глубокая типизация Ant Design