TypeScriptの勉強を始めたのですが、「TS2339: Property 'count' does not exist on type 'Readonly<{}>'.」というエラーが出てしまいま

Question

実現したいこと

参考サイトです
ソースコードです

サイトをほぼ真似して、以下のようなコードを書きました。

import * as React from 'react';

interface IState {
    count: number;
}

export class SubComponent extends React.Component<IState> {
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
        this.state = {
            count: 0,
        };
    }

    handleClick() {
        this.setState({
            count: this.state.count + 1,
        });
    }

    render() {
        return(
            <div>
                <p>{this.state.count}</p>
                <button onClick={this.handleClick}>Click!</button>
            </div>
        );
    }
}

すると、コンパイル時にエラーが発生します。問題なく動くのですが、エラーが出るのは気になります。

発生しているエラー

• TS2339: Property 'count' does not exist on type 'Readonly<{}>'.
• TS2741: Property 'count' is missing in type '{}' but required in type 'Readonly<IState>'.

Answer 1

React.Component の型引数は <Props, State> なので、IState の前に Props を指定する必要があります。Props が空の場合は {} と書きましょう。

export class SubComponent extends React.Component<{}, IState> {

---

型引数を調べた方法ですが、Visual Studio Code でマウスを React.Component に移動したら教えてくれました。正確には <P = {}, S = {}, SS = any> ですが、SS が何かは知りません。
props や this.state.count のところにもちゃんとエラーが出てますね。

Comments

[退会済みユーザー]

ありがとうございます。上記の方法でエラーが発生することなくコンパイルできました。
初歩的な質問で申し訳ないのですが、どうやってReact.Componentの型引数を調べたのですか?日本語のドキュメントを見た限りでは見つからなかったのですが…

[hoshi-takanori]

React（に限らず、JavaScript ライブラリ）の型は React 本体とは別に @types/react で管理されてたりするので、ドキュメントにもちゃんと書いてない場合が多いんでしょうね…。ってことで、index.d.ts を読むか、Visual Studio Code に教えてもらうのがいいと思います。

[退会済みユーザー]

ありがとうございます！