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

O argumento do tipo '(tarefasAntigas: any) => any' não é atribuível ao parâmetro do tipo 'ITarefa[]'.

Fiz exatamente como na aula, porém ao ir escrever o this.props.setTarefas(tarefasAntigas => [...tarefasAntigas, {...this.state}]).

Os erros que se apresentam, são: O parâmetro 'tarefasAntigas' implicitamente tem um tipo 'any'.ts(7006) O argumento do tipo '(tarefasAntigas: any) => any[]' não é atribuível ao parâmetro do tipo 'ITarefa[]'. O tipo '(tarefasAntigas: any) => any[]' não tem as propriedades a seguir do tipo 'ITarefa[]': pop, push, concat, join e mais 28.ts(2345)

Segue meu código para caso precise:

import React from "react";
import { ITarefa } from "../../types/tarefa";
import Botao from "../button";
import style from './form.module.scss';

class Form extends React.Component<{
    setTarefas: React.Dispatch<ITarefa[]>  
}> {
    state = {
        tarefa: "",
        tempo: "00:00"
    }

    addTarefa(evento: React.FormEvent<HTMLFormElement>) {
        evento.preventDefault(); //para não dar refresh na página
        this.props.setTarefas(tarefasAntigas => [...tarefasAntigas, {...this.state}])
    }

    render() {
        return (
            <form className={style.novaTarefa} onSubmit={this.addTarefa.bind(this)}>
                <div className={style.inputContainer}>
                    <label htmlFor="tarefa">
                        Adicione um novo estudo
                    </label>
                    <input 
                    type="text"
                    name="tarefa" 
                    id="tarefa" 
                    placeholder="O que você vai estudar?"
                    value={this.state.tarefa}
                    onChange={evento => this.setState({...this.state, tarefa: evento.target.value})}
                    required />
                </div>
                <div className={style.inputContainer}>
                    <label htmlFor="tempo">
                        Tempo
                    </label>
                    <input 
                    type="time" 
                    name="tempo" 
                    id="tempo" 
                    step="1" 
                    value= {this.state.tempo}
                    onChange={evento => this.setState({...this.state, tempo: evento.target.value})}
                    min="00:00:00" 
                    max="01:30:00" 
                    required />
                </div>
                <Botao type="submit">
                    Adicionar  
                </Botao>
            </form>
        )
    }
}

export default Form;

Também deixarei o link do meu repositório: https://github.com/MasterKelwin/alura-studies

4 respostas

Olá Kelwin boa tarde,

Sobre o erro que você está tomando sobre tipagem é bem possível que o seu state não foi tipado como o tipo ITarefa[].

Acredito que ao fazer essa tipagem o problema seja resolvido.

Olá Genilson, boa tarde!

Desde já agradeço demais por sua atenção.

Então, sobre o erro, eu fico confuso sobre como e onde tipar o state, visto que ainda não entendi completamente o que ele faz, pois meu primeiro contato com React foi ontem.

Você poderia me explicar melhor? Eu fico extremamente grato se puder me ajudar.

Obs: cheguei a tipar o state dentro do código que disponibilizei, ficou dessa forma, mas imagino que esteja errado embora não tenha dado nenhum erro no código:

    state: ITarefa = {
        tarefa: "",
        tempo: "00:00"
    }
solução!

Como você está escrevendo seu componente usando classe essa seria a maneira de fazer a tipagem tanto é que como você mesmo comentou não teve erro, porém usar os hooks é a forma mais recente de se trabalhar com React e aconselho fortemente você estudar sobre o tema.

Vou deixar o link da documentação do React para você olhar com calma como usar os hooks (https://pt-br.reactjs.org/docs/hooks-state.html)

Vou deixar aqui a baixo como ficaria seu state usando os hooks juntamente com TypeScript

import React, { useState } from 'react';

 const [tarefa, setTarefa] = useState<ITarefa[]>([]);

Vale também como uma boa base a leitura do início da documentação sobre os hooks (https://pt-br.reactjs.org/docs/hooks-intro.html).

Também a documentação do TypeScript (https://www.typescriptlang.org/docs/handbook/basic-types.html) com alguns exemplos sobre tipagem.

Essas leituras certamente vão te ajudar muito nesse primeiro contato com React e TypeScript.

Espero que essas dicas possam te ajudar.

Olá Genilson, tudo bem contigo?

Queria agradecer imensamente por toda a atenção e dedicação que tu teve em meu caso, já resolvi o bug e após as leituras, consolidei conhecimentos dos quais eram meio turvos ainda pra mim.

Desejo todo sucesso possível em sua jornada, forte abraço!