Угловые скобки, содержащие интерфейс в объявлении класса

Question

Я изучаю машинопись и следую этому уроку: https://blog.alexdevero.com/react-and-typescript-pt3/.

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

// Create interface for class component props
interface PropsInterface {
  heading: string;
}

// Create interface for class component state
interface StateInterface {
  firstName: string;
  lastName: string;
}

class MyApp extends React.Component<PropsInterface, StateInterface> {

// This state annotation is optional
  // it is for better type inference
  state: StateInterface = {
    firstName: 'Andrew',
    lastName: 'Coboll'
  }

  render() {
    return (
      <div>
        {this.props.heading} {this.state.firstName} {this.state.lastName}
      </div>
    )
  }
}

Что означают угловые скобки с интерфейсами?

С уважением

Answer 1

Я понял решение сразу после того, как опубликовал его, поэтому я делюсь им здесь:

Весь пост, который я прочитал, говорит, чтобы увидеть generi c на https://www.typescriptlang.org/docs/handbook/generics.html.

Я прочитал do c, но я не могу понять, так как теперь это не класс, который я создаю, c, а класс Component.

Так что я ожидал Класс компонентов объявляется концептуально следующим образом:

class Component<P, S>{
    props: P;
    state: S
}

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

Answer 2

Это означает, что тип вашего объекта props - PropsInterface, а тип объекта состояния - StateInterface. Для этого вам не нужно делать это.

 state: StateInterface = {
    firstName: 'Andrew',
    lastName: 'Coboll'
  }

Вы можете просто использовать вот так:

 state = {
    firstName: 'Andrew',
    lastName: 'Coboll'
  }

он уже знает тип вашего штата, когда вы добавляете типы в эти угловые скобки