TypeScript warning with TabContent example

[nstuyvesant]

Getting a TypeScript warning in VS Code "Argument of type 'string' is not assignable to parameter of type 'never'.ts(2345)" and "Property 'detail' does not exist on type 'never'.ts(2339)" for the <TabContent on:tab={(e) => (status = e.detail)}> line in the template when using TypeScript.

<script lang="ts">
  import { TabContent, TabPane } from 'sveltestrap';

  let status = 'alpha';
</script>

<h5>Current state: {status}</h5>
<TabContent on:tab={(e) => (status = e.detail)}>
  <TabPane tabId="alpha" tab="Alpha" active>
    <h2>Alpha</h2>
  </TabPane>
  <TabPane tabId="bravo" tab="Bravo">
    <h2>Bravo</h2>
  </TabPane>
  <TabPane tabId="charlie" tab="Charlie">
    <h2>Charlie</h2>
  </TabPane>
</TabContent>

Tried typing the tab event handler...

<script lang="ts">
  import { TabContent, TabPane } from 'sveltestrap';

  let status = 'alpha';
  const tabClickHandler = (e: CustomEvent) => { status = <string> e.detail };
</script>

<h5>Current state: {status}</h5>
<TabContent on:tab={tabClickHandler}>
  <TabPane tabId="alpha" tab="Alpha" active>
    <h2>Alpha</h2>
  </TabPane>
  <TabPane tabId="bravo" tab="Bravo">
    <h2>Bravo</h2>
  </TabPane>
  <TabPane tabId="charlie" tab="Charlie">
    <h2>Charlie</h2>
  </TabPane>
</TabContent>

but get warning on the same line: "Argument of type 'string' is not assignable to parameter of type 'never'.ts(2345)".

Curious whether you think this is an issue in the Svelte for VS Code extension or somewhere else.

[bestguy]

Hmm, thanks. Let me see if I can repro

[bestguy]

Actually, I think I know what's missing - we need the tab event here: https://github.com/bestguy/sveltestrap/blob/master/src/TabContent.d.ts#L11

I'll include in the next release this week, thanks for the catch.

[nstuyvesant]

Fantastic - thanks for checking on it!

[bestguy]

Will do release shortly in next day or two

[bestguy]

Should be good in v5.6.0 please confirm & close when you get a chance.

[nstuyvesant]

Thanks - sveltestrap@5.6.0 resolved this.