question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

using the typescript definitions in an app

See original GitHub issue

Description

Typescript typings for incoming events could be extremely helpful in developing an app, however the current typings seem a bit confusing to use. Are there any examples that show how to use the slack typings on these basic events inside our own apps?

Then I would be able to get intellisense on all the fields that are getting passed in the request.

eg I was trying to add types on the incoming message event, I created my own ISlackEvent interface and was going to gradually type it.

    app.message(/.*/, async (slackEvent: ISlackEvent) => {
No overload matches this call.
  Overload 1 of 2, '(actionId: string | RegExp, ...listeners: Middleware<SlackActionMiddlewareArgs<SlackAction>>[]): void', gave the following error.
    Argument of type '(slackEvent: ISlackEvent) => Promise<void>' is not assignable to parameter of type 
'Middleware<SlackActionMiddlewareArgs<SlackAction>>'.
      Types of parameters 'slackEvent' and 'args' are incompatible.
        Type 'SlackActionMiddlewareArgs<SlackAction> & AllMiddlewareArgs' is missing the following 
properties from type 'ISlackEvent': message, store, sessionId
  Overload 2 of 2, '(constraints: ActionConstraints<SlackAction>, ...listeners: Middleware<SlackActionMiddlewareArgs<SlackAction>>[]): void', gave the following error.
    Type 'RegExp' has no properties in common with type 'ActionConstraints<SlackAction>'.

Which is fair enough since ISlackEvent was my naive type I was going to start adding fields to. So then researching what there might be…

The message event signature:

    message(...listeners: Middleware<SlackEventMiddlewareArgs<'message'>>[]): void;

Then digging into those Middleware, I can’t really see a simple description of the incoming payload.

export interface SlackEventMiddlewareArgs<EventType extends string = string> {
    payload: EventFromType<EventType>;

...

declare type EventFromType<T extends string> = KnownEventFromType<T> extends never ? BasicSlackEvent<T> : KnownEventFromType<T>;

eventually I get to this humdinger:

export declare type SlackEvent = AppRequestedEvent | AppHomeOpenedEvent | AppMentionEvent | AppUninstalledEvent | ChannelArchiveEvent | ChannelCreatedEvent | ChannelDeletedEvent | ChannelHistoryChangedEvent | ChannelLeftEvent | ChannelRenameEvent | ChannelSharedEvent | ChannelUnarchiveEvent | ChannelUnsharedEvent | DNDUpdatedEvent | DNDUpdatedUserEvent | EmailDomainChangedEvent | EmojiChangedEvent | FileChangeEvent | FileCommentDeletedEvent | FileCreatedEvent | FileDeletedEvent | FilePublicEvent | FileSharedEvent | FileUnsharedEvent | GridMigrationFinishedEvent | GridMigrationStartedEvent | GroupArchiveEvent | GroupCloseEvent | GroupDeletedEvent | GroupHistoryChangedEvent | GroupLeftEvent | GroupOpenEvent | GroupRenameEvent | GroupUnarchiveEvent | IMCloseEvent | IMCreatedEvent | IMHistoryChangedEvent | IMOpenEvent | InviteRequestedEvent | LinkSharedEvent | MemberJoinedChannelEvent | MemberLeftChannelEvent | MessageEvent | PinAddedEvent | PinRemovedEvent | ReactionAddedEvent | ReactionRemovedEvent | StarAddedEvent | StarRemovedEvent | SubteamCreated | SubteamMembersChanged | SubteamSelfAddedEvent | SubteamSelfRemovedEvent | SubteamUpdatedEvent | TeamDomainChangedEvent | TeamJoinEvent | TeamRenameEvent | TokensRevokedEvent | UserChangeEvent;

ahh hmm ok.

So maybe this is the nature of adding typings to a huge API after the fact, but it’s quite hard to use these typings to assisting app development. eg related to #587

What type of issue is this? (place an x in one of the [ ])

  • bug
  • enhancement (feature request)
  • question
  • documentation related
  • testing related
  • discussion

Requirements (place an x in each of the [ ])

  • I’ve read and understood the Contributing guidelines and have done my best effort to follow them.
  • I’ve read and agree to the Code of Conduct.
  • I’ve searched for any related issues and avoided creating a duplicate issue.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
seratchcommented, Aug 21, 2020

I may not fully understand your intention here but just for type-safety, you don’t need to maintain your own type definitions. In other words, you cannot do so as long as you use Bolt.

If you want AllMiddlewareArgs to be exposed, I do empathize that it’ll be beneficial for TypeScript developers. But apart from the limitation, you can already take advantage of Bolt’s types without any hurdles.

Screen Shot 2020-08-21 at 15 00 59
import { SlackEventMiddlewareArgs } from '@slack/bolt';

app.message("foo", async (args: SlackEventMiddlewareArgs<'message'>) => {
  const event = args.event;
  console.log(event);
});

app.message("foo", async ({ event }) => {
  console.log(event);
});
1reaction
dcsancommented, Aug 21, 2020

this maybe worth adding to the docs somewhere.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Surviving the TypeScript Ecosystem — Part 4 - Medium
Using Type Definitions ​​ The solution is to make a type definition file. A type definition file is a file that ends in...
Read more >
TypeScript: JavaScript With Syntax For Types.
TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale. Try TypeScript Now. Online or...
Read more >
TypeScript: Adding Custom Type Definitions for Existing ...
Whether or not a library has type definitions is a big factor in deciding whether I'll use it. You can find the type...
Read more >
Using type definitions (TypeScript tutorial, #9) - YouTube
Use existing JavaScript frameworks like jQuery in your TypeScript projects. Type definitions bring great autocomplete to libraries and ...
Read more >
TypeScript Definitions & JavaScript API Library - GetStream.io
Let's begin with a quick primer on the language and highlight why Type Definitions are of interest. TypeScript is a modern programming ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found