ModalBuilder in typescript

[jbaumgarten]

Hi guys,

I'm trying to use modal with discord.js V13 in typescript.
I have the following code:

import { ActionRowBuilder, ModalActionRowComponentBuilder, ModalBuilder, TextInputBuilder, SlashCommandBuilder } from '@discordjs/builders';
import { CommandInteraction, Client, TextInputStyle } from 'discord.js';

module.exports = {
    data: new SlashCommandBuilder()
        .setName('set_postal_address')
        .setDescription('Provide your postal address for physical items'),

    async execute(interaction: CommandInteraction, client: Client) {
        const myModal = new ModalBuilder()
            .setCustomId("modal_1")
            .setTitle(`Modal Teste`);

        const username = new TextInputBuilder()
            .setCustomId("username")
            .setLabel("Username:")
            .setStyle(TextInputStyle.Short)
            .setPlaceholder("Coloque seu nome")
            .setRequired(true)
            .setMinLength(4)
            .setMaxLength(10);

        const password = new TextInputBuilder()
            .setCustomId("password")
            .setLabel("Password:")
            .setStyle(TextInputStyle.Short)
            .setPlaceholder("Coloque sua senha")
            .setRequired(true)
            .setMinLength(4)
            .setMaxLength(10);

        const username_row = new ActionRowBuilder<ModalActionRowComponentBuilder>().addComponents(username);
        const password_row = new ActionRowBuilder<ModalActionRowComponentBuilder>().addComponents(password);

        myModal.addComponents(username_row, password_row);

        await interaction.showModal(myModal);
}

It's nearly the same as describe here: https://discordjs.guide/interactions/modals.html#building-and-responding-with-modals

However, when I try to compile the code, I have the following error:

src/slashcommands/set_postal_address.ts:17:23 - error TS2693: 'TextInputStyle' only refers to a type, but is being used as a value here.

17             .setStyle(TextInputStyle.Short)
                         ~~~~~~~~~~~~~~

src/slashcommands/set_postal_address.ts:26:23 - error TS2693: 'TextInputStyle' only refers to a type, but is being used as a value here.

26             .setStyle(TextInputStyle.Short)
                         ~~~~~~~~~~~~~~

src/slashcommands/set_postal_address.ts:37:37 - error TS2345: Argument of type 'ModalBuilder' is not assignable to parameter of type 'Modal | ModalOptions'.
  Type 'ModalBuilder' is missing the following properties from type 'Modal': customId, title, spliceComponents

37         await interaction.showModal(myModal);
                                       ~~~~~~~

Can anyone give me some clues please?

I can replace TextInputStyle.Short with integers but it's ugly...
Thx in advance :)

[Jiralite]

The main error here is you are following the version 14 guide. You should follow the version 13 guide.

Version 13 isn't nice with these constants. You'll have to import Constants from discord.js and do Constants.TextInputStyles.SHORT, in this case. Alternatively, you can update to version 14 where TypeScript usage is more familiar.

[jbaumgarten]

Hi @Jiralite,
Thx for the guide. It has some changes with the V14 and it's a bit better.
However, the TextInputStyle still remains a problem.

I changed my source code with the information read in the guide (https://v13.discordjs.guide/interactions/modals.html#building-and-responding-with-modals) and with your info:

src/slashcommands/set_postal_address.ts:17:23 - error TS2345: Argument of type 'TextInputStyles.SHORT' is not assignable to parameter of type 'TextInputStyle'.

17             .setStyle(Constants.TextInputStyles.SHORT)
                         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/slashcommands/set_postal_address.ts:26:23 - error TS2345: Argument of type '"SHORT"' is not assignable to parameter of type 'TextInputStyle'.

26             .setStyle('SHORT')

[Jiralite]

I believe in version 13, it is better to import Modal and TextInputComponent from discord.js (as shown in the guide) and not from builders. Can you try that?

[jbaumgarten]

Oh man I'm ashamed, I missed that part of the guide. I was sure I made all changes...
Thx for your help