Dúvida sobre o Spread Operator | React: escrevendo com Typescript

2
respostas

Referente ao curso React: escrevendo com Typescript, no capítulo Selecionando um item e atividade Faça como eu fiz: Passando selecionaTarefa via Props

por Leonardo Ruon Leandro

| 92.3k xp | 6 posts

Eu entendo que esse sinal de ... está associado ao Spread Operator e é usado para extrair os valores de um array, por exemplo:

let pares = [2, 4, 6];
let impares = [1, 3, 5];

let todos = [...pares, ...impares];

Porém, na função Item abaixo eu não entendi como funciona o sinal de ...

Alguém poderia explicar como ele funciona para o código abaixo?

interface Props extends ITarefa {
  selecionaTarefa: (tarefaSelecionada: ITarefa) => void
}

export default function Item({ …, selecionaTarefa}: Props) {
  …
}

2 respostas

por Matheus Ricardo Uihara Zingarelli

| 205.1k xp | 288 posts

Desenvolvedor de Software

21/03/2023

Cara, eu acho que foi feito isso só pra economizar na digitação do texto, e não tem a ver com o código em si.

Esses ... na função Item no caso não seria o spread operator, mas sim só uma economia de espaço pra dizer que ali tem tudo aquilo que já tinha no código, e só adicionou um novo prop. Tanto é que depois no corpo da função tem novamente o ... que significaria que ali tem tudo que já tinha no corpo da função.

Pode ver que no vídeo o instrutor copia todas as propriedades da interface na hora de definir a função.

por Matheus Ricardo Uihara Zingarelli

| 205.1k xp | 288 posts

Desenvolvedor de Software

21/03/2023

Complementando minha resposta anterior, você até pode usar o spread na hora de definir a função Item, mas ele tem que vir no final. Essa abordagem tem uma outra definição, chamada de "rest parameter".

No caso, ficaria assim:

export default function Item({selecionaTarefa, ...item}: Props)

Nesse caso, você está desestruturando a interface Props, selecionando dela a propriedade selecionaTarefa e o resto das propriedades (tarefa, tempo, etc) está sendo guardada em item (você dá o nome que quiser). Aí, para utilizar, a função ficaria assim:

export default function Item({selecionaTarefa, ...item}: Props) {
    return (
        <li 
            className={styles.item} 
            onClick={() => selecionaTarefa(item)}>
            <h3>{item.tarefa}</h3>
            <span>{item.tempo}</span>
        </li>
    )
}