types for fluent ui v9

[Ashilex]

It may be a silly question. I'm kinda new to tyescript in general. From my understanding when you use an npm package you can also install its associated TS types. Is there anything similar for fluent ui v9? I did some research but it seems like nobody says anything about that.

Do they even exist? Are they somehow integrated in the main package?

Thanks

[khmakoto]

Hi @Ashilex, all our Fluent packages come with their type definitions already in them so you don't need to install any extra TS types packages. If you navigate in our repo to any of the component folders, you'll be able to see the types.ts files there 😄.

For example, here is the types file of the Button component.

[Ashilex]

Thank you. Is there anything related to types in your documentation?

I use to create custom components wrapping them around fluent ui components then these custom components receive props that are passed to internal fluent ui components. Like this:

class CustomButton<CustomButtonProps>

...

render(){
             <Button
                    onClick={this.props.onClick}
                    style={this.props.style}
                    size={this.props.size}
                    icon={this.props.icon}
                    iconPosition={this.props.iconPosition}
                    appearance={this.props.appearance}
                    disabled={this.props.disabled} 
                > Click button!
           </ Button>
}

I am struggling understanding how to type props on the outer component.

Icon for example. I see here it is defined like:

export type ButtonSlots = {
  root: NonNullable<Slot<ARIAButtonSlotProps<'a'>>>;
  icon?: Slot<'span'>;
};

but I can't figure out the right type icon props should have on my CustomButton.

It seems not easy to deal with this without clear docs or examples...

Any suggestions? Thanks

[khmakoto]

@Ashilex the slot typings are complex, but the concept is not that complicated, there is some information about working with slots here.