TypeScript如何为含静态与动态键的对象创建接口？

Hey there! I’ve been in your shoes struggling with TypeScript interfaces that mix fixed properties and dynamic keys, so I totally get the frustration. Let’s break down what went wrong with your attempts and walk through the best fixes.

Why Your Previous Approaches Failed #

First, let’s clarify the root of those errors:

• TS2411 Error: When you define an index signature like [key: string]: RouteItem[], TypeScript expects all properties (including token) to match that index type. Since token is a string instead of an array, it throws a mismatch error. Inheritance doesn’t fix this because it inherits the same index signature constraint.
• TS2339 Error: With a union type (string | RouteItem[]), TypeScript can’t be sure if a dynamic key points to a string or an array when you try to call push. It plays it safe and throws an error because push doesn’t exist on strings.

Solution 1: Use Intersection Types (Recommended) #

The cleanest and most type-safe way is to combine two interfaces: one for the fixed token property, and another for the dynamic route keys. This is called an intersection type.

First, define the type for your route items (fill in your actual properties):

interface RouteItem {
  // Example properties - replace with your actual data structure
  id: number;
  path: string;
}

Then create separate interfaces for the fixed token and dynamic routes, then intersect them:

// Fixed token property
interface TokenContainer {
  token: string;
}

// Dynamic route keys with array values
interface RouteMap {
  [routePath: string]: RouteItem[];
}

// Combine the two types
type AppState = TokenContainer & RouteMap;

Now you can use this type safely:

const obj: AppState = {
  token: 'thisismytoken',
  '/path/to/somewhere': [{ id: 1, path: '/home' }]
};

// Access token with full type safety (TS knows it's a string)
console.log(obj.token.toUpperCase());

// Access route arrays and call methods like push without errors
obj['/path/to/somewhere'].push({ id: 2, path: '/about' });

This approach keeps your types explicit, avoids errors, and lets TypeScript properly infer the type of each property.

Solution 2: Type Assertions (Quick Fix) #

If you prefer to stick with a single interface with a union type, you can use a type assertion to tell TypeScript that a specific key points to an array. Just be careful—this bypasses TypeScript’s checks, so you need to ensure the key isn’t token or another string property.

interface IObject {
  [key: string]: RouteItem[] | string;
}

const obj: IObject = {
  token: 'thisismytoken',
  '/path/to/somewhere': [{ id: 1 }]
};

// Assert the value is a RouteItem[] to call push
(obj['/path/to/somewhere'] as RouteItem[]).push({ id: 2 });

Solution 3: Type Guards (Safe Runtime Check) #

For extra safety, you can use a type guard to verify that a value is an array before calling array methods. This adds a runtime check to ensure you don’t accidentally try to call push on the token string.

// Type guard function to check if a value is a RouteItem array
function isRouteArray(value: RouteItem[] | string): value is RouteItem[] {
  return Array.isArray(value);
}

// Use the guard to narrow the type
if (isRouteArray(obj['/path/to/somewhere'])) {
  obj['/path/to/somewhere'].push({ id: 2 });
}

Final Recommendation #

The intersection type approach (Solution 1) is the best choice here—it’s clean, type-safe, and requires no extra runtime checks or assertions. It lets TypeScript do its job while giving you the flexibility of dynamic route keys alongside your fixed token property.

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