نوع آبجکت از روی نوع رشته در تایپ اسکریپت

رسانیکامنبع: https://rasanika.com

با ترکیب infer و template literal ها در تایپ اسکریپت می‌توانیم از روی یک رشته، نوع یک آبجکت را به دست آوریم. برای مثال فرض کنید کلاس های مختلفی مثل background-green-500 یا text-red-700 داریم که برای استایل دهی استفاده می‌کنیم. با تعریف تایپ زیر می‌توانیم بخش های مختلف این رشته را جدا کرده و یک آبجکت معنا دار بسازیم:

type InferValueFromColor<Color extends string> =
  Color extends `${infer N}-${infer C}-${infer T}`
    ? { namespace: N; color: C; tone: T }
    : never;

به این صورت می‌توانیم استفاده کنیم:

type Example = InferValueFromColor<"background-green-500">;
// = { namespace: "background"; color: "green"; tone: "500"; }

اگر بعدا مرتکب اشتباه شویم تایپ اسکریپت از طریق never به ما اخطار می‌دهد:

type Example2 = InferValueFromColor<"green-500">;
// = never

حتی می‌توانیم infer را محدودتر کنیم مثلا infer N extends "background" | "text" در مثال بالا فقط اجازه استفاده از دو مقدار background یا text را در قسمت اول رشته می‌دهد.

type InferValueFromColor<Color extends string> =
  Color extends `${infer N extends "background" | "text"}-${infer C}-${infer T}`
    ? { namespace: N; color: C; tone: T }
    : never;

type Example = InferValueFromColor<"background-green-500">;
// = { namespace: "background"; color: "green"; tone: "500"; }

type Example2 = InferValueFromColor<"border-green-500">;
// = never