टेम्पलेट लिटरल टाइप्स: कंपाइल टाइम पर गणना की गई स्ट्रिंग्स

कार्तीय गुणनफल के माध्यम से यूनियन उत्पन्न करने और infer के साथ स्ट्रिंग लिटरल्स को पार्स करने के लिए टेम्पलेट लिटरल टाइप्स का लाभ उठाएं।

9 मिनट · 3 प्रश्न

टेम्पलेट लिटरल टाइप्स, टेम्पलेट लिटरल सिंटैक्स को टाइप्स की दुनिया में लाते हैं। एक यूनियन को इंटरपोलेट करें और कंपाइलर कार्तीय गुणनफल (Cartesian product) की गणना करता है: हर संभव संयोजन परिणाम का एक सदस्य बन जाता है। यही वह उपकरण है जो आपको इवेंट कीज़, रूट्स, या डिज़ाइन-सिस्टम टोकन्स को अक्षर-दर-अक्षर टाइप करने देता है।

type Lang = "fr" | "en";
type Theme = "light" | "dark";

type ThemeKey = `${Lang}-${Theme}`;
// "fr-light" | "fr-dark" | "en-light" | "en-dark"

असली ताकत तब सामने आती है जब इसे infer के साथ मिलाया जाता है: एक टेम्पलेट लिटरल टाइप स्ट्रिंग्स पर एक मैचिंग पैटर्न बन जाता है। कंपाइलर प्रत्येक खंड से मेल खाने के लिए इनपुट लिटरल को काटता है; जब कई विभाजन संभव हों, तो विभाजक की पहली घटना जीतती है। रिकर्शन जोड़ें और आपको कंपाइल टाइम पर मूल्यांकित होने वाले असली पार्सर मिल जाते हैं।

type Split<S extends string, Sep extends string> =
  S extends `${infer Head}${Sep}${infer Rest}`
    ? [Head, ...Split<Rest, Sep>]
    : [S];

type Parts = Split<"a.b.c", ".">;
// ["a", "b", "c"]

यह पैटर्न तब चमकता है जब Express-शैली के रूट के पैरामीटर निकाले जाते हैं। प्रत्येक रिकर्सिव कॉल एक :param खंड को उपभोग करती है, और अंतिम यूनियन हर पैरामीटर नाम को सूचीबद्ध करता है, जिसे आप फिर हैंडलर के सिग्नेचर को टाइप करने के लिए एक Record में डाल सकते हैं।

type Params<Path extends string> =
  Path extends `${string}:${infer P}/${infer Rest}`
    ? P | Params<Rest>
    : Path extends `${string}:${infer P}`
      ? P
      : never;

type RouteParams = Params<"/users/:id/posts/:postId">;
// "id" | "postId"

TypeScript चार इंट्रिन्सिक (intrinsic) यूटिलिटीज़ के साथ आता है - Uppercase, Lowercase, Capitalize, Uncapitalize - जो सीधे कंपाइलर के अंदर लागू की गई हैं (intrinsic कीवर्ड), इसलिए आप उन्हें स्वयं दोबारा नहीं लिख सकते। एक और प्रोडक्शन पैटर्न: string & {}। एक यूनियन में, string लिटरल्स को अवशोषित कर लेता और एडिटर ऑटोकंप्लीशन खो देता; {} के साथ इंटरसेक्ट करने से एक समतुल्य लेकिन अलग टाइप बनता है जिसे कंपाइलर कम नहीं करता।

type Method = "get" | "post";
type Handler = `on${Capitalize<Method>}`;
// "onGet" | "onPost"

type KnownColor = "red" | "green" | "blue";
type Color = KnownColor | (string & {});

declare function paint(color: Color): void;

paint("red");     // suggested by autocompletion
paint("#ff8800"); // also accepted

ज्ञान जांच

सुनिश्चित करें कि आपको इस पाठ के मुख्य बिंदु याद हैं।

1. यदि A में 3 सदस्य हों और B में 4, तो ${A}-${B} में कितने सदस्य होते हैं?
   • 7
   • 12
   • 1
   • 4
2. लिटरल "hello world" पर लागू होने पर Capitalize क्या उत्पन्न करता है?
   • "Hello World"
   • "Hello world"
   • "HELLO WORLD"
3. KnownColor | string के बजाय KnownColor | (string & {}) क्यों लिखें?
   • KnownColor के बाहर की स्ट्रिंग्स को मना करने के लिए
   • string को लिटरल्स को अवशोषित करने से रोकने और ऑटोकंप्लीशन बनाए रखने के लिए
   • कंपाइलर प्रदर्शन सुधारने के लिए
   • दोनों रूप कड़ाई से समतुल्य हैं