Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Types em uma situação que houver back-end

Bom dia

Primeiramente, parabéns pelo curso e tema escolhido para o projeto. (gostaria muito de ver uma continuação em um curso futuro nessa formação desse mesmo projeto, porém adaptado para consumir dados de um back-end já pronto, por meio de axios ou fetch api, segurança, etc.)

A respeito do type Prato = typeof cardapio[0], Se fosse em uma situação que estivesse integrado a um back-end, qual seria a abordagem recomendada para definir o tipo Prato?, uma vez que cardapio atualmente está em uma pasta do próprio projeto (para simular os dados), se fosse para mapear a estrutura do que seria um Prato do back-end, o ideal seria criar uma interface Cardapio e passando todos os atributos definidos na entidade do back-end? (geralmente aplicado quando se utiliza Angular)

por exemplo:

interface Cardapio {
  title:  string;
  description: string;
  photo: string;
  size: number;
  serving: number;
  price: number;
  id: number;
  category: Category;
}

export type Prato = typeof Cardapio;
3 respostas

Salve Felipe!

Esse cursto está incrível, não está? Também gostei.

Vou te dar um spoiler: ta pra sair um curso exatamente sobre o que você pediu: consumir uma API backend numa aplicação React.

Mas enquanto ele não sai, vou adiantar pra ti. Vamos supor que essa lista de pratos venha de uma API. A interface Prato continuaria no mesmo lugar.

Na hora de obter esse dados da api, conseguimos dizer pro TypeScript qual é o tipo de dados que esperamos receber.

Por exemplo, usando o axios:

axios.get<Pratos[]>('http://algumendereco/api/pratos')

Dessa forma, saberemos que esse retorno da API será um array de Pratos.

Mas fica tranquilo que isso é só uma palinha, e que vem um curso novo inteirinho sobre isso, OK?

Bons estudos.

Muito obrigado Marcos,

Algo que notei também durante pesquisas, é que em React, alguns devs geralmente adotam o Type ao invés de Interface (já que este está mais relacionada à orientação a objetos) e o React "abraçou" uma abordagem mais funcional. Já para outros adotam uma abordagem híbrida.

Você recomenda alguma abordagem específica ou a utilização de ambos para uma determinada situação?

Atenciosamente.

solução!

Depende, Felipe!

Aqui não tem uma resposta certa.

Mas vale MUITO a pena entender a diferença entre os dois casos aqui