discord.js - Imagine an app•12mo ago

Some typescript error when updating components

Hello there 👋🏻 I created a bot that handles a component interaction - a button click. OnClick I use ActionRowBuilder to create an updated row object and then send the update by using:

                const updatedRow = new ActionRowBuilder()
                    .addComponents(
                        new ButtonBuilder().setLabel("Continue").setStyle(ButtonStyle.Success).setCustomId("gen_continue").setDisabled(true),
                        new ButtonBuilder().setLabel("Cancel").setStyle(ButtonStyle.Danger).setCustomId("gen_cancel").setDisabled(true),
                    )


                await interaction.update({
                    components: [
                        updatedRow
                    ]
                })

                const updatedRow = new ActionRowBuilder()
                    .addComponents(
                        new ButtonBuilder().setLabel("Continue").setStyle(ButtonStyle.Success).setCustomId("gen_continue").setDisabled(true),
                        new ButtonBuilder().setLabel("Cancel").setStyle(ButtonStyle.Danger).setCustomId("gen_cancel").setDisabled(true),
                    )


                await interaction.update({
                    components: [
                        updatedRow
                    ]
                })

But unless I add a @ts-ignore above the updatedRow in the components array my TS won't compile - With the @ts-ignore it not just only compiles - it also works. The buttons are disabled. Thisis the typehints my IDE (WebStorm) gives me:

TS2769: No overload matches this call.
Overload 1 of 2,
(options: InteractionUpdateOptions & { fetchReply: true; }): Promise<Message<boolean>>
, gave the following error.
Type ActionRowBuilder<AnyComponentBuilder> is not assignable to type
APIActionRowComponent<APIMessageActionRowComponent> | JSONEncodable<APIActionRowComponent<APIMessageActionRowComponent>> | ActionRowData<...>
Property type is missing in type ActionRowBuilder<AnyComponentBuilder> but required in type
ActionRowData<MessageActionRowComponentBuilder | MessageActionRowComponentData>
Overload 2 of 2,
(options: string | MessagePayload | InteractionUpdateOptions): Promise<InteractionResponse<boolean>>
, gave the following error.
Type ActionRowBuilder<AnyComponentBuilder> is not assignable to type
APIActionRowComponent<APIMessageActionRowComponent> | JSONEncodable<APIActionRowComponent<APIMessageActionRowComponent>> | ActionRowData<...>
index.d.ts(283, 3): type is declared here.

TS2769: No overload matches this call.
Overload 1 of 2,
(options: InteractionUpdateOptions & { fetchReply: true; }): Promise<Message<boolean>>
, gave the following error.
Type ActionRowBuilder<AnyComponentBuilder> is not assignable to type
APIActionRowComponent<APIMessageActionRowComponent> | JSONEncodable<APIActionRowComponent<APIMessageActionRowComponent>> | ActionRowData<...>
Property type is missing in type ActionRowBuilder<AnyComponentBuilder> but required in type
ActionRowData<MessageActionRowComponentBuilder | MessageActionRowComponentData>
Overload 2 of 2,
(options: string | MessagePayload | InteractionUpdateOptions): Promise<InteractionResponse<boolean>>
, gave the following error.
Type ActionRowBuilder<AnyComponentBuilder> is not assignable to type
APIActionRowComponent<APIMessageActionRowComponent> | JSONEncodable<APIActionRowComponent<APIMessageActionRowComponent>> | ActionRowData<...>
index.d.ts(283, 3): type is declared here.

This all happens directly in the event handler for InteractionCreate with this signature: async function handler(interaction: Interaction): Promise<any> I am unsure if my handler signature is wrong or if this is actually something with the library. Could someone take a look?

3 Replies

d.js toolkit•12mo ago

- What's your exact discord.js npm list discord.js and node node -v version? - Not a discord.js issue? Check out #other-js-ts. - Consider reading #how-to-get-help to improve your question! - Explain what exactly your issue is. - Post the full error stack trace, not just the top part! - Show your code! - Issue solved? Press the button! - ✅ Marked as resolved by OP

d.js docs•12mo ago

In TypeScript the ActionRowBuilder class has a generic type parameter that specifies the type of component the action row holds:

const row = new ActionRowBuilder<ButtonBuilder>().addComponents(button)
const row = new ActionRowBuilder<StringSelectMenuBuilder>().addComponents(selectMenu)
const row = new ActionRowBuilder<TextInputBuilder>().addComponents(textInput)

const row = new ActionRowBuilder<ButtonBuilder>().addComponents(button)
const row = new ActionRowBuilder<StringSelectMenuBuilder>().addComponents(selectMenu)
const row = new ActionRowBuilder<TextInputBuilder>().addComponents(textInput)

wehmoenOP•12mo ago

Thank you!

Gaming

Programming

Some typescript error when updating components