如何典型化嵌套的 object？

Question

How to typify a nested object?

enter image description here

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ UA: {}; RU: {}; }'. No index signature with a parameter of type 'string' was found on type '{ UA: {};RU: {}; }'. TS7053

interface IState {
  showInfo: any,
  priceVariantIndex: any,
  loaded: any,
  imgLoaded: any,
  imgUrl: any,
  selectedCutlery: any,
  product: any,
}

  state = {
    showInfo: false,
    priceVariantIndex: 0,
    loaded: false,
    imgLoaded: false,
    imgUrl: '',
    selectedCutlery: '',
    product: {
      productTranslations: {
        UA: {},
        RU: {}
      }
    }
  }

      <Link to={linkObject}>
        {this.props.language &&
        this.state.product.productTranslations[`${this.props.language}`]
          .name != undefined
          ? this.state.product.productTranslations[
              `${this.props.language}` // err
            ].name
          : product.name}
      </Link>

Answer 1

The conflict here is between the type of language in props , which is a string and the type of productTranslations which is type { UA: {}, RU: {} } .

If you don't want to explicitly type of language to the specific letter-codes that you are using to represent languages, you can update your product type in the IState interface to

product: { productTranslations: { [language: string]: any } };

Which now says that this.state.product has a productTranslations property which is a mapping of string to any .

As an aside, I'd highly recommend eliminating all of those any types, or at least change them to unknown so that you don't run into issues that TypeScript could definitely have caught for you.