TypeScript接口继承报错：扩展接口无法兼容基接口函数的原因

我尝试通过添加更多属性扩展接口时，该接口无法赋值给接受基接口类型的函数，这是为什么？难道扩展接口不应该保证拥有基接口函数所需的所有属性吗？

StackOverflow上有很多同类问题，但都未解释其原因、设计初衷以及如何实现预期结果的解决方法。自2017年起，GitHub上就有相关的开放议题。

我对扩展接口的理解哪里出错了？

复现代码 #

// ------------------------ Types Declaration ----------------

interface ServerRequest {
    url: string,
    method: string,
    body: string | undefined
}

interface ExtendedServerRequest extends ServerRequest {
    orignal_url: string | undefined
}

type FunctionOrignal = (req: ServerRequest)=> void
type FunctionOverridden = (req: ExtendedServerRequest)=> void

interface ShortHandOptions {
    onSend: FunctionOrignal
}

interface ExtendedShortHandOptions extends ShortHandOptions {
    onSend: FunctionOverridden
}

// ------------------------ Test ----------------------------

console.log('------------------------------------------------');

function test(opts: ShortHandOptions) {
    opts.onSend({
        url: 'https://httpbin.org/get',
        method: 'GET'
    } as ServerRequest);
}

var func1: FunctionOrignal = (req) => {
        console.log('FunctionOrignal', req.url);
    },
    func2: FunctionOverridden = (req) => {
        console.log('FunctionOverridden', req.orignal_url);
    };

test({ onSend: func1 } as ShortHandOptions);

test({ onSend: func2 } as ExtendedShortHandOptions);

错误信息 #

Interface 'ExtendedShortHandOptions' incorrectly extends interface 'ShortHandOptions'.
  Types of property 'onSend' are incompatible.
    Type 'FunctionOverridden' is not assignable to type 'FunctionOrignal'.
      Types of parameters 'req' and 'req' are incompatible.
        Property 'orignal_url' is missing in type 'ServerRequest' but required in type 'ExtendedServerRequest'.

我认为只要test函数调用onSend时传入ShortHandOptions类型的参数（即至少包含{ url, method, body }属性），代码就应该可以正常运行。

核心原因：函数参数的逆变特性 #

TypeScript中，函数类型的兼容性遵循**逆变（Contravariance）**规则，而非你直觉中的协变：

• 协变：若A是B的子类，A类型变量可赋值给B类型（比如ExtendedServerRequest能赋值给ServerRequest）。
• 逆变：函数参数则相反——若函数F接受B类型参数，函数G接受A类型参数（A是B的子类），那么F可赋值给G，但G不能赋值给F。

回到你的代码：

• FunctionOrignal接受宽泛的ServerRequest参数，FunctionOverridden要求更具体的ExtendedServerRequest参数。
• 当ExtendedShortHandOptions继承ShortHandOptions时，试图用FunctionOverridden替换FunctionOrignal，但根据逆变规则，这是不允许的——因为test会给onSend传入仅满足ServerRequest的对象，而func2却要求该对象必须有orignal_url属性，这会直接导致运行时错误（访问不存在的属性）。

设计初衷：类型安全的底层保障 #

TypeScript的这个设计是为了杜绝潜在的运行时错误。如果允许这种赋值，test调用func2时传入的ServerRequest对象没有orignal_url，func2里访问req.orignal_url会得到undefined，甚至引发报错，完全违背了TypeScript的类型安全目标。

解决方法 #

根据你的需求，有几种可行的方案：

方案1：放宽函数参数类型 #

修改FunctionOverridden的参数类型，让它接受ServerRequest，并在内部判断扩展属性是否存在：

type FunctionOverridden = (req: ServerRequest)=> void

var func2: FunctionOverridden = (req) => {
    if ('orignal_url' in req) {
        console.log('FunctionOverridden', (req as ExtendedServerRequest).orignal_url);
    } else {
        console.log('No original url', req.url);
    }
};

方案2：用泛型定义接口 #

让ShortHandOptions成为泛型接口，扩展时指定具体的参数类型，同时调整test函数适配泛型：

interface ShortHandOptions<T extends ServerRequest = ServerRequest> {
    onSend: (req: T) => void
}

interface ExtendedShortHandOptions extends ShortHandOptions<ExtendedServerRequest> {}

function test<T extends ServerRequest>(opts: ShortHandOptions<T>, req: T) {
    opts.onSend(req);
}

// 调用时传入符合ExtendedServerRequest的完整参数
test({ onSend: func2 }, {
    url: 'https://httpbin.org/get',
    method: 'GET',
    body: undefined,
    orignal_url: 'https://original.com'
});

方案3：类型断言（不推荐） #

如果你能确保运行时传入的参数一定包含orignal_url，可以用类型断言跳过检查，但这会失去TypeScript的类型安全保护：

test({ onSend: func2 as FunctionOrignal });

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