Как определить компоненты класса React / функции в TypeScript (с проверкой типов)

Question

Как определить компоненты класса React / функции в TypeScript и иметь рабочую проверку типов? Я не нашел полной статьи о том, как это сделать правильно.

Я могу определить интерфейс Props и State, но я не знаю, как определить defaultProps, defaultState, et c ...

Может ли кто-нибудь помочь мне (и другим) с хорошим стилем? Спасибо!

Answer 1

Для гораздо более простой структуры вы могли бы go из этого:

import * as React from "react";

const App = ({ value = 'Hello World' }: { value: string }) => (
  <div>
     <h1>{value}</h1>
  </div>
 )

export default App

Где { value = 'Hello World' } - ваш реквизит по умолчанию, а { value: string } - проверка типов

может помочь вам с React + Машинопись: https://github.com/typescript-cheatsheets/react-typescript-cheatsheet

Answer 2

Это довольно просто. Вы все еще можете сделать это по-старому. Вы все еще можете объявить это вне вашей function, как в этом примере App.defaultProps:

import * as React from "react";
import "./styles.css";

export interface CatProps {
  catName: string;
  eyeColor: string;
  age: string;
}

export default function App(props: CatProps) {
  return (
    <div>
      {props.catName} Cat, Eye Color: {props.eyeColor}, Age: {props.age}
    </div>
  );
}

App.defaultProps = {
  catName: "Sandy",
  eyeColor: "deepblue",
  age: "120"
};

Рабочий образец: Попробуйте

Немного запутаться и измените значения defaultProps.

Состояние по умолчанию :

Используя приведенный выше пример, вы можете определить defaultState, просто выполнив:

const [catName, setCatName] = useState('Sandy'); // define a defaultState value inside useState hook