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

Problemas com Typescript

Olá, estou utilizando typescript para fazer este curso de React e estou com um pequeno problema, ao passar a função de criação de notas do App.tsx para meu componente NewNoteForm o Node está dizendo que a propriedade onNewNote (propriedade personalizada que estou tentando criar) não é assignable, e quando tento utilizar esta propriedade dentro do componente ele ainda diz que ela não existe. Gostaria de saber qual seria a forma correta de criar propriedades utilizando o Typescript no lugar do JS.

export default class App extends Component {

    newNote(title: string, text: string) {
        console.log(`${title} ${text}`);
    }

    render() {
        return (
            <section className="content">
                <NewNoteForm onNewNote={this.newNote} />
                <NotesList />
            </section>
        );
    }
}
// onNewNote <-- problema aqui: Type '{ onNewNote: (title: string, text: string) => void; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<NewNoteForm> & Readonly<{}> & Readonly<{ children?: ReactNode; }>'.
export default class NewNoteForm extends Component {

    [...]

    private createNote = (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        event.stopPropagation();
        this.props.newNote(this.title, this.text);
    }

    [...]

}
// this.props.newNote <-- problema aqui: Property 'newNote' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>'
4 respostas

Fala ai Marcus, tudo bem? A forma mais recomendavel seria algo assim:

const MeuComponent: React.FC<Props> = () => <h1>MeuComponent</h1>

Espero ter ajudado.

Opa, tudo certo e por aí? Certo entendi, essa parte eu coloco lá no meu App e passo como parâmetro então? Ou eu preciso criar meu componente todo desta forma?

solução!

Consegui resolver aqui! Realmente typescript é um pouco mais burocratico, vou colocar meu código aqui caso mais alguém precise!

import React, { Component } from 'react';
import NotesList from './components/NotesList';
import NewNoteForm from './components/NewNoteForm';
import "./assets/App.css";
import "./assets/index.css";

export default class App extends Component {

    private newNote = (title: string, text: string)  => {
        console.log(`${title} ${text}`);
    };

    render() {
        return (
            <section className="content">
                <NewNoteForm onNewNote={this.newNote} />
                <NotesList />
            </section>
        );
    }
}
import React, { Component, ChangeEvent, FormEvent } from 'react';
import './NewNoteForm.css';

export interface Props {
    onNewNote: (title: string, text: string) => void;
}

export default class NewNoteForm extends Component<Props> {

    private title: string;
    private text: string;

    constructor(props: Props) {
        super(props);
        this.title = '';
        this.text = '';
    }

    private handleTitleChange = (event: ChangeEvent<HTMLInputElement>) => {
        event.stopPropagation();
        this.title = event.target.value;
    }

    private handleTextChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
        event.stopPropagation();
        this.text = event.target.value;
    }

    private createNote = (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        event.stopPropagation();
        this.props.onNewNote(this.title, this.text);
    }

    render() {

        return (
            <form className="new-note-form" onSubmit={this.createNote}>
                <input type="text"
                    placeholder="Título"
                    className="new-note-form_input"
                    onChange={this.handleTitleChange} />

                <textarea rows={15}
                    placeholder="Escreva sua nota..."
                    className="new-note-form_input"
                    onChange={this.handleTextChange} />

                <button className="new-note-form_submit">Criar Nota</button>
            </form>
        );

    }

}

Fala Marcus, sim, realmente o TypeScript é bem mais burocrático e exige uma forte tipagem.

Um ponto importante sobre componentes de classes é que eles estão caindo em desuso por ser um padrão mais antigo e foram substituidos pelos famosos componentes funcionais e React Hook (temos curso na Alura sobre).

Espero ter ajudado.