تايبسكريبت - لا يمكن إعادة تصدير نوع عند استخدام --isolatedModules مع TS 3.2.2


ربما أحتاج إلى إعادة التفكير في الطريقة التي نهيكل بها مكونات React الخاصة بنا. نحن نستخدم أحدث react-scripts التي تسمح باستخدام Typescript وبشكل افتراضي، يتم تمكين isolatedModules وهو ما يزعجني حاليًا قليلاً.

كنا نرتب مكونًا بهذا الشكل:

Component
|_ Component.tsx
|_ index.ts
|_ types.ts
  • Component.tsx يحتوي على المكوّن الفعلي بدون التصريحات
  • index.ts يعيد تصدير كل شيء فقط حتى نتمكن من الحصول على نقطة دخول واحدة ويمكننا القيام بشيء مثل import Component, { ComponentType } from '@/Component';

  • types.ts يحتوي على تعريفات الأنواع الفعلية ويصدر معظمها أو كلها.

حتى الآن الأمور على ما يرام ويعمل ذلك دون isolatedModules. ومع ذلك، نقوم أيضًا بتصدير بعض تعريفات الأنواع، مما يعني إعادة تصدير الواجهات التي تم تحديدها داخل Component/types.ts. هذا لن يعمل حيث إن TypeScript نفسه لن يقوم بتحويل الكود بعد الآن.

كيف يمكنني إعادة التصدير هذا دون وجود جملة استيراد منفصلة تتجه إلى @/Component/types (التي قد تكون في الواقع الطريقة الأبسط على أي حال)؟

الإجابة رقم 1

TS 3.8+

يمكنك استخدام الاستيراد والتصدير لنوع البيانات فقط مع --isolatedModules:

// types.ts
export type MyType = { a: string; b: number; };
// main.ts 

// named import/export
import type { MyType } from './types'
export type { MyType }

// re-export
export type { MyType } from './types'

// namespace import
import type * as MyTypes from "./types";
export type RenamedType = MyTypes.MyType;
export { MyTypes };

//     ^ Note the "type" keyword in statements above

ملعب المثال؛ ألق نظرة على طلب الدمج لأشكال التوسعة المقترحة والاقتراحات.

TS 3.7 أو أقدم

في الإصدارات السابقة، ما يلي غير ممكن:

import { MyType } from './types'; 
export { MyType }; // error: Cannot re-export a type with --isolatedModules

export { MyType } from "./types"; // error, like above

يجب على إعادة تصدير الأنواع استخدام حل بديل:

import { MyType as MyType_ } from "./types";
export type MyType = MyType_;

// or
export * from "./types"

الإجابة رقم 2

أنا أستخدم نفس البنية شخصيًا وواجهت نفس المشكلة بعد الانتقال إلى قالب create-react-app الذي يفرض isolatedModules. أحد الحلول المؤقتة الذي يبدو أنه يعمل على عكس الفكرة وراء isolatedModules هو استخدام export * from "./Component"; في index.ts.