TypeScript泛型函数中typeof判断后类型未收窄为string的原因及优化

问题背景 #

在基于TypeScript条件类型示例编写的泛型函数createLabel2中，当通过typeof nameOrId === "string"做类型判断后，参数nameOrId的类型被收窄为T & string而非string，导致返回值无法自动匹配NameOrId<T>类型，必须使用类型断言才能正常工作。如何更规范地编写这段代码？

示例代码 #

interface IdLabel {
  id: number;
}

interface NameLabel {
  name: string;
}

type NameOrId<T extends number | string> = T extends string ? NameLabel : IdLabel;

const createLabel2 = <T extends number | string>(nameOrId: T): NameOrId<T> => {
  if (typeof nameOrId === "string") {
    const result = {
      // 此处nameOrId的类型为T & string而非string
      name: nameOrId,
    } 
    return result; // 类型不匹配，报错
  }
  return {
    id: 123,
  } as NameOrId<T>;
};

原因说明 #

泛型参数T受number | string约束，它可以是具体的字面量类型（比如"foo"或123）。当用typeof判断后，TypeScript会将参数类型收窄为T & string——这是因为T可能是string的子类型（如字符串字面量），收窄后的类型是T与string的交集，而非直接的string。此时返回的{name: nameOrId}类型为{name: T & string}，和NameOrId<T>对应的NameLabel（name属性为string）存在类型差异，TypeScript无法自动确认兼容性，因此需要额外处理。

规范写法方案 #

方案一：使用函数重载替代泛型条件类型 #

函数重载能直接映射输入输出的类型关系，避免泛型条件类型带来的收窄问题，代码可读性更强：

interface IdLabel {
  id: number;
}

interface NameLabel {
  name: string;
}

// 重载签名：明确不同输入对应的输出类型
function createLabel(nameOrId: string): NameLabel;
function createLabel(nameOrId: number): IdLabel;

// 实现签名：处理具体逻辑
function createLabel(nameOrId: string | number): NameLabel | IdLabel {
  if (typeof nameOrId === "string") {
    return { name: nameOrId };
  }
  return { id: nameOrId };
}

方案二：精准类型断言（保留泛型） #

如果需要保留泛型逻辑，可以在每个分支中先断言为具体的标签类型，再匹配NameOrId<T>：

interface IdLabel {
  id: number;
}

interface NameLabel {
  name: string;
}

type NameOrId<T extends number | string> = T extends string ? NameLabel : IdLabel;

const createLabel2 = <T extends number | string>(nameOrId: T): NameOrId<T> => {
  if (typeof nameOrId === "string") {
    return { name: nameOrId } as NameLabel as NameOrId<T>;
  }
  return { id: nameOrId } as IdLabel as NameOrId<T>;
};

方案三：自定义类型谓词收窄类型 #

通过自定义类型谓词，手动将参数收窄为string类型（会牺牲泛型的子类型精度，但解决类型不匹配问题）：

interface IdLabel {
  id: number;
}

interface NameLabel {
  name: string;
}

type NameOrId<T extends number | string> = T extends string ? NameLabel : IdLabel;

// 自定义类型谓词，明确判断值为string类型
function isString(value: unknown): value is string {
  return typeof value === "string";
}

const createLabel2 = <T extends number | string>(nameOrId: T): NameOrId<T> => {
  if (isString(nameOrId)) {
    return { name: nameOrId } as NameOrId<T>;
  }
  return { id: nameOrId } as NameOrId<T>;
};

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