Angular懒加载指令@Input属性类型校验失效问题修复咨询

我实现了一个LazyCompDirective用于组件懒加载，同时定义了LazyLoadedComponent接口让目标组件实现，以此做类型约束。使用时通过<ng-template [lazyComponent]="component" [inputs]="componentInput"></ng-template>传入组件和参数，但发现[inputs]属性没有生效的类型校验，怀疑当前的类型守卫逻辑有问题，想知道怎么修复。

相关代码如下：

懒加载指令代码 #

@Directive({
    selector: '[lazyComponent]',
})
export class LazyCompDirective<I, T extends LazyLoadedComponent<I>> implements OnInit, OnDestroy {
    private _inputs: I|null = null;
    private compRef: ComponentRef<T>|null = null;
    private readonly subscription = new Subscription();
    private type?: Type<T>;

    @Input('lazyComponent') public set component(type: Type<T>) {
        if (type) {
            this.compRef = this.viewContainerRef.createComponent(type);
            this.refreshInputs(this._inputs);
            this.type = type;
        }
    }

    @Input() public set inputs(data: I) {
        if (this.compRef) {
            this.refreshInputs(data);
            (this.compRef).hostView.detectChanges();
        } else {
            this._inputs = data;
        }
    }

    public constructor(private readonly viewContainerRef: ViewContainerRef) {}

    ngOnInit(): void {
        if (this.type) {
            this.compRef = this.viewContainerRef.createComponent(this.type);
            this.refreshInputs(this._inputs);
        }
    }

    public ngOnDestroy() {
        this.compRef = null;
        this.subscription.unsubscribe();
    }

    private refreshInputs(inputs: I | null) {
        if (inputs) {
            Object.keys((inputs)).forEach(inputName => {
                // @ts-expect-error: skip error
                (this.compRef as ComponentRef<unknown>).instance[inputName] = inputs[inputName];
            });
        }
    }

    static ngTemplateContextGuard<T extends LazyLoadedComponent<I>, I>(_dir: LazyCompDirective<I, T>, _context: unknown): _context is LazyLoadedComponent<I> {
        return true
    }

    static ngTemplateGuard_inputs<T extends LazyLoadedComponent<I>, I>(_dir: LazyCompDirective<I, T>, _state: I): _state is I {
        return true;
    }
}

接口定义 #

export interface LazyLoadedComponent<I> {
    inputs?: I;
}

实现接口的组件 #

@Component({
    selector: 'lazy-component',
    template: '<div>I\'m Lazy</div>',
})
export class LazyComponent implements LazyLoadedComponent<LazyComponentInput>, OnInit {
    public inputs?: LazyComponentInput;

    public constructor(
        
    ) {}

    public ngOnInit(): void {}
}

输入参数接口 #

export interface LazyComponentInput{
a: string,
b: number,
}

当前的类型校验失效主要有几个原因：

1. 类型守卫形同虚设：ngTemplateGuard_inputs只是直接返回true，没有提供任何实际的类型校验逻辑，TypeScript无法通过它关联lazyComponent和inputs的类型关系。
2. 泛型推导逻辑不合理：指令的泛型约束是I, T extends LazyLoadedComponent<I>，这种反向推导让TypeScript难以正确关联I和目标组件的输入类型。
3. 接口设计模糊类型：LazyLoadedComponent的inputs属性是可选的，进一步弱化了TypeScript的类型推导能力。

1. 重构LazyLoadedComponent接口 #

先修正接口的类型约束，去掉inputs属性的可选性，确保TypeScript能明确推导输入类型：

export interface LazyLoadedComponent<I> {
    inputs: I; // 移除可选标记，强制组件声明输入类型结构
}

如果希望组件直接使用独立的@Input()属性而不是一个inputs对象，可以调整接口为：

// 接口仅标记组件拥有对应类型的输入属性，无需显式声明inputs字段
export interface LazyLoadedComponent<I> {}

2. 修正指令的泛型与类型守卫 #

调整指令的泛型顺序，让I从目标组件T的类型中自动推导，同时强化ngTemplateGuard_inputs的类型关联能力：

@Directive({
    selector: '[lazyComponent]',
})
// 调整泛型，让I从T的inputs属性类型推导而来
export class LazyCompDirective<T extends LazyLoadedComponent<I>, I = NonNullable<T['inputs']>> implements OnInit, OnDestroy {
    // ... 原有属性和方法保持不变

    // 修正类型守卫，让TypeScript能正确关联组件与输入类型
    static ngTemplateGuard_inputs<T extends LazyLoadedComponent<I>, I>(
        _dir: LazyCompDirective<T, I>,
        state: unknown
    ): state is I {
        // 可选：添加运行时校验逻辑，比如检查必填属性是否存在
        if (typeof state !== 'object' || state === null) {
            return false;
        }
        // 编译时类型校验主要依赖泛型关联，这里返回true即可触发TypeScript的类型检查
        return true;
    }
}

3. 优化组件输入的类型实现 #

如果采用独立@Input()的方式，组件应直接声明对应属性，这样refreshInputs的赋值逻辑更安全，无需跳过TypeScript检查：

@Component({
    selector: 'lazy-component',
    template: '<div>I\'m Lazy: {{a}}, {{b}}</div>',
})
export class LazyComponent implements LazyLoadedComponent<LazyComponentInput> {
    @Input() a!: string;
    @Input() b!: number;

    ngOnInit(): void {}
}

4. 修复refreshInputs的类型安全 #

去掉@ts-expect-error，通过泛型约束确保赋值的类型正确性：

private refreshInputs(inputs: I | null) {
    if (inputs && this.compRef) {
        Object.entries(inputs).forEach(([inputName, value]) => {
            // 利用泛型约束，确保inputName是组件实例的合法属性
            (this.compRef.instance as Record<string, unknown>)[inputName] = value;
        });
    }
}

修改完成后，当你传入不符合LazyComponentInput类型的参数时，TypeScript会直接抛出编译错误，实现有效的类型校验。

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