knocklabs / javascript

Official JavaScript packages for interacting with Knock
https://knock.app/
MIT License
15 stars 3 forks source link

Typescript types are incompatible with example preference center docs #153

Closed MisterJimson closed 1 month ago

MisterJimson commented 2 months ago

The docs here explain how to build a preference center with example code: https://docs.knock.app/in-app-ui/react/preferences#completed-preference-center

If you put this code into any typescript project you will see it littered with type errors. This is ignoring the client setup at the stop and adding type annotations to the javascript.

Example: This section is incompatible as WorkflowPreferenceSetting can be a bool or an object.

    // from docs

    //Here we'll make updates to the preference set based on the preferenceType
    // and override existing channelTypeSettings
    if (preferenceType === 'category') {
      preferenceUpdate.categories[preferenceKey].channel_types =
        channelTypeSettings;
    }
    if (preferenceType === 'workflow') {
      preferenceUpdate.workflows[preferenceKey].channel_types =
        channelTypeSettings;
    }
// from types

export type WorkflowPreferenceSetting =
  | boolean
  | { channel_types: ChannelTypePreferences };

This results in Property 'channel_types' does not exist on type 'false'

There are a couple other examples if you simple try to follow the docs in a Typescript project.

As an aside, I'm surprised there isn't a pre-built preference center like in Novu.

JEverhart383 commented 1 month ago

Thanks for the feedback here @MisterJimson, we updated that section of the docs to better accommodate the WorkflowPreferenceSetting type in a better way and crosslinked a full TS example we created in another project. We've also heard the feedback about a pre-built preference center component and have that on our roadmap. I added your feedback to the product brief we have open for that component. Thanks for the suggestions and checking out Knock

solojungle commented 1 month ago

I'm having an issue with the updated code from the article provided during build time. Does not show up with linter.

Type error: Object is possibly 'undefined'.

  144 |             typeof preferenceUpdate.categories[preferenceKey] === "object"
  145 |         ) {
> 146 |             preferenceUpdate.categories[preferenceKey].channel_types =
      |             ^
  147 |                 channelTypeSettings;
  148 |         }
  149 |         if (