TypeScript泛型约束报错：返回值无法分配给泛型类型T的问题

问题场景 #

先定义基础接口：

interface PageProps {
  foo: string;
}

想写一个支持该接口及其子类型的泛型函数，代码如下：

const createGenericPageProps = <T extends PageProps>(): T => {
  return {
    foo: 'asd',
  };
};

但这段代码直接报错：

Type '{ foo: string; }' is not assignable to type 'T'.
'{ foo: string; }' is assignable to the constraint of type 'T', but 'T' could be instantiated with a different subtype of constraint 'PageProps'.

反过来，直接返回PageProps类型的函数却能正常运行：

const createConcretePageProps = (): PageProps => {
  return {
    foo: 'asd',
  };
};

报错原因 #

核心问题在于：T extends PageProps意味着T可以是PageProps的任何子类型，而不只是PageProps本身。

举个例子，假如有这样的子类型：

interface ExtendedPageProps extends PageProps {
  bar: number;
}

当你调用createGenericPageProps<ExtendedPageProps>()时，函数承诺要返回一个带bar属性的对象，但你实际返回的只有foo，完全不符合ExtendedPageProps的要求。TypeScript就是在提前提醒你这个矛盾：你返回的对象只满足基类，但没法满足所有可能的子类型T。

解决办法 #

根据你的实际需求，选对应的方案：

1. 直接返回基类型（最简单） #

如果不需要函数严格返回T，只是要返回兼容PageProps的对象，直接把返回类型改成PageProps就行，就是你写的createConcretePageProps的写法。要是想保留泛型的灵活性，也可以写成：

const createGenericPageProps = <T extends PageProps>(): PageProps => {
  return { foo: 'asd' };
};

2. 让调用者提供初始化数据（最安全） #

如果确实要返回T类型的对象，得让调用者传入符合T结构的默认值，这样你就能保证返回的对象符合要求：

const createGenericPageProps = <T extends PageProps>(defaultProps: T): T => {
  return { ...defaultProps };
};

// 使用示例：传入带额外属性的子类型对象
const extendedProps = createGenericPageProps({ foo: 'asd', bar: 123 });

也可以让函数接收构造函数，用来创建T的实例：

const createGenericPageProps = <T extends PageProps>(ctor: new () => T): T => {
  return new ctor();
};

3. 类型断言（谨慎用） #

如果你能百分百确定调用时T就是PageProps，或者返回值完全兼容T，可以用类型断言跳过检查，但这样会失去TypeScript的类型保护，复杂场景别用：

const createGenericPageProps = <T extends PageProps>(): T => {
  return { foo: 'asd' } as T;
};

4. 泛型默认值（折中方案） #

如果大部分场景下T就是PageProps，可以给泛型参数加默认值，配合类型断言使用（默认场景安全，显式指定子类型时要自己负责）：

const createGenericPageProps = <T extends PageProps = PageProps>(): T => {
  return { foo: 'asd' } as T;
};

// 默认调用返回PageProps，没问题
const defaultProps = createGenericPageProps();
// 显式指定子类型时，要确保返回值符合要求，否则会有运行时风险
const extendedProps = createGenericPageProps<ExtendedPageProps>();

内容的提问来源于stack exchange，提问作者pavel.sheiman