Using typescript for template args

[jimmy-e]

Hi all! How can I leverage typescript to accurately detect what my args should be?

E.g. if my interface is:

interface Question {
  fieldType: string;
  question: string;
  id: string;
}

in the below component, I'm currently not getting any errors stating that I'm missing the id field for the DefaultQuestionCard template. Thanks!

import React from 'react';
// eslint-disable-next-line import/no-extraneous-dependencies
import { Meta } from '@storybook/react/types-6-0';
import QuestionCard from '../QuestionCard';
import { Question } from '../../types';

export default {
  title: 'Question Cards',
} as Meta;

const Template: React.FC<Question> = (props) => <QuestionCard {...props} />;

export const DefaultQuestionCard = Template.bind({});
DefaultQuestionCard.args = {
  fieldType: 'text',
  question: 'Lorem ipsum dolor sit amet?',
};

[shilman]

Try:

import { Meta, Story } from '@storybook/react/types-6-0';
...
const Template: Story<Question> = (props) => <QuestionCard {...props} />;

export const DefaultQuestionCard = Template.bind({});
DefaultQuestionCard.args = {
  fieldType: 'text',
  question: 'Lorem ipsum dolor sit amet?',
};

[jimmy-e]

unfortunately I'm not seeing any difference.

[anki247]

@shilman DefaultQuestionCard.args is still type of any! So there is no type support when using Args ...?!
Or do I miss something? 😕

[shilman]

If the args annotation is not typed by Story<Question> then you need to run typescript in strict mode

https://discord.com/channels/486522875931656193/490070912448724992/773894059588583444