TypeScript动态属性访问报错及索引签名解决方案疑问

Hey there! Let's break down your TypeScript questions step by step—this is such a common confusion when you're starting out with TypeScript's strict type checking, so you're definitely not alone here!

1. Why do we need to explicitly declare [key: string]? #

TypeScript’s whole deal is enforcing type safety, and that includes how you access object properties. Your ProductSearch interface defines specific, known keys (like productId, productBrand), but when you use Object.keys(product), TypeScript only knows those keys are generic strings (since Object.keys always returns an array of strings for any object).

If your interface doesn’t have an index signature ([key: string]: string), TypeScript can’t guarantee that any arbitrary string (from Object.keys) will be a valid key on ProductSearch. That’s exactly why you get the error: "Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'ProductSearch'".

Without the index signature, TypeScript only lets you index ProductSearch with its exact, explicitly defined keys (like productId), not a generic string. Adding [key: string]: string tells TypeScript: "Any string key on this object will map to a string value", which aligns perfectly with what Object.keys gives you.

2. Why does value not resolve to string in line #2? #

First off, there’s a small typo in your function definition that’s causing this! Your current parameter is product: { [key: string]: ProductSearch }—this tells TypeScript that product is an object where each key maps to a full ProductSearch object, not a single ProductSearch instance. That’s why when you access product[key], you get a ProductSearch type instead of a string, which throws an error when you try to push it into your string[] params.

When you directly use product.productId, if product was typed correctly as ProductSearch, TypeScript knows that productId is a string. But with your original function type, product.productId would actually be a ProductSearch object (which doesn’t make sense for your use case). The fix here is to change your function parameter to product: ProductSearch—that’s what you intended all along!

Once you add [key: string]: string to your ProductSearch interface, TypeScript now knows every key (including the explicit ones like productId) maps to a string. So when you access product[key], the value is correctly typed as string, which matches what your params array expects.

Why adding [key: string]: string to the interface fixes everything #

That index signature does two critical things for your code:

• It validates that any generic string key (from Object.keys) is a valid way to index ProductSearch, eliminating the "implicit any" error.
• It ensures that every value retrieved via a string key is a string, which aligns with your params array’s type and fixes the second error.

Just remember to adjust your function parameter to product: ProductSearch to make the whole setup work as intended!

内容的提问来源于stack exchange，提问作者Lavariet