Типизация компонентов React с TypeScript
Разберем, как правильно типизировать компоненты в React на TypeScript. Тут нет ничего сложного, познав немного TypeScript и React и вы легко разберетесь. Но для упращения понимания, я приведу пример типизации на простом компоненте React, а также ещё приведу примеры типизации.
Пример типизации компонента React на TypeScript
Например у нас будет компонент, который будет принимать следующие пропсы:
title
- простая строка для вывода заголовкаcontent
- текст статьи, может принимать как простую строку, так и полноценный компонентisImortant
- флаг, важный ли материал (необязательный параметр)images
- галерея фото материала, массив простых строк (необязательный параметр)tags
- теги материала, это массив объектов, у каждого элемента ссылка и название (необязательный параметр)
type TTag = {
title: string;
link: string;
};
type TProps = {
title: string;
content: React.ReactNode;
isImortant?: boolean;
images?: string[];
tags?: TTags[];
};
const Article: React.FC<TProps> = ({
title, content, isImortant, images, tags
}) => (
<>
<h2>{ title }</h2>
<div>{ content }</div>
{ isImortant && (
<p>It is imortant!</p>
) }
{ images && images.map((item,index) => (
<img src={ item } key={index} />
)) }
{ tags && tags.map(item => (
<a href={ item.link } key={item.link}>
{ item.title }
</a>
)) }
</>
);
Примеры типизации
type TProps = {
title: string;
isFlag: boolean;
numbers: number[]; // массив чисел;
content: React.ReactNode; // React компонент
appraisal: 'good' | 'bad'; // Строка good или bad
// функция без параметров, которая может ничего не возвращать
functionExample: () => void;
// функция с параметрами и которая возвращает число
funcSum?: (
x: number,
y: string
) => number;
};
Объединение типов
Например у нас есть компонент для кнопок, у которого есть свои пропсы, но мы хотим на основе этого компонента создать новый, где будут все те же пропсы, но а также появются свои уникальные, а именно комопонент, кнопка со статусом или ошибками
type TButtonType = 'button' | 'reset' | 'submit';
type TButton = {
value: React.ReactNode;
type?: TButtonType;
className?: string;
}
// тут как раз мы связываем два типа
type TProps = TButton & {
isSuccess: boolean;
error?: string;
props: {
labels: string[],
values: string[] | number[]
}
};
Оставить комментарий