[LINEbot]TypeScriptでクイックリプライ機能を使用するのに時間がかかった話

###TypeScriptでクイックリプライ機能を実装するのに時間がかかった話

###はじめに
TypescriptでLINEbotを開発していたのですがクイックリプライ機能を実装するのに思いの外時間がかかったので共有したいと思います.

###実装したいこと

SendMessage.ts

// Load the package
import { Client, WebhookEvent } from "@line/bot-sdk";

// Load the module
import { QuickReplyButton } from "../template/button/QuickReplyButton";

export const SendMessage = async (
  client: Client,
  event: WebhookEvent
): Promise<void> => {
  try {
    if (event.type !== "message" || event.message.type !== "text") {
      return;
    }

    const { replyToken } = event;
    const { text } = event.message;

    if (text === "予定") {
      // 問題点
      await client.replyMessage(replyToken, QuickReplyButton());
    } else {
    }
  } catch (e: unknown) {
    console.log(e);
  }
};

QuickReplyButton.ts

// load the package
import { QuickReply } from "@line/bot-sdk";

export const QuickReplyButton = (): QuickReply => {
  return {
    items: [
      {
        type: "action",
        action: {
          type: "message",
          label: "今日の予定を教えて!",
          text: "今日の予定を教えて!",
        },
      },
      {
        type: "action",
        action: {
          type: "message",
          label: "明日の予定を教えて!",
          text: "明日の予定を教えて!",
        },
      },
      {
        type: "action",
        action: {
          type: "message",
          label: "来週の予定を教えて!",
          text: "来週の予定を教えて!",
        },
      },
    ],
  };
};

"予定"と送信するとクイックリプライが表示されるのを期待したのですがエラーが起きてしまいました.

###エラー内容

型 'QuickReply' の引数を型 'Message | Message[]' のパラメーターに割り当てることはできません。

###原因

{
  type: 'text',
  text: 'ここにテキストが入る'
}

このような構造のObjectがないからエラーが発生していた.
では,型はどうすればよいのか?

###試したこと

line/bot-sdkの型定義ファイルを調べていると以下が見つかった.

node_modules/@line/bot-sdk/dist/types.d.ts

export declare type MessageCommon = {
   quickReply?: QuickReply;
   sender?: Sender;
};
export declare type TextMessage = MessageCommon & {
   type: "text";
   text: string;
      emojis?: {
           index: number;
           productId: string;
           emojiId: string;
      }[];
};

この型定義からTextMessageにはquickReplyの型も含まれており,typeとtextを入れれば動くと思うので

QuickReplyButton.ts

// load the package
import { TextMessage } from "@line/bot-sdk";

export const QuickReplyButton = (): TextMessage => {
  return {
    type: "text",
    text: "いつの予定が知りたいですか?",
    quickReply: {
      items: [
        {
          type: "action",
          action: {
            type: "message",
            label: "今日の予定を教えて!",
            text: "今日の予定を教えて!",
          },
        },
        {
          type: "action",
          action: {
            type: "message",
            label: "明日の予定を教えて!",
            text: "明日の予定を教えて!",
          },
        },
        {
          type: "action",
          action: {
            type: "message",
            label: "来週の予定を教えて!",
            text: "来週の予定を教えて!",
          },
        },
      ],
    },
  };
};

このように変更し,実行すると無事に動作出来ました!!!

###最後に
型定義ファイルは偉大でした

###参照
・クイックリプライを使う
・最近知ったMessaging APIの複数メッセージ送信機能 - Qiita