संरचित स्ट्रिंग का मॉडल बनाना
इवेंट नामों और रूट पथों जैसे प्रारूप लागू करें।
संरचित स्ट्रिंग का मॉडल बनाना, CoddyKit पर TypeScript Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह TypeScript Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। TypeScript Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
स्ट्रिंग प्रारूप लागू करना
वास्तविक ऐप में कई स्ट्रिंगें किसी संरचना का पालन करती हैं: इवेंट हैंडलर नाम, API मार्ग पथ और CSS चर। टेम्पलेट लिटरल प्रकार आपको इन प्रारूपों का मॉडल बनाने देते हैं, ताकि कंपाइलर उन्हें लागू कर सके।
इवेंट हैंडलर नामों का मॉडल बनाना
हैंडलर नाम अक्सर on और बड़े प्रथमाक्षर वाले इवेंट से बना होता है। टेम्पलेट में अंतर्निहित Capitalize सहायक का उपयोग करने पर इवेंट 'click' हैंडलर नाम 'onClick' में बदल जाता है।
type Event = "click" | "focus"
// template: on followed by Capitalize of Event
// => "onClick" | "onFocus"
const h: "onClick" | "onFocus" = "onClick"
console.log(h)यहाँ Capitalize महत्वपूर्ण क्यों है
Capitalize के बिना टेम्पलेट 'onclick' बनाएगा। यह अंतर्निहित प्रकार लिटरल के पहले वर्ण को बड़े अक्षर में बदलता है, जिससे स्वाभाविक camelCase हैंडलर नाम बनते हैं।
type E = "scroll"
type Cap = Capitalize<E> // "Scroll"
const c: "Scroll" = "Scroll"
console.log(c)हैंडलर मानचित्र बनाना
हैंडलरों का वस्तु प्रकार बनाने के लिए टेम्पलेट लिटरल कुंजियों को मैप किए गए प्रकार के साथ मिलाएँ — प्रत्येक इवेंट के लिए सही अक्षर-विन्यास वाला एक प्रकारित फ़ंक्शन।
type Events = "click" | "hover"
type Handlers = {
[E in Events as "on" extends string ? "on" : never]?: () => void
}
// In practice the key uses a template: on + Capitalize<E>
const h: { onClick?: () => void } = {}
console.log(h)मार्ग पथों का मॉडल बनाना
API मार्गों की संरचना में अक्सर शुरुआती स्लैश, संसाधन और आईडी खंड होते हैं। स्थिर पाठ को स्थानधारक के साथ मिलाने वाला टेम्पलेट मान्य पथों को दर्शाता है।
type Resource = "users" | "posts"
// template: /api/ followed by Resource
// => "/api/users" | "/api/posts"
const path: "/api/users" | "/api/posts" = "/api/users"
console.log(path)पैरामीटर वाले पथ
गतिशील आईडी के लिए स्थानधारक जोड़ें। स्लैश, संसाधन, स्लैश और फिर जेनेरिक आईडी खंड वाला टेम्पलेट ऐसे पथों का मॉडल बनाता है जिनमें users पथ के बाद संख्यात्मक आईडी आती है।
type Id = number
// template: /users/ followed by Id-like segment
function userPath(id: number): string {
return "/users/" + id
}
console.log(userPath(42)) // /users/42संकलन समय पर प्रारूप लागू करना
किसी पैरामीटर को टेम्पलेट लिटरल प्रकार के रूप में प्रकारित करके, आप उस संरचना में फिट न होने वाली हर स्ट्रिंग को अस्वीकार कर देते हैं — गलत मार्गों या कुंजियों के विरुद्ध एक सुरक्षा उपाय।
type Method = "GET" | "POST"
function call(endpoint: "GET /users" | "POST /users") {
return endpoint
}
console.log(call("GET /users"))
// call("DELETE /users") // Error
console.log("ok")CSS चर नामों का संयोजन
CSS कस्टम गुण एक नामकरण योजना का पालन करते हैं। दो शुरुआती डैश और टोकन स्थानधारक वाला टेम्पलेट color टोकन वाले चर जैसे नामों का मॉडल बनाता है।
type Token = "primary" | "accent"
// template: --color- followed by Token
// => "--color-primary" | "--color-accent"
const v: "--color-primary" | "--color-accent" = "--color-accent"
console.log(v)अनुमान के साथ विभाजन
टेम्पलेट लिटरल प्रकार विश्लेषण भी कर सकते हैं: सशर्त प्रकारों और infer की सहायता से आप प्रकार स्तर पर संरचित स्ट्रिंग के हिस्से निकालते हैं — उदाहरण के लिए, endpoint स्ट्रिंग से विधि निकालना।
type ExtractMethod<S> = S extends "GET /users" ? "GET" : "OTHER"
type M = ExtractMethod<"GET /users"> // "GET"
const m: "GET" = "GET"
console.log(m)वास्तविक दुनिया में लाभ
संरचित-स्ट्रिंग प्रकार बग की पूरी श्रेणियाँ पकड़ लेते हैं: गलत वर्तनी वाला हैंडलर नाम, अज्ञात मार्ग या गलत CSS टोकन — ये सभी बिना सूचना वाली रनटाइम विफलताओं के बजाय संकलन त्रुटियाँ बन जाते हैं।
type Tab = "home" | "profile"
// template: tab- followed by Tab => "tab-home" | "tab-profile"
function selectTab(id: "tab-home" | "tab-profile") { return id }
console.log(selectTab("tab-home"))इन्हें पठनीय बनाए रखें
शक्तिशाली होने के बावजूद, बहुत गहराई तक नेस्टेड टेम्पलेट प्रकार पठनीयता को नुकसान पहुँचाते हैं। मध्यवर्ती प्रकार उपनामों को नाम दें, ताकि अगला पाठक संरचना को स्पष्ट रूप से समझ सके।
type Entity = "user" | "order"
// type EventName = on + Capitalize<Entity> + Created
// e.g. "onUserCreated" | "onOrderCreated"
const e: "onUserCreated" | "onOrderCreated" = "onUserCreated"
console.log(e)त्वरित जाँच
संरचित स्ट्रिंगों का मॉडल बनाने की अपनी समझ का परीक्षण करें।
पुनरावलोकन
टेम्पलेट लिटरल प्रकार संरचित स्ट्रिंगों — हैंडलर नाम (on + किसी इवेंट का Capitalize), मार्ग पथ और CSS चर — का मॉडल बनाते हैं और संकलन समय पर उन प्रारूपों को लागू करते हैं। मैप किए गए प्रकारों के साथ मिलकर वे हैंडलर मानचित्र बनाते हैं, और सशर्त प्रकारों तथा infer के साथ स्ट्रिंगों का विश्लेषण करते हैं। जटिल पैटर्न को पठनीय बनाए रखने के लिए मध्यवर्ती उपनामों को नाम दें।
एआई शिक्षक के साथ TypeScript सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 101
- पाठ
- 352
अक्सर पूछे जाने वाले प्रश्न
क्या “संरचित स्ट्रिंग का मॉडल बनाना” पाठ निःशुल्क है?
हाँ—“संरचित स्ट्रिंग का मॉडल बनाना” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और TypeScript Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। TypeScript Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“संरचित स्ट्रिंग का मॉडल बनाना” में मैं क्या सीखूँगा?
इवेंट नामों और रूट पथों जैसे प्रारूप लागू करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ TypeScript Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या TypeScript Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर TypeScript Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।
“संरचित स्ट्रिंग का मॉडल बनाना” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस TypeScript Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर TypeScript Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- टेम्पलेट शाब्दिक प्रकार की मूल बातें
- संरचित स्ट्रिंग का मॉडल बनाना
- स्ट्रिंग यूनियन और ऑटो-कम्प्लीशन
- अंतर्निहित स्ट्रिंग हेरफेर प्रकार