Typescript Error: Expression of type 'string' can't be used to index type

Question

I am new to Typescript and having an issue with types: I get the following error:

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

I have data being returned from an endpoint that looks as such:

export type CategoryPosts = {
 count: number;
 posts: Posts[]
}

export type PopularPosts = {
 posts: {
  food: CategoryPosts;
  vacations: CategoryPosts;
  travel: CategoryPosts;
  music: CategoryPosts;
 }
}

In a component, I have a function that is trying to access this data where a user can click on an article and I pass the postType which is a string to another function which will filter. I think because one is a string, but in my types they are keys it is throwing an error.

let selectedCategory = posts[postsType].posts <- TS error

selectedCategory.filter(posts => ....)

It all works as expected, but I can't resolve this typescript error and I cannot declare it as type any.

The error basically says that postsType is of type string, meaning that it is an arbitrary string, and posts variable (i am assuming here that it has the type of PopularPosts['posts'], since you have not provided a complete reproducible example) only has specific keys: food, travel and so on. So to make posts[postsType] typesafe, you need it to be of type keyof PopularPosts['posts'] (which is effectively 'food' | 'travel' | 'music' | 'vacations'). — Nikita Ivanov
– Nikita Ivanov, Commented Sep 14, 2021 at 16:32

jean182 · Accepted Answer · 2021-09-14 16:50:22Z

You need to tell typescript that the postType string is one of the type keys of your PopularPosts.posts type, so it won't try to use for example a string called "drama" that can't be indexed to the posts object because there's no key with that name and that is why typescript is complaining. You can do some extra typing in order to make this work.

type Posts = {
    title: string
    description: string
}

type CategoryPosts = {
    count: number;
    posts: Posts[]
}

type PopularPosts = {
    posts: {
        food: CategoryPosts;
        vacations: CategoryPosts;
        travel: CategoryPosts;
        music: CategoryPosts;
    }
}

// This will give your postType string the correct typing
// This return all the keys that are on your posts
type Category = keyof PopularPosts["posts"]

// Example of creating a const for the postsType
const postsType: Category = 'food'

let selectedCategory = posts[postsType].posts

If you post type is coming from props or for some reason you can't do the typing above you could use some casting to achieve what you want.

let selectedCategory = posts[postsType as Category].posts

Collectives™ on Stack Overflow

Typescript Error: Expression of type 'string' can't be used to index type

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related