类型“只读<{}>”上不存在属性“产品”

Question

EDIT on @Lesiak request:

Here is my getProducts call

// @api/shopifyProducts.ts

import Client from 'shopify-buy'

const client = Client.buildClient({
  // TODO: add to dotenv
  domain: 'some-domain.myshopify.com',
  storefrontAccessToken: 'example-token-2597293846729587293875'
})

export const getProducts = async () => {
  try {
    const data = await client.product.fetchAll()
    const products = await data.map((item) => {
      return {
        title: item.title,
        description: item.description
        // images: item.images
      }
    })

    return products
  } catch (error) {
    throw new Error(`Product API fetch failed: ${error}`)
  }
}

I have also refactored my component like this:

import React, { Component } from 'react'
import { getProducts } from '@api/shopifyProducts'

class TheListProducts extends Component<{}> {
  constructor(props) {
    super(props)

    this.state = {
      products: null
    }
  }
  async componentDidMount() {
    this.setState({
      products: await getProducts()
    })
    console.log(this.state.products) ==> Error: Property 'products' does not exist on type 'Readonly<{}>'
  }

  render() {
    return <p>Hey</p>
  }
}

export default TheListProducts

Initial question:

Morning fellow developers,

I stumbled upon an issue I can't solve on my own even by doing an extensive research on the web. Since I am new to TS, I can see I don't understand in 100% what is really happening.

I have a component in React, where I async fetch content from Shopify content and I want to print it inside render function.

import React, { Component } from 'react'
import { getProducts } from '@api/shopifyProducts'

interface Product {
  title: any
  description: any
}

interface ListState {
  products: {
    [key: string]: Product | Function
  }
}

class TheListProducts extends Component<{}, ListState> {
  async componentDidMount() {
    this.setState({
      products: await getProducts()
    })
  }

  render() {
    return <p>{this.state.products}</p>
  }
}

export default TheListProducts

I receive the following error:

(property) products: {
    title: string;
    description: string;
}[]
Type '{ title: string; description: string; }[]' is not assignable to type '{ [key: string]: Product; }'.
  Index signature is missing in type '{ title: string; description: string; }[]'.ts(2322)

Here is how it looks in the browser:

I can read, and I think I understand the error, but have no clue whatsoever what to do about it.

If anyone could explain it to me in plain english it would be awesome.

Based on the web research I tried enhancing the Product interface like this:

interface Product {
  title: string
  description: string
  [key: string]: string | number | undefined | Function
}

but it's like going in blind...

Answer 1

If you are using class component you should define the type of the state and props:

class App extends React.Component<MyProps, MyState> {

You can look here for more details