ريأكت جي إس - مشكلة تايب سكريبت مع ترحيل ستوري بوك إلى CSF

بعد ترحيل أكثر من 50 قصة إلى CSF، لم تظهر في القصة. بعد بعض البحث، اكتشفت أنني اضطررت إلى تمرير مفتاح المكون إلى التصدير الافتراضي مع المكون كقيمته

export default {
title: "Title"
component: MyComponent
}

المشكلة هي أن جميع مكوناتي تستخدم تايب سكريبت ولسبب ما هناك خطأ:

التصدير الافتراضي للوحدة يحتوي على أو يستخدم اسمًا خاصًا 'MyComponentProps'.ts(4082)

أي مساعدة في هذا ستكون محل تقدير كبير.

الإجابة رقم 1

يمكنك إما تغيير الخصائص الخاصة بهم إلى type بدلاً من interface، كما اقترح @Mayank، أو يمكنك ببساطة التأكد من تصدير خصائصهم.

مثال :

interface Props {
  name: string;
}

const ({ name }: Props) => {
  return <div>{name}</div>;
}

سيؤدي هذا الرمز إلى ظهور الخطأ TS4082 الذي تحصل عليه إذا حاولت إنشاء قصة لهذا المكون.

إذا قمت بتصدير الواجهة:

export interface Props {
  name: string;
}

const ({ name }: Props) => {
  return <div>{name}</div>;
}

سيختفي الخطأ.

الإجابة رقم 2

أفترض أنك قد عرّفت واجهة لـ MyComponentProps. حاول تحويلها إلى إعلان نوع. لقد حل هذا المشكلة بالنسبة لي.