如何从Angular的Signal、Input或Output提取/推断原始值类型？

问题描述 #

我有如下代码示例：

import { Component, output } from '@angular/core';

@Component({...})
export class MyComponent {
  success = output<{message: string, response: SomeModelNotExported}>();
}

目前我通过索引访问和条件推断进行类型提取，代码如下：

onSuccess(event: MyComponent['success'] extends OutputEmitterRef<infer T> ? T : never) { 
    // 类型被推断为 {message: string, response: SomeModelNotExported}
    ...
 }

这种写法过于繁琐，是否存在更简便的实现方式？我是否遗漏了Angular已提供的现成导出类型？

解决方案 #

使用Angular内置的OutputType工具类型 #

Angular从16+版本开始，在@angular/core中导出了OutputType工具类型，专门用来提取输出属性的发射值类型，完全可以替代你手写的条件推断逻辑：

import { OutputType } from '@angular/core';

onSuccess(event: OutputType<MyComponent['success']>) {
    // 类型自动推断为 {message: string, response: SomeModelNotExported}
    // 逻辑代码...
}

进阶简化：自定义类型别名 #

如果这个类型需要在多个地方使用，还可以提前定义一个类型别名，进一步减少重复代码：

import { OutputType } from '@angular/core';

// 提前定义类型别名
type SuccessEvent = OutputType<MyComponent['success']>;

// 多处复用
onSuccess(event: SuccessEvent) {
    ...
}

anotherMethod(event: SuccessEvent) {
    ...
}

补充说明 #

OutputType的内部实现其实就是封装了你之前手写的条件推断逻辑，官方定义大致如下：

type OutputType<T extends OutputEmitterRef<any>> = T extends OutputEmitterRef<infer U> ? U : never;

相当于把重复的推断逻辑官方标准化了，让代码更简洁、可读性更强。

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