How to infer required properties in Angular and Lit with decorators? #20988
-
Beta Was this translation helpful? Give feedback.
Replies: 2 comments
-
For web components (we also use Lit), we configure our stories like so: import type { Meta, StoryObj } from "@storybook/web-components";
const meta: Meta<MyElement> = {
title: "Components/My Element",
component: "my-element",
args,
argTypes,
parameters: {
actions: {
handles: events,
},
},
};
export default meta;
type Story = StoryObj<MyElement & typeof args>;
export const Default: Story = {...}; You can also use the web components storybook helpers to handle a lot of the heavy lifting for you. |
Beta Was this translation helpful? Give feedback.
-
For Angular, runtime or maybe compile errors could probably be done, but I don't think enough can be gathered from just Typescript. The following are why I think it would be difficult for Angular, but maybe someone would know a way to get around them: Until runtime, when the decorators can be called, or compile time, when metadata properties can be set, there isn't anything unique about a component class. I could be wrong, but I don't think types can recognize that something has a decorator that will be called on it. If you have the following component: @Component({
selector: 'example',
inputs: [ 'inp1' ],
})
class ExampleComponent {
static ngAcceptInputType_inp3: string | boolean | null | undefined
private _inp3: boolean;
inp1: string
@Input() inp2: string
@Input()
get inp3(): boolean { return this._disabled }
set inp3(value: boolean) { this._disabled = (value === '') || value }
@Input('inp4Alias') inp4: string
@Input({ required: true }) inp5: string
@Input({ transform: booleanAttribute }) inp6: boolean
} I think Typescript only sees: class ExampleComponent {
static ngAcceptInputType_inp3: string | boolean | null | undefined
private _inp3: boolean
inp1: string
inp2: string
inp3: boolean
inp4: string
inp5: string
inp6: boolean
} So, the types Storybook defines were mostly accurate to what a template accepts. Just because you have the type as One of the problems with how it currently does the types is The following are possible solutions I have thought about, but not tried to actually do: Maybe you could have type files autogenerated in a way that it could work with, but I don't know if that could be done in a way that wasn't too awkward to work with. At the least, it would require a generation process to be run, before the types would work. For autogenerated, I was thinking in a tsconfig the import types of I don't know enough about the Angular language server to know if that could be leveraged in anyway for this. It seems to be focused on templates, from what I have seen. |
Beta Was this translation helpful? Give feedback.
For Angular, runtime or maybe compile errors could probably be done, but I don't think enough can be gathered from just Typescript.
The following are why I think it would be difficult for Angular, but maybe someone would know a way to get around them:
Until runtime, when the decorators can be called, or compile time, when metadata properties can be set, there isn't anything unique about a component class. I could be wrong, but I don't think types can recognize that something has a decorator that will be called on it.
If you have the following component: