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

متى تستخدمها

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

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

1. الصق شيفرة Flow في لوحة Flow.
2. تُرسَل إلى /api/flow-to-typescript وتُحوَّل على الخادم باستخدام flow-to-ts؛ ولا توجد إعدادات.
3. انسخ TypeScript، واحفظه بصيغة .ts أو .tsx، وشغّل tsc لإصلاح ما لم يستطع التحويل ترجمته.

// @flow
import type { Node } from 'react';

export type User = {|
  +id: number,
  name: ?string,
  roles: $ReadOnlyArray<string>,
|};

export function greet(user: User): string {
  return `Hi ${user.name ?? 'guest'}`;
}

export const render = (title: string): Node => null;

import type { Node } from "react"
export type User = {
  readonly id: number
  name: string | null | undefined
  roles: ReadonlyArray<string>
}
export function greet(user: User): string {
  return `Hi ${user.name ?? "guest"}`
}
export const render = (title: string): Node => null

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

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

تفقد أنواع الكائنات الدقيقة {| |} دقتها لأن TypeScript لا يملك كائنات دقيقة، ويصبح +prop إلى readonly.

تبقى أنواع Flow المساعدة مثل $ReadOnly و$Keys بأسمائها وتُستورد من حزمة npm utility-types، التي ستحتاج إلى تثبيتها.

يُزال الموجِّه // @flow وتُعاد طباعة الشيفرة. تبقى استيرادات أنواع React مثل Node كما كُتبت، لذا أعد تسميتها بنفسك (مثل ReactNode).

FAQ

أدوات ذات صلة

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

• flow-to-ts on GitHub
• Flow documentation