‏Flow؛ تایپ‌چکری که شبیه TypeScript شده

تو این صفحه اومده که Flow، تایپ‌چکر جاوااسکریپت، انقدر سینتکسش به TypeScript نزدیک شده که به‌سختی می‌شه از هم تشخیصشون داد. Flow حالا keyof، پراپرتی‌های readonly، تایپ unknown، دسترسی ایندکسی T[K] و کران‌های جنریک با extends رو داره. علاوه بر اینا conditional types، mapped types و type guards هم پشتیبانی می‌شن.

هدف این نزدیکی اینه که جابه‌جایی کد بین دو ابزار راحت‌تر بشه؛ کسی که با TypeScript کار کرده تقریباً بدون یاد گرفتن چیز جدید می‌تونه Flow رو بخونه و بنویسه. این تیکه کد نشون می‌ده که چطور یه تابع جنریک با keyof و indexed access نوشته می‌شه:

type User = {
  readonly name: string,
  readonly age: number,
  readonly metadata: unknown,
};
function get<K extends keyof User>(user: User, key: K): User[K] {
  return user[key];
}

بخش متمایزکنندهٔ اصلی Flow پشتیبانی درجه‌یک از React‌ه. component و renders جزو خود سینتکس زبونن. props به‌شکل پارامترهای نام‌دار تعریف می‌شن و همون‌جا به‌صورت inline و با مقدار پیش‌فرض تایپ می‌شن، برای همین دیگه یه آبجکت props جدا نداری که بخوای annotate یا destructure کنی.

مزیت کلیدی renders اینه که ترکیب‌بندی کامپوننت‌ها رو به قانون تایپ تبدیل می‌کنه. اگه یه prop از نوع renders Header باشه، فقط کامپوننتی که واقعاً Header رو رندر می‌کنه می‌تونه توش قرار بگیره. این کد نشون می‌ده که پاس دادن Footer به‌جای Header چطور به یه ارور تایپ تبدیل می‌شه:

component Header(text: string = "Title") { return <h1>{text}</h1> }
component Footer() { return <footer /> }
component Layout(header: renders Header) {
  return <div>{header}</div>;
}
<Layout header={<Header />} />; // OK
<Layout header={<Footer />} />; // ERROR: doesn't render Header

معنی عملی‌ش اینه که قوانین ترکیب دیزاین‌سیستم به‌جای این‌که موقع ریویو کد به‌عنوان باگ گیر بیفتن، همون لحظهٔ تایپ‌چک به‌شکل ارور دیده می‌شن. این جلوی خیلی از اشتباه‌های چیدمان کامپوننت رو قبل از اجرا می‌گیره.

نکات کلیدی:

• Flow حالا سینتکس‌های آشنای TypeScript مثل keyof، readonly، unknown و indexed access رو داره تا انتقال کد راحت باشه
• component و renders جزو خود سینتکس Flow هستن و نیازی به تعریف جدای آبجکت props نیست
• با renders Header فقط کامپوننتی که واقعاً Header رو رندر می‌کنه قبول می‌شه، و بقیه به ارور تایپ تبدیل می‌شن
• قوانین ترکیب دیزاین‌سیستم از باگ زمان اجرا به ارور زمان تایپ‌چک تبدیل می‌شن