Работа с TypeScript

Для интеграции Chakra UI с проектом на TypeScript требуется установка основных пакетов:

npm install @chakra-ui/react @chakra-ui/theme-tools @emotion/react @emotion/styled framer-motion
npm install @types/react @types/react-dom --save-dev

После установки создаётся файл theme.ts для кастомизации темы. Типизация в TypeScript позволяет использовать интерфейсы и типы, обеспечивая автодополнение и проверку ошибок:

import { extendTheme, ThemeConfig } from "@chakra-ui/react";

const config: ThemeConfig = {
  initialColorMode: "light",
  useSystemColorMode: false,
};

const theme = extendTheme({ config });

export default theme;

В index.tsx или main.tsx необходимо обернуть приложение в ChakraProvider:

import { ChakraProvider } from "@chakra-ui/react";
import theme from "./theme";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(
  <ChakraProvider theme={theme}>
    <App />
  </ChakraProvider>,
  document.getElementById("root")
);

Типизация компонентов

Chakra UI поставляется с встроенной поддержкой TypeScript. Все компоненты имеют строгие типы пропсов, что исключает ошибки передачи некорректных значений. Например, кнопка:

import { Button } from "@chakra-ui/react";

<Button colorScheme="teal" size="md" onCl ick={() => console.log("Clicked")}>
  Нажми меня
</Button>

colorScheme и size строго типизированы, и TypeScript выдаст ошибку, если указать недопустимое значение.

Для создания собственных компонентов с Chakra UI используют forwardRef и ComponentProps:

import { Button, ButtonProps } from "@chakra-ui/react";
import { forwardRef } from "react";

interface MyButtonProps extends ButtonProps {
  isSpecial?: boolean;
}

const MyButton = forwardRef<HTMLButtonElement, MyButtonProps>(
  ({ isSpecial, ...props }, ref) => (
    <Button
      ref={ref}
      bg={isSpecial ? "purple.500" : "gray.500"}
      {...props}
    />
  )
);

Кастомизация темы с типами

Создание расширенной темы с типами позволяет гарантировать корректное использование цветов, шрифтов и размеров:

import { extendTheme, ThemeConfig, Theme } from "@chakra-ui/react";

interface CustomTheme extends Theme {
  colors: {
    brand: {
      100: string;
      500: string;
    };
  };
}

const customTheme = extendTheme({
  colors: {
    brand: {
      100: "#f7caca",
      500: "#d53f8c",
    },
  },
}) as CustomTheme;

TypeScript гарантирует, что использование brand.500 в компоненте будет корректным:

<Button colorScheme="brand">Специальная кнопка</Button>

Создание собственных хуков с Chakra UI

TypeScript позволяет безопасно создавать хуки, использующие контекст Chakra UI, например, useDisclosure:

import { useDisclosure, UseDisclosureReturn } from "@chakra-ui/react";

const useModal = (): UseDisclosureReturn => {
  const disclosure = useDisclosure();
  return disclosure;
};

Использование строгих типов предотвращает ошибки при работе с методами onOpen, onClose и isOpen.

Работа с стилями и sx пропсами

Chakra UI позволяет задавать стили через пропсы и объект sx, который полностью типизирован:

<Box
  sx={{
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
  }}
>
  Контент
</Box>

TypeScript контролирует корректность всех CSS-свойств, предотвращая опечатки и неверные значения.

Адаптивные пропсы и типизация

Chakra UI поддерживает responsive-пропсы, типизированные через ResponsiveValue:

import { Box } from "@chakra-ui/react";

<Box width={{ base: "100%", md: "50%" }} p={[2, 4, 6]}>
  Адаптивный контейнер
</Box>

TypeScript проверяет, что width и p принимают только допустимые значения.

Создание собственных компонентов с styled и TypeScript

Использование @emotion/styled с Chakra UI позволяет создавать компоненты с типами пропсов:

import { Box, BoxProps } from "@chakra-ui/react";
import styled from "@emotion/styled";

interface CardProps extends BoxProps {
  highlight?: boolean;
}

const Card = styled(Box)<CardProps>`
  background-color: ${(props) =>
    props.highlight ? props.theme.colors.teal[100] : props.theme.colors.gray[100]};
  padding: 16px;
  border-radius: 8px;
`;

TypeScript обеспечивает корректное использование всех пропсов при рендеринге:

<Card highlight>
  Важная информация
</Card>

Итоговые принципы работы с TypeScript в Chakra UI

  • Все компоненты Chakra UI имеют строгую типизацию пропсов.
  • Использование кастомной темы требует определения интерфейсов для новых цветов и шрифтов.
  • Responsive и стилизованные пропсы типизированы и проверяются TypeScript.
  • Создание собственных компонентов и хуков безопасно благодаря расширению ComponentProps и forwardRef.
  • Ошибки в CSS, цветах и пропсах обнаруживаются на этапе компиляции, повышая надежность приложений.

TypeScript совместно с Chakra UI создаёт безопасную и предсказуемую среду разработки для React-приложений, позволяя разрабатывать сложные интерфейсы с гарантией корректности пропсов и стилей.

Оглавление