В React с TypeScript мы можем использовать два основных подхода к созданию компонентов: функциональные компоненты и компоненты классов. Оба подхода позволяют работать с реквизитами и состоянием, но используют несколько разные парадигмы. TypeScript еще больше повышает безопасность разработки, предоставляя статическую типизацию, которая позволяет нам точно определять форму свойств и состояния.

Ниже мы рассмотрим примеры различных компонентов, использующих интерфейсы для определения типов, чтобы обеспечить согласованность и читаемость кода.

Ф-1. Функциональный компонент без реквизита и состояния

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

import React from 'react';

const FunctionalComponent: React.FC = () => {
  return 
Hello, DEV.to!
;
};

Этот компонент отображает только статический текст.

Ф-2. Функциональная составляющая с реквизитом

Когда мы хотим передать данные через реквизиты, мы используем интерфейсы для определения формы этих данных:

import React from 'react';

interface IMyProps {
  name: string;
}

const FunctionalComponentWithProps: React.FC = ({ name }) => {
  return 
Hello, {name}!
;
};

Здесь IMyProps содержит имя, используемое для отображения персонализированного приветствия.

Ф-3. Функциональная составляющая с состоянием

При использовании состояния в функциональных компонентах мы используем хук useState React:

import React, { useState } from 'react';

const FunctionalComponentWithState: React.FC = () => {
  const [count, setCount] = useState(0);

  return (
    

      
Count: {count}
       setCount(count   1)}>Increase
    
  );
};

Этот компонент использует локальное состояние для отслеживания счетчиков.

Ф-4. Функциональный компонент с реквизитами и состоянием

Объединив реквизиты и состояние, мы можем получить гибкие компоненты, которые получают данные через реквизиты и внутренне манипулируют состоянием:

import React, { useState } from 'react';

interface IMyProps {
  initialCount: number;
}

const FunctionalComponentWithPropsAndState: React.FC = ({ initialCount }) => {
  const [count, setCount] = useState(initialCount);

  return (
    

      
Count: {count}
       setCount(count   1)}>Increase
    
  );
};

Этот компонент использует InitialCount в качестве свойства и внутреннее состояние для динамического отслеживания счетчиков.

К-1. Компонент класса без реквизита и состояния

Компонент класса без реквизита и состояния в React выглядит так:

import React from 'react';

class ClassComponent extends React.Component {
  render() {
    return 
Hello, DEV.to!
;
  }
}

Это простой компонент класса, отображающий статический текст.

К-2. Компонент класса с реквизитом

Когда компонент класса получает реквизиты, мы определяем их с помощью интерфейса:

import React from 'react';

interface IMyProps {
  name: string;
}

class ClassComponentWithProps extends React.Component {
  render() {
    return 
Hello, {this.props.name}!
;
  }
}

Как и в функциональном компоненте, здесь мы используем реквизит для отображения персонализированных данных.

К-3. Компонент класса с состоянием

Для компонентов класса с состоянием мы определяем состояние внутри конструктора:

• Пустые круглые скобки в конструкторе

Если вы не используете реквизиты, вы можете просто оставить круглые скобки пустыми в конструкторе:

import React from 'react';

interface IMyState {
  count: number;
}

class ClassComponentWithState extends React.Component {
  constructor() {
    super({});
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      

        
Count: {this.state.count}
         this.setState({ count: this.state.count   1 })}>Increase
      
    );
  }
}

• Явно укажите {} в качестве типа реквизита

Если вы хотите явно указать реквизиты, вы можете указать {} в качестве типа:

import React from 'react';

interface IMyState {
  count: number;
}

class ClassComponentWithState extends React.Component {
  constructor(props: {}) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      

        
Count: {this.state.count}
         this.setState({ count: this.state.count   1 })}>Increase
      
    );
  }
}

-> В обоих случаях TypeScript и React будут работать корректно. Если ваш компонент не использует реквизиты, вы можете просто использовать пустые круглые скобки в конструкторе, но обязательно передайте {} в супервызове, чтобы избежать ошибок инициализации.

Этот компонент использует состояние для отслеживания изменений счетчика.

К-4. Компонент класса с реквизитами и состоянием

Для компонентов класса, которые используют как свойства, так и состояние, мы можем объединить обе концепции:

import React from 'react';

interface IMyProps {
  initialCount: number;
}

interface IMyState {
  count: number;
}

class ClassComponentWithPropsAndState extends React.Component {
  constructor(props: IMyProps) {
    super(props);
    this.state = {
      count: props.initialCount
    };
  }

  render() {
    return (
      

        
Count: {this.state.count}
         this.setState({ count: this.state.count   1 })}>Increase
      
    );
  }
}

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

Использование интерфейсов в TypeScript улучшает типизацию и упрощает чтение кода, особенно при работе с более сложными структурами данных. Благодаря этим базовым примерам вы получите основу для написания функциональных компонентов и компонентов классов с помощью React и TypeScript.