Improve the example code in README to be TypeScript compatible (#1515)

README.md

@@ -91,8 +91,11 @@ The arguments are grouped into properties of one object, so that it's easier to
 ```js
 // Reverse all messages the app can hear
 app.message(async ({ message, say }) => {
-  const reversedText = [...message.text].reverse().join("");
-  await say(reversedText);
+  // Filter out message events with subtypes (see https://api.slack.com/events/message)
+  if (message.subtype === undefined || message.subtype === 'bot_message') {
+    const reversedText = [...message.text].reverse().join("");
+    await say(reversedText);
+  }
 });
 ```
 

examples/getting-started-typescript/src/app.ts

@@ -2,7 +2,6 @@
 /* eslint-disable import/no-internal-modules */
 import './utils/env';
 import { App, LogLevel } from '@slack/bolt';
-import { isGenericMessageEvent } from './utils/helpers';
 
 const app = new App({
   token: process.env.SLACK_BOT_TOKEN,
@@ -11,38 +10,35 @@ const app = new App({
 });
 
 app.use(async ({ next }) => {
-  // TODO: This can be improved in future versions
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  await next!();
+  await next();
 });
 
 // Listens to incoming messages that contain "hello"
 app.message('hello', async ({ message, say }) => {
   // Filter out message events with subtypes (see https://api.slack.com/events/message)
-  // Is there a way to do this in listener middleware with current type system?
-  if (!isGenericMessageEvent(message)) return;
-
-  // say() sends a message to the channel where the event was triggered
-  await say({
-    blocks: [
-      {
-        type: 'section',
-        text: {
-          type: 'mrkdwn',
-          text: `Hey there <@${message.user}>!`,
-        },
-        accessory: {
-          type: 'button',
+  if (message.subtype === undefined || message.subtype === 'bot_message') {
+    // say() sends a message to the channel where the event was triggered
+    await say({
+      blocks: [
+        {
+          type: 'section',
           text: {
-            type: 'plain_text',
-            text: 'Click Me',
+            type: 'mrkdwn',
+            text: `Hey there <@${message.user}>!`,
+          },
+          accessory: {
+            type: 'button',
+            text: {
+              type: 'plain_text',
+              text: 'Click Me',
+            },
+            action_id: 'button_click',
           },
-          action_id: 'button_click',
         },
-      },
-    ],
-    text: `Hey there <@${message.user}>!`,
-  });
+      ],
+      text: `Hey there <@${message.user}>!`,
+    });
+  }
 });
 
 app.action('button_click', async ({ body, ack, say }) => {

examples/getting-started-typescript/src/basic.ts

@@ -3,10 +3,6 @@
 /* eslint-disable import/no-internal-modules */
 import './utils/env';
 import { App, LogLevel, subtype, BotMessageEvent, BlockAction } from '@slack/bolt';
-import {
-  isGenericMessageEvent,
-  isMessageItem,
-} from './utils/helpers';
 
 const app = new App({
   token: process.env.SLACK_BOT_TOKEN,
@@ -19,9 +15,9 @@ const app = new App({
  */
 // This will match any message that contains 👋
 app.message(':wave:', async ({ message, say }) => {
-  if (!isGenericMessageEvent(message)) return;
-
-  await say(`Hello, <@${message.user}>`);
+  if (message.subtype === undefined || message.subtype === 'bot_message') {
+    await say(`Hello, <@${message.user}>`);
+  }
 });
 
 /**
@@ -35,7 +31,7 @@ app.message('knock knock', async ({ say }) => {
 // Sends a section block with datepicker when someone reacts with a 📅 emoji
 app.event('reaction_added', async ({ event, client }) => {
   // Could be a file that was reacted upon
-  if (event.reaction === 'calendar' && isMessageItem(event.item)) {
+  if (event.reaction === 'calendar' && event.item.type === 'message') {
     await client.chat.postMessage({
       text: 'Pick a reminder date',
       channel: event.item.channel,