Quero transformar a seguinte classe em uma função:
class Basic extends Component<Props, State>
A minha dúvida é: como passo as propriedades props e state para a função?
props
Como props
são passadas como o primeiro parâmetro para componentes funcionais pelo React, basta colocar os devidos tipos para o primeiro parâmetro. Geralmente, cria-se uma interface
para isso:
import React from 'react';
interface Props {
name: string;
age: number;
}
export function UserCard(props: Props) {
return <>{/* ... */}</>;
}
Você também pode utilizar o tipo React.FC
, exportado pelo React:
import React from 'react';
interface Props {
name: string;
age: number;
}
export const UserCard: React.FC<Props> = (props) => {
return <>{/* ... */}</>;
};
No entanto, por preferência pessoal, prefiro não usar arrow functions para esse tipo de coisa. Conforme pode ser verificado nesta resposta, componentes com declarações de funções têm algumas vantagens se comparados a arrow functions.
state
Como o estado em componentes funcionais é alcançado através dos React Hooks, você não adiciona os tipos do estado diretamente na função do componente, mas nas próprias chamadas dos ganchos. Na maioria das vezes, isso é feito com genéricos.
Geralmente, os ganchos da API do React inferem automaticamente o tipo do estado através do primeiro argumento. Veja como passar um tipo explícito para um useState
, por exemplo:
import React, { useState } from 'react';
export function MyComponent() {
const [bool, setBool] = useState<boolean>(false);
setBool(true); // ok
setBool('foo'); // Argument of type '"foo"' is not assignable to parameter of type 'SetStateAction<boolean>'.
return <code>{bool.toString()}</code>
}
Veja o exemplo acima no TypeScript playground.
Atualmente, não consta na documentação do React a explicação de como usar esses genéricos. No entanto, você pode verificar as definições de tipo do React no GitHub.
typescript
?