angular 输入的类型,required() 和 input() 的区别

pieyvz9o  于 6个月前  发布在  Angular
关注(0)|答案(4)|浏览(94)

Which @angular/* package(s) are relevant/related to the feature request?

common

Description

input.required() returns the same typescript type as input() which makes it difficult to statically analyze which inputs are required and which are optional.
If input.required() returned some other branded type, for example RequiredInputSignal<T> we could then devise a type such as:

type ComponentInput<T> = ... // not shown here, see TS Playground link

function render<T>(component: Type<T>, inputs: ComponentInput<T>) {
}

class Component {
  name = input.required<string>();
  birthday = input<Date>();
}

// works
render(Component, { 
  name: 'hello',
  birthday: new Date()
})

// shows error because name is required
render(Component, { 
  birthday: new Date()
})

// works because birthday is optional
render(Component, { 
  name: 'hello',
})

// error because there's no foo
render(Component, { 
  name: 'hello',
  foo: 'bar'
})

TS Playground link

Proposed solution

input.required() should return a different typescript branded type than input() .
See this playground: demo

Alternatives considered

None exist

8nuwlpux

8nuwlpux1#

从更大的Angular 来看,组件输入/输出有一个完整的类型安全故事。理想情况下,框架应该能够为支持类型、别名和必需的组件输入/输出提供类型/辅助类型。主要问题是,这些类型只有在没有装饰器输入/输出的情况下才能正确工作。

7bsow1i6

7bsow1i62#

我认为这很好。在我看来,基于装饰器的输入即将消失,并将在某个时候被弃用。

nuypyhwy

nuypyhwy3#

当然,这对于(未来的)信号组件来说是可以的,但对于常规组件来说,它可能导致令人惊讶/不一致的行为。
想象一下,组件是在库中实现的,你不会直接知道输入是通过装饰器还是信号实现的,而且这些类型与你在HTML中使用的输入可能不一致。

xxb16uws

xxb16uws4#

这是真的,但如果这个开始时只是不同的类型,它将允许库作者利用这些信息。
这对于Angular测试库来说是有用的,例如,能够提示哪些输入是必需的。
不确定它还能在哪里有用,也许在Angular编译器的内部?我看到目前有一个特殊情况,即input.required()在编译器中编写,可能可以通过类型检查直接实现。但我对那里的具体细节不太了解,所以也许我遗漏了一些东西。

相关问题