Definindo os Props corretamente

Olá, tudo bem?

Então, tem que ser feito desta forma pois o componente sempre recebe um objeto, então se fizemos isto daqui:

    <Componente prop1="123" prop2={true} />

Por debaixo dos panos o Componente está recebendo isto daqui:

{
  prop1: '123',
  prop2: true
}

então você sempre recebe um objeto, cabe a você recebê-lo como quiser, vou te dar 4 opções aqui:

1. Recebendo o objeto e utilizando ele diretamente

    function Component(props: ITarefa[]) {
        console.log(props.prop1); // pegando a prop1 que está dentro do objeto props
        ...
    }

2. Recebendo o objeto utilizando destruct

    function Component({ prop1, prop2 }: ITarefa[]) {
        console.log(prop1); //pegando a prop1 diretamente
        ...
    }

3. Recebendo o objeto, utilizando destruct dentro do componente e utilizando o destruct

        function Component(props: ITarefa[]) {
            const { prop1, prop2 } = props
            console.log(props.prop1, prop1); //aqui você consegue pegar tanto pelo objeto quanto pelo destruct, os 2 tem o mesmo resultado
            ...
        }

4. Recebendo o objeto, utilizando uma das props e utilizando spread no resto das props

            function Component({ prop1, ...outrasProps }) {
                console.log(prop1, outrasProps); //aqui você consegue pegar a prop 1 via destruct, e um objeto com o resto das props via spread (...), neste caso outrasProps é um objeto que tem prop2 dentro, mas caso tivesse outras props, todas elas estariam ali também.
                ...
            }

Caso você tenha alguma outra dúvida fique a vontade para continuar este tópico ou começar outro, beleza?

Bons estudos!

Obrigado pela explicação mas pq {tarefas: ITarefas[]} está dentro de colchetes tb?

 Lista({ tarefas }: { tarefas: ITarefa[]}

Por que a tipagem deve ser feita pensando no objeto props, não no destruct, ou seja, { tarefas } significa que você está recebendo um objeto que tem tarefas dentro, que seria a mesma coisa que receber uma variável props diretamente, então a tipagem deve ser feita visando esse objeto.

{ tarefas: ITarefa[]} significa que você está tipando um objeto (por isto as chaves), e que dentro do objeto existe uma variável tarefas que é do tipo ITarefa[], ou seja, um array de ITarefa

Certo só para saber se entendi, então a tipagem com os bigodes { tarefas: ITarefa[] } está sendo necessária pelo fato do objeto recebido ser um array de ITarefa, senão poderia ser feito de maneira igual as outras funções do projeto que existe o objeto entre {} e a interface Props passada sem os {}, considerando q os objetos q a lista recebe é de acordo com a interface passada?

As interfaces Props nos outros lugares também tipam objetos, mas eles são mais suaves de ler, talvez por isto você não percebeu, veja esta:

interface Props { // as chaves estão aqui!
    tarefas: ITarefa[]
}

Veja isto sendo usado:

    function Lista({ tarefas }: Props) {

Neste caso não foi necessário as chaves pois as chaves representando o objeto já estão lá em cima na interface! Esta tipagem é igual a esta aqui:

    function Lista({ tarefas }: { tarefas: ITarefa[]}) { // como não há nenhuma interface, temos que especificar que é um objeto, por isto as chaves

se você reparar bem, o código é até bem parecido: interface Props { tarefas: ITarefa[] } e { tarefas: ITarefa[]}, a única diferença é que na interface estamos dando um nome para este tipo!

Agora para te facilitar, veja esta linha novamente:

    function Lista({ tarefas }: { tarefas: ITarefa[]}) {

E tente ler a linha acima da seguinte forma:

• Leitura do que é: a função (ou o componente) Lista
• Leitura do que ele recebe: recebe um objeto que contém tarefas dentro
• Leitura sobre qual o tipo: este objeto tem tarefas dentro que é do tipo ITarefa[], ou seja, é um array de ITarefa

Consegui responder a sua dúvida?

Sim! Muito obrigado, acho q a confusão existiu pelo fato de que a ITarefa ter sido criado com o mesmo propósito que o Props (os dois são interfaces) mas nos lugares que o Props é passado não é necessário uso dos {} enquanto da ITarefa é, por isso que comentei sobre a necessidade da tipagem com uso do {} pelo fato da tipagem ser um array de ITarefa em vez de ser simplesmente ITarefa!