Question

我正在使用包 - ko-component-router - 使用以下（精简）类型定义...

index.d.ts

export { IContext, Context } from './context';
export { Router } from './router';

context.d.ts

export interface IContext {
    $root: IContext;
    $child: IContext;
    $children: IContext[];
    $parent: IContext;
    $parents: IContext[];
    router: Router;
    route: Route;
    params: {
        [k: string]: any;
    };
    path: string;
    pathname: string;
    base: string;
    canonicalPath: string;
}
export declare class Context implements IContext {
  // ...
}

router.d.ts

import { IContext } from './context';
export declare type Middleware = (ctx: IContext, done?: () => any) => {
    beforeRender?: (done?: () => void) => Promise<any> | void;
    afterRender?: (done?: () => void) => Promise<any> | void;
    beforeDispose?: (done?: () => void) => Promise<any> | void;
    afterDispose?: (done?: () => void) => Promise<any> | void;
};
export declare class Router {
    static use(...fns: Middleware[]): void;
}

在消费者方面，注册了中间件，可以将属性添加到传递给视图组件的上下文中，因此......

import { Router } from 'ko-component-router'


Router.use((ctx) => ({
    beforeRender() {
        ctx.someProperty = 'foo'
    }
}))

正如预期的那样，编译器会抛出Property 'someProperty' does not exist on type 'IContext'错误。

根据declaration merging上的文档，我尝试添加以下内容，以使编译器知道这个新属性......

import { Router } from 'ko-component-router'

declare module 'ko-component-router' {
    interface IContext {
        someProperty: string
    }
}

Router.use((ctx) => ({
    beforeRender() {
        ctx.someProperty = 'foo'
    }
}))

但是抛出同样的错误。我已经尝试了我能想到的所有内容，但是如果我没有完全重新实现项目中的类型定义，我就无法让编译器知道这个新属性，这显然远非理想。

这是可能的，如果是的话，我会在哪里误入歧途？

Answer 1

正如cartant评论中所提到的，模块扩充不适用于导出的类和接口＆＃34;间接＆＃34; - this is a known issue。

如果你扩充定义IContext的内部模块，它会起作用：

declare module 'ko-component-router/context' {
    export interface IContext {
        someProperty: string
    }
}

不幸的是，任何以这种方式添加扩充的人都会引入对库内部结构的依赖。

此外，通过此扩充class Context不再编译：

错误TS2420：类＆＃39;上下文＆＃39;错误地实现接口＆＃39; IContext＆＃39 ;.物业＆＃39; someProperty＆＃39;类型＆＃39;上下文中缺少。

因此，如果向某些类实现的接口添加属性，则这些属性必须是可选的：

declare module 'ko-component-router/context' {
    export interface IContext {
        someProperty?: string
    }
}

增加导入的打字稿界面

1 个答案: