РЕДАКТИРОВАТЬ по запросу @Lesiak:
Вот мой вызов getProducts
// @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}`)
}
}
Я также реорганизовал свой компонент следующим образом:
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
Исходный вопрос:
Утро, коллеги-разработчики,
Я наткнулся на проблему, которую не могу решить самостоятельно, даже проведя обширное исследование в Интернете. Поскольку я новичок в TS, я вижу, что на 100% не понимаю, что на самом деле происходит.
У меня есть компонент в React, где я asyn c выбираю контент из контента Shopify и хочу чтобы распечатать его внутри функции рендеринга.
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
Я получаю следующую ошибку:
(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)
Вот как это выглядит в браузере: 
Я могу читать, и я думаю, что понимаю ошибку, но не имею ни малейшего понятия, что с этим делать.
Если бы кто-нибудь мог объяснить мне это на простом английском sh, это было бы офигенно.
Основываясь на результатах веб-исследования, я попытался улучшить интерфейс продукта следующим образом:
interface Product {
title: string
description: string
[key: string]: string | number | undefined | Function
}
, но это похоже на слепоту ...