fix: no index signature with a parameter of type 'string' was found on type 'ExpandedTags'

[a0s]

This is something that i had to add to stop complaining from compiler on my code:

import type {ExpandedTags} from "exifreader";
import DataTable from "primevue/datatable";
import Column from "primevue/column";
import {ref} from "vue";

const props = defineProps<{ metadata: ExpandedTags }>()
const nodes = ref<any[]>([])
const expandedRowGroups = ref();
Object.keys(props.metadata).forEach((header, headerIndex) => {
  Object.keys(props.metadata?.[header]).forEach((tag, tagIndex) => {
    const node = {
      key: `${headerIndex}-${tagIndex}`,
      header: header,
      tag: tag,
      value: props.metadata?.[header]?.[tag]?.description || props.metadata?.[header]?.[tag] || ""
    }
    nodes.value.push(node)
  })
})

The error was:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'ExpandedTags'.
  No index signature with a parameter of type 'string' was found on type 'ExpandedTags'.

16       value: props.metadata?.[header]?.[tag]?.description || props.metadata?.[header]?.[tag] || ""

I'm not sure, but perhaps the same thing should be added to every interface containing string keys.

[mattiasw]

Hi! Thanks for bringing up issues like this. I'll have to look into it, but my first thought is that it's a bit too general, and should not be needed since all the valid keys are already specified. I'm not a TypeScript expert though so I might be wrong. :sweat_smile: As soon as I get the time I will do some investigations.

[mattiasw]

So, expanding the type to accept anything does not really feel like the correct way to solve this. You will lose some valuable type checks then.

I think it's better to adjust the code that uses it instead. Maybe something like this:

Object.keys(props.metadata).forEach((header, headerIndex) => {
  const tags = props.metadata[header as keyof ExpandedTags];
  if (tags) {
    ...
  }
})