【Typescript】「型 'Readonly<{}>' に存在しない」とエラーになる

Question

はじめに

２ヶ月前にReactに入門した者です。
React、Typescript共に初心者ですが、双方を一緒に学びたいと思い、コードを書いています。
本件はTypescriptに関する質問です。

技術環境

• React
• Typescript
• Ruby on Rails

参考URL

ReactJS + Ruby on Rails API + Heroku App

エラー内容

「プロパティ 'lists' は型 'Readonly<{}>' に存在しません。」

以下の「lists」にてエラーが発生するのですが、エラー内容的に型定義を行っていないことが原因だと考えています。
しかし、型をどこにどう定義すればいいのかわかりませんでした。

{this.state.lists.map(list => {
          return (<List list={list} key={list.id} />)
        })}

こちらのコードの全容は以下の通りです。

ListsContainer.tsx

import React, { Component } from 'react';
import axios from 'axios';
import List from './List';

class ListsContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      lists: []
    };
  }
  componentDidMount() {
    axios
      .get('http://localhost:3001/api/v1/lists.json')
      .then((response) => {
        console.log(response);
        this.setState({
          lists: response.data,
        });
      })
      .catch((error) => console.log(error));
  }
  render() {
    return (
      <div className='Lists-container'>
        // ココの「lists」がエラーになります↓↓
        {this.state.lists.map(list => {
          return (<List list={list} key={list.id} />)
        })}
      </div>
    );
  }
}

export default ListsContainer;

初学者で知識が浅いので、ご教授いただけると嬉しいです。

クラスコンポーネントの型定義

class ListsContainer extends Component<{}, { lists: ListData[] }> {
  constructor(props) {
    super(props);
    this.state = {
      lists: [],
    };
  }
  componentDidMount() {
    axios
      .get('http://localhost:3001/api/v1/lists.json')
      .then((response) => {
        console.log(response);
        this.setState({
          lists: response.data,
        });
      })
      .catch((error) => console.log(error));
  }
  render() {
    return (
      <div className='Lists-container'>
        {this.state.lists.map((list) => {
          return <List list={list} key={list.id} />;
        })}
      </div>
    );
  }
}

Answer 1

クラスコンポーネントの props や state の型を定義するには Component<Props,State> を使います。
例えば、props が空で、state.links が LinkData の配列なら、以下のように書くと良いでしょう。
参考: クラスコンポーネント(Class Components) - React - TypeScript Deep Dive 日本語版

class ListsContainer extends Component<{}, { links: LinkData[] }> {

Comments

[mune92283498]

返信が遅くなりまして申し訳ありません。
ご回答ありがとうございます！
クラスコンポーネント特有の型定義があるんですね????
教えていただいた内容で書き直してみたんですが、「ListDataが見つかりません」と怒られてしまいました。ListDataの定義はどこに記述すればよいでしょうか？

[hoshi-takanori]

お好きなところに書けばいいと思いますが、List.tsx と ListsContainer.tsx の両方から見える必要がありますね。