手动执行Array.isArray检查后，如何消除TypeScript类型错误？

Great question! The issue here is that TypeScript can't automatically narrow down the union type of filter[key] when dealing with a broad index signature like [key: string]: boolean | string | [string]—even if you run a runtime check like Array.isArray(). Let's walk through the most effective solutions:

1. Use a Custom Type Guard (Type Predicate) #

This is the safest and most maintainable approach, as it creates an explicit contract with TypeScript about how to refine your type:

export class WorkspaceFilter {
  [key: string]: boolean | string | [string];
}

// Custom type guard to confirm a value is the [string] array type
function isStringArray(value: boolean | string | [string]): value is [string] {
  return Array.isArray(value);
}

const fn = (filter: WorkspaceFilter, key: string) => {
  const value = filter[key];
  if (isStringArray(value)) {
    // TypeScript now knows `value` is definitely [string] here
    console.log(value.length);
  }
};

The value is [string] predicate tells TypeScript: "if this function returns true, treat this value as the [string] type". This eliminates the error because TypeScript can now trust the runtime check narrows the union type correctly.

2. Use a Type Assertion (Quick, Targeted Fix) #

If you're 100% confident your Array.isArray() check is reliable, you can use a type assertion to force TypeScript to recognize the array type:

export class WorkspaceFilter {
  [key: string]: boolean | string | [string];
}

const fn = (filter: WorkspaceFilter, key: string) => {
  if (Array.isArray(filter[key])) {
    // Assert the value is a [string] array
    console.log((filter[key] as [string]).length);
  }
};

This works immediately, but it's less safe than a type guard—if your runtime check logic ever changes, TypeScript won't catch mismatches. Reserve this for simple, short-lived code where you can verify the check is correct.

3. Refine the WorkspaceFilter Type (Long-Term Improvement) #

If your use case allows, making your WorkspaceFilter type more precise will let TypeScript handle narrowing automatically:

// Replace the broad index signature with a mixed type:
// - General keys for boolean/string values
// - Explicit keys for array values
export type WorkspaceFilter = {
  [key: string]: boolean | string;
} & {
  tags?: [string];
  categories?: [string];
};

const fn = (filter: WorkspaceFilter, key: 'tags' | 'categories') => {
  const value = filter[key];
  if (value) {
    // TypeScript knows `value` is [string] for these specific keys
    console.log(value.length);
  }
};

This approach makes your type definition clearer and leverages TypeScript's built-in type narrowing without extra code. It's ideal if you have a known set of keys that hold array values.

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