Все для создания и продвижения сайтов

Верстка, программирование, SEO

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

743
Типизация компонентов 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[]
    }
};
Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.