javascript - Fel uppstår när man använder state-värdet i React med TypeScript


I en av koderna i React-dokumentationen används värdet som definieras i this.state i render() som

{this.state.name}

Men när jag implementerar den där React-koden med TypeScript, ger den fel som:-

Property 'age' does not exist on type 'Readonly<{}>'.

Koden i typescript är:-

import * as React from "react";
class App2 extends React.Component{
    constructor(props:any)
    {
        super(props)
         this.state = {
            age : 0,
            name : "rohit"
        };
    }

    public render()
    {
        return(
                <h1>
                    {this.state.name}
                </h1>
        )
    }
}
export default App2;

Svar #1

När du använder Typescript måste du ange typer för de props du accepterar och klassens tillstånd, så du bör inte härleda från vanlig React.Component (som standard använder React.Component<{}, {}>) utan istället deklarera template-parameter för de prop-/tillståndstyper du vill ha.

Sånt här borde fungera för ditt fall:

interface MyProps {
    something?: string;
}
interface MyState {
    age: 0;
    name: string;
}
class App2 extends React.Component<MyProps, MyState> {

```