web-dev-qa-db-ja.com

TypeScriptで状態を使用する

TypeScriptは初めてです。 this.state.somethingをrenderメソッド内に表示したり、関数内の変数に割り当てたりする際に問題が発生しました。

最も重要なコードをご覧ください。

interface State {
    playOrPause?: string;
}

class Player extends React.Component {
    constructor() {
        super();

        this.state = {
            playOrPause: 'Play'
        };
    }

    render() {
        return(
            <div>
                <button
                    ref={playPause => this.playPause = playPause}
                    title={this.state.playOrPause} // in this line I get an error
                    >
                    Play
                </button>
           </div>
        );
    }
}

エラーには、「[ts]プロパティ 'playOrPause'がタイプ 'ReadOnly <{}>'に存在しません。

PlayOrPauseプロパティを文字列の型として宣言しようとしましたが、機能しませんでした。動作させるためにここで何が欠けていますか？

javascriptreactjstypescript
13
Maciej S.

TypeScriptのGenericsが使用するStateインターフェースをコンポーネントが使用していることを宣言する必要があります。

interface IState {
    playOrPause?: string;
}

interface IProps {}
class Player extends React.Component<IProps, IState> {
// --------------------------------------------^
    constructor() {
        super();

        this.state = {
            playOrPause: 'Play'
        };
    }

    render() {
        return(
            <div>
                <button
                    ref={playPause => this.playPause = playPause}
                    title={this.state.playOrPause} // in this line I get an error
                    >
                    Play
                </button>
           </div>
        );
    }
}
23
felixmosh