انتقل إلى المحتوى
Numio

تحويل TypeScript إلى أنواع Flow — Numio

يحوّل تعريفات أنواع TypeScript إلى أنواع Flow باستخدام flowgen. يصبح readonly علامة التباين +، وتصبح الدوال والأصناف المُصدَّرة "declare export"، وتصبح قيم enum كائنات دقيقة للقراءة فقط.

تنشر مكتبة TypeScript وتريد أيضًا توفير تعريفات Flow للمستخدمين الذين يعتمدون على Flow.

TypeScript

Flow

متى تستخدمها

  • تنشر مكتبة TypeScript وتريد أيضًا توفير تعريفات Flow للمستخدمين الذين يعتمدون على Flow.
  • تعتمد قاعدة شيفرة Flow على حزمة لا تملك سوى أنواع .d.ts وتحتاج إلى libdef تبدأ منه.

طريقة الاستخدام

  1. الصق تعريفات TypeScript (واجهات، أنواع، عبارات declare، قيم enum) أو وحدة تحتوي على شيفرة تنفيذ في لوحة TypeScript.
  2. تُرسَل الشيفرة إلى /api/typescript-to-flow. الشيفرة التي تحتوي على أجسام دوال أو مُهيِّئات يختزلها مترجم TypeScript أولًا إلى .d.ts؛ ثم يحوّلها flowgen وينسّقها.
  3. انسخ ناتج Flow، وضعه في مجلد flow-typed أو ملف .js.flow، وشغّل flow للتحقق منه.

TypeScript

export type Theme = "light" | "dark";

export interface ButtonProps {
  label: string;
  theme?: Theme;
  readonly disabled: boolean;
  onClick(event: MouseEvent): void;
}

export declare function render(props: ButtonProps): string;
export enum Size { Small, Large }

Flow

export type Theme = "light" | "dark";
export interface ButtonProps {
  label: string;
  theme?: Theme;
  +disabled: boolean;
  onClick(event: MouseEvent): void;
}
declare export function render(props: ButtonProps): string;

declare export var Size: {|
  +Small: 0, // 0
  +Large: 1, // 1
|};

التفاصيل والقيود

ترسل الصفحة مدخلاتك إلى مسار على الخادم (/api/typescript-to-flow) لتحويلها؛ فهي لا تُعالَج في المتصفح فقط. تقبل مسارات API في Next.js افتراضيًا أجسام طلبات حتى 1 ميغابايت.

تُترجَم شيفرة التنفيذ أولًا إلى تعريفات، فلا يبقى منها إلا واجهتها المحددة الأنواع: تختفي الأجسام، وتُملأ أنواع الإرجاع المستنتَجة، وتُحذف القيم غير المُصدَّرة التي لا يستخدمها أي تصدير.

تصبح أسماء الأنواع المستعارة للكائنات كائنات Flow غير دقيقة تنتهي بـ "..."؛ وتبقى الواجهات واجهات.

تصبح قيم enum الرقمية كائنًا دقيقًا مُعلَنًا من قيم حرفية للقراءة فقط، مثل +Small: 0.

FAQ

كيف تُحوَّل خصائص readonly؟

يصبح readonly disabled: boolean إلى +disabled: boolean، وهي علامة الخاصية المتغايرة (للقراءة فقط) في Flow.

هل يمكنني لصق ملف .ts كامل يحتوي على تنفيذات؟

نعم. يُنشئ الخادم التعريفات أولًا، فتحصل الدالة السهمية غير المحددة النوع على نوعها المستنتَج، مثل declare export var greet: (u: User) => string. ويُبلَّغ عن الأخطاء النحوية بدلًا من تحويلها.

هل قيم enum في TypeScript مدعومة؟

نعم، بالشكل declare export var Name: {| +Member: value |}. لا تُنشأ Flow enums.

المواصفات والمراجع