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

تحويل Flow إلى JavaScript — Numio

يزيل التعليقات التوضيحية لأنواع Flow لإنتاج JavaScript خالص باستخدام إضافة Babel flow-strip-types. تُزال استيرادات الأنواع فقط والأسماء المستعارة للأنواع، ثم تنسّق الصفحة النتيجة باستخدام Prettier.

تزيل Flow من مشروع وتريد JavaScript الخالص أولًا، قبل أن تقرر الانتقال إلى TypeScript.

Flow

JavaScript

متى تستخدمها

  • تزيل Flow من مشروع وتريد JavaScript الخالص أولًا، قبل أن تقرر الانتقال إلى TypeScript.
  • تحتاج إلى لصق مقتطف محدد الأنواع بـ Flow في مكان لا يقبل إلا JavaScript القياسية، مثل وحدة تحكم المتصفح أو codepen.

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

  1. الصق شيفرة مزوّدة بتعليقات أنواع Flow (مع ترويسة // @flow أو بدونها) في لوحة Flow.
  2. تُرسَل الشيفرة إلى /api/flow-to-javascript، حيث يحلّلها recast بمحلّل Flow ويزيل Babel الأنواع.
  3. انسخ JavaScript من لوحة الناتج.

Flow

// @flow
import type { Store } from './store';
import { createStore } from './store';

type State = { count: number };

export function first<T>(items: Array<T>): ?T {
  return items.length ? items[0] : null;
}

const store: Store<State> = createStore(({ count: 0 }: State));

export default store;

JavaScript

import { createStore } from "./store"

export function first(items) {
  return items.length ? items[0] : null
}

const store = createStore({
  count: 0,
})

export default store

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

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

تُزال الأنواع فقط. لا تُحوَّل الصياغة الحديثة مثل JSX أو ?? أو حقول الأصناف.

يُعاد تنسيق النتيجة باستخدام Prettier (علامات اقتباس مزدوجة، بلا فواصل منقوطة)، فلا يُحفظ الأسلوب الأصلي، ويفقد تحويل النوع مثل ({ count: 0 }: State) أقواسه الإضافية.

يُزال تعليق // @flow الملحق بتعريف نوع محذوف معه.

FAQ

هل يبقى JSX؟

نعم. يُحلَّل JSX ويُمرَّر دون تغيير، لذا ما زلت تحتاج إلى تحويل JSX لتشغيل النتيجة.

ماذا يحدث لعبارات import type؟

تُزال بالكامل. وتبقى الاستيرادات العادية كما هي.

هل يحتاج الناتج إلى Flow أو Babel ليعمل؟

لا حاجة إلى Flow. لكن إذا استخدمت المدخلات JSX أو صياغة جديدة، فيجب أن تدعمها بيئة التشغيل أو أداة التجميع لديك.

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