"यदि कोई कर्मचारी अपना काम अच्छी तरह से करना चाहता है, तो उसे पहले अपने औजारों को तेज करना होगा।" - कन्फ्यूशियस, "द एनालेक्ट्स ऑफ कन्फ्यूशियस। लू लिंगगोंग"
मुखपृष्ठ > प्रोग्रामिंग > प्रकार से परे सुरक्षा: टाइपस्क्रिप्ट रनटाइम चयनकर्ता इन-डेप्थ एनालिसिस

प्रकार से परे सुरक्षा: टाइपस्क्रिप्ट रनटाइम चयनकर्ता इन-डेप्थ एनालिसिस

2025-03-12 को पोस्ट किया गया
ब्राउज़ करें:403

Beyond Type Safety: making TypeScript smarter by Building a Runtime Picker

] मैं सिर्फ अपने अनुभव और इसे बनाने से पहले जो यात्रा कर रहा हूं, उसे साझा कर रहा हूं। ( लेकिन हे

, यदि आप उत्सुक हैं, तो यहाँ पैकेज का लिंक है?)।

कैसे टाइपस्क्रिप्ट ने मुझे एक नए विचार (और एक पैकेज) के लिए प्रेरित किया

चलो थोड़ा रिवाइंड करें। इसलिए, मैं अभी कुछ समय के लिए टाइपस्क्रिप्ट के साथ काम कर रहा हूं। मैं अपने आप को एक टाइपस्क्रिप्ट प्रो नहीं कहूंगा, लेकिन मैंने कुछ बड़ी परियोजनाएं बनाई हैं और अपनी कंपनी में इसके साथ काम किया है। आप जानते हैं, सामान्य -कुछ "हैलो वर्ल्ड" परियोजनाएं, कुछ अधिक जटिल हैं, और निश्चित रूप से, Google को यात्राओं का एक उचित हिस्सा यह पता लगाने के लिए कि "इस त्रुटि का क्या मतलब है?" या "मैं फिर से एक इंटरफ़ेस से फ़ील्ड कैसे चुनूं?" (तुम समझ गए। ?)

एक दिन, मैं फायरबेस क्लाउड कार्यों के साथ काम करते हुए एक मुद्दे में भाग गया। मैं createuser समापन बिंदु पर था, अपना सत्यापन तर्क लिख रहा था, डेटा को ट्रिमिंग कर रहा था, और सामान्य CRUD अनुरोध पागलपन को संभाल रहा था। जब तक मैं पिछले डेवलपर से कोड के इस टुकड़े में भाग गया, तब तक सब कुछ सुचारू रूप से आगे बढ़ रहा था:

]

... और मेरे आंतरिक टाइपस्क्रिप्ट प्रो चिल्ला रहा था। ? ] सही? अनफ़िल्टर्ड उपयोगकर्ता डेटा को सीधे इस तरह से डालना जोखिम भरा था - क्या अगर अनुरोध डेटा कुछ सत्यापन को याद कर रहा था और हमने डेटाबेस में अवांछित फ़ील्ड डालने का अंत किया? महान नहीं है।
मैंने जल्दी से कोड हटा दिया, लेकिन फिर, मैं एक सेकंड के लिए जम गया। ? मैंने अपनी स्क्रीन पर यह सोचकर देखा: "अगर मैं सिर्फ उपयोगकर्ता इंटरफ़ेस प्रकार के लिए अनुरोध करता हूं, तो पकड़ो, अगर मैं टाइपस्क्रिप्ट मुझे इस तरह से कुछ करने से नहीं रोकता, तो क्या यह समस्या को ठीक नहीं करना चाहिए?" (मेरी आईडीई पर एक आशावादी नज़र, लाल स्क्विगली लाइनों के प्रकट होने की प्रतीक्षा कर रहा है।)

] यह केवल एक संकलन-समय की जाँच है, है ना? यह रनटाइम में मौजूद नहीं है। टाइपस्क्रिप्ट प्रकार की सुरक्षा के लिए एक मुखौटा है, लेकिन यह वास्तव में कोड के चलने पर कुछ भी लागू नहीं करता है। यह वास्तव में
firebase.collection("users").add(request.data.user);
अतिरिक्त फ़ील्ड को रनटाइम पर डालने से रोकना है।

]

// सभी वर्णमाला अक्षरों के साथ ऑब्जेक्ट const अक्षर = { A: 'Apple', B: 'केला', C: 'चेरी', D: 'दिनांक', E: 'बैंगन', F: 'अंजीर', // ... जेड के लिए सभी तरह }; // इंटरफ़ेस जो केवल 'ए' और 'बी' की अनुमति देता है इंटरफ़ेस onlyTwoletters { एक स्ट्रिंग; बी: स्ट्रिंग; } // कास्टिंग अक्षर केवल totwoletters के लिए const filterdalphabets = अक्षर केवल twoletters के रूप में; कंसोल.लॉग (filterdalphabets); ] लानत है। मैं जानता था। मैं आशा के प्रभाव में था -

उम्मीद कर रहा था

कि टाइपस्क्रिप्ट जादुई रूप से मुझे रनटाइम पर गलतियाँ करने से रोक सकता है। ?

] क्या होगा यदि हम किसी वस्तु को किसी विशिष्ट इंटरफ़ेस में डाल सकते हैं और टाइपस्क्रिप्ट

स्वचालित रूप से को बाहर निकाल सकते हैं जो किसी भी गुण को इंटरफ़ेस में परिभाषित नहीं किया गया है?

कि

मेरी समस्या को हल करेगा।

// Object with all alphabet letters
const alphabets = {
  a: 'Apple',
  b: 'Banana',
  c: 'Cherry',
  d: 'Date',
  e: 'Eggplant',
  f: 'Fig',
  // ... all the way to z
};

// Interface that only allows 'a' and 'b'
interface OnlyTwoLetters {
  a: string;
  b: string;
}

// Casting alphabets to OnlyTwoLetters
const filteredAlphabets = alphabets as OnlyTwoLetters;

console.log(filteredAlphabets);

टीएस-रंटाइम-पिकर का जन्म

] यदि मैं उपयोगकर्ता इंटरफ़ेस में अनुरोध कर सकता हूं। ?

] लक्ष्य सरल था: एक पैकेज बनाएं जो टाइपस्क्रिप्ट उपयोगकर्ताओं को किसी ऑब्जेक्ट से अवांछित गुणों को फ़िल्टर करने की अनुमति देगा, जो एक विशिष्ट इंटरफ़ेस में परिभाषित फ़ील्ड के आधार पर है। श्रेष्ठ भाग? यह मुझे मैनुअल सत्यापन और फ़ील्ड के फ़िल्टरिंग से बचाएगा। के दिन थे:

] नाम: requestdata.name, आयु: requestdata.age, }; FireBase.Collection ("उपयोगकर्ता")। जोड़ें (फ़िल्टर्डडाटा); // अधिक काम, कम मज़ा।

यह कैसे काम करता है: टाइपस्क्रिप्ट अपना काम करते हैं ] आप किसी ऑब्जेक्ट को इंटरफ़ेस में डाल सकते हैं, और पैकेज यह सुनिश्चित करेगा कि केवल इंटरफ़ेस में परिभाषित गुणों को रखा जाए। यहां बताया गया है कि यह एक्शन में कैसे काम करता है:


से पहले: मैनुअल सत्यापन

इंटरफ़ेस उपयोगकर्ता { नाम: स्ट्रिंग; आयु: संख्या; } const requestData = {नाम: 'जॉन', आयु: 30, पता: '123 स्ट्रीट'}; // मैन्युअल रूप से जांचें और अवांछित फ़ील्ड को हटा दें: const filteredData = { नाम: requestdata.name, आयु: requestdata.age, }; FireBase.Collection ('उपयोगकर्ता')। जोड़ें (फ़िल्टर्डडाटा); // बहुत सुरुचिपूर्ण नहीं है।

के बाद: ts-runtime-picker

के साथ

] इंटरफ़ेस उपयोगकर्ता { नाम: स्ट्रिंग; आयु: संख्या; } const requestData = {नाम: 'जॉन', आयु: 30, पता: '123 स्ट्रीट'}; // स्वचालित रूप से गैर-मौजूद गुणों को फ़िल्टर करें: const safedata = पिक (requestData, उपयोगकर्ता); FireBase.Collection ('उपयोगकर्ता')। ADD (SAFEDATA); // बहुत क्लीनर! श्रेष्ठ भाग? यह कोड डिफ़ॉल्ट रूप से

सुरक्षित

है। मैनुअल चेक या ऑब्जेक्ट हेरफेर की कोई आवश्यकता नहीं है। TS-runtime-Picker उपयोगकर्ता इंटरफ़ेस में मौजूद सभी क्षेत्रों को फ़िल्टर करके आपके लिए स्वचालित रूप से इसे संभालता है। आप आकस्मिक क्षेत्र सम्मिलन के बारे में चिंता किए बिना बस अपने मुख्य तर्क पर ध्यान केंद्रित कर सकते हैं। ?

// Object with all alphabet letters
const alphabets = {
  a: 'Apple',
  b: 'Banana',
  c: 'Cherry',
  d: 'Date',
  e: 'Eggplant',
  f: 'Fig',
  // ... all the way to z
};

// Interface that only allows 'a' and 'b'
interface OnlyTwoLetters {
  a: string;
  b: string;
}

// Casting alphabets to OnlyTwoLetters
const filteredAlphabets = alphabets as OnlyTwoLetters;

console.log(filteredAlphabets);

आलस्य की शक्ति (और यह कैसे नवाचार को जन्म दे सकती है)

तो, आप सोच रहे होंगे: "क्या यह सरासर आलस्य से निकला था?" और उस के लिए, मैं कहता हूं: हाँ, लेकिन यह भी, नहीं।

?

] लेकिन हे, कभी -कभी आलस्य से प्रतिभा होती है! चीजों को आसान बनाने की इच्छा नवाचार के लिए एक प्रेरक शक्ति हो सकती है।

] हाँ, यह सही है। ?

लेकिन यह कभी -कभी कैसे होता है। "आवश्यकता आविष्कार को जन्म देती है," और इसे थकाऊ दोहरावदार चेक से बचने की जरूरत है, जिससे एक नया समाधान हुआ, जिसने अंततः मेरे जीवन (और उम्मीद है कि कई अन्य लोगों के जीवन) को बहुत आसान बना दिया। ] और यह कि कभी -कभी,

अटक या आलसी होने के कारण
interface User {
  name: string;
  age: number;
}

const requestData = { name: 'John', age: 30, address: '123 Street' };

// Manually check and remove unwanted fields:
const filteredData = {
  name: requestData.name,
  age: requestData.age,
};

firebase.collection('users').add(filteredData);  // Not very elegant.

निष्कर्ष

import { pick } from 'ts-runtime-picker';

interface User {
  name: string;
  age: number;
}

const requestData = { name: 'John', age: 30, address: '123 Street' };

// Automatically filters out non-existent properties:
const safeData = pick(requestData, User);

firebase.collection('users').add(safeData);  // Much cleaner!
] इसके बारे में चिंता करने के लिए एक कम बात है, और यह टाइपस्क्रिप्ट के साथ काम करना थोड़ा अधिक होशियार बनाता है। ?

विज्ञप्ति वक्तव्य इस लेख को पुन: प्रस्तुत किया गया है: https://dev.to/hichemtab-tech/beyond-type-safety-making-typescript-smarter-by-building-a-runtime-picker-26d5?1 यदि कोई उल्लंघन है, तो कृपया इसे हटाने के लिए [email protected] पर संपर्क करें।
नवीनतम ट्यूटोरियल अधिक>

चीनी भाषा का अध्ययन करें

अस्वीकरण: उपलब्ध कराए गए सभी संसाधन आंशिक रूप से इंटरनेट से हैं। यदि आपके कॉपीराइट या अन्य अधिकारों और हितों का कोई उल्लंघन होता है, तो कृपया विस्तृत कारण बताएं और कॉपीराइट या अधिकारों और हितों का प्रमाण प्रदान करें और फिर इसे ईमेल पर भेजें: [email protected] हम इसे आपके लिए यथाशीघ्र संभालेंगे।

Copyright© 2022 湘ICP备2022001581号-3