रस्ट और वेबअसेंबली के साथ सबसे सहज डेवलपर अनुभव की खोज करें। यह आपके रस्ट कोड से टाइपस्क्रिप्ट परिभाषाओं को स्वतः उत्पन्न करने का सबसे तेज़ तरीका है।  इस आलेख में  💡 हम सीखेंगे कि आधिकारिक रस्ट और WebAssembly टूलचैन टाइपस्क्रिप्ट के लिए पर्याप्त क्यों नहीं हैं।  🤹 मैं आपको दिखाऊंगा कि कैसे अपने रस्ट कोड में न्यूनतम परिवर्तन के साथ टाइपस्क्रिप्ट परिभाषा को ऑटो-जेनरेट करें।  🧪 हम एक साथ npm पर वास्तविक दुनिया की WebAssembly लाइब्रेरी को रिफ्लेक्टर करेंगे।  चल दर।  वासम-बिंडजेन के साथ टाइपिंग की समस्या  रस्ट में WebAssembly (WASM) मॉड्यूल के लिए टाइपस्क्रिप्ट प्रकार बनाना सीधा नहीं है।  मैं समस्या में भाग गया जब मैं वासम में एक वेक्टर समानता खोज इंजन पर काम कर रहा था जिसे   कहा जाता था। मैंने सिमेंटिक खोज के लिए स्विस चाकू के साथ जावास्क्रिप्ट और टाइपस्क्रिप्ट इंजीनियरों को प्रदान करने के लिए रस्ट में वासम इंजन का निर्माण किया। यहाँ वेब के लिए एक डेमो है:  वॉय  आप   पा सकते हैं! इसे ट्राय करने के लिए स्वतंत्र महसूस करें। गिटहब पर वॉय की रिपॉजिटरी  रिपॉजिटरी में ऐसे   शामिल हैं जिन्हें आप देख सकते हैं कि विभिन्न रूपरेखाओं में वॉय का उपयोग कैसे करें। उदाहरण  मैंने   और   उपयोग वास कोड को बनाने और संकलित करने के लिए किया था। उत्पन्न टाइपस्क्रिप्ट परिभाषाएँ इस तरह दिखती हैं: वास-पैक वास-बाइंडजेन का   /* tslint:disable */ /* eslint-disable */ /** * @param {any} input * @returns {string} */ export function index(resource: any): string /** * @param {string} index * @param {any} query * @param {number} k * @returns {any} */ export function search(index: string, query: any, k: number): any  जैसा कि आप देख सकते हैं, बहुत सारे "कोई भी" प्रकार हैं, जो डेवलपर अनुभव के लिए बहुत उपयोगी नहीं हैं। क्या हुआ यह जानने के लिए आइए रस्ट कोड देखें।   type NumberOfResult = usize; type Embeddings = Vec<f32>; type SerializedIndex = String; #[derive(Serialize, Deserialize, Debug)] pub struct EmbeddedResource { id: String, title: String, url: String, embeddings: Embeddings, } #[derive(Serialize, Deserialize, Debug)] pub struct Resource { pub embeddings: Vec<EmbeddedResource>, } #[wasm_bindgen] pub fn index(resource: JsValue) -> SerializedIndex { /* snip */ } #[wasm_bindgen] pub fn search(index: &str, query: JsValue, k: NumberOfResult) -> JsValue { // snip }  स्ट्रिंग, स्लाइस और अहस्ताक्षरित पूर्णांक ने टाइपस्क्रिप्ट में सही प्रकार उत्पन्न किए, लेकिन "   " नहीं किया। JsValue एक JavaScript वस्तु का wasm-bindgen का प्रतिनिधित्व है। wasm_bindgen::JsValue  हम JsValue को   ताकि इसे जावास्क्रिप्ट और जंग के बीच वासम के माध्यम से आगे और पीछे पारित किया जा सके। क्रमबद्ध और deserialize करते हैं   #[wasm_bindgen] pub fn index(resource: JsValue) -> String { // 💡 Deserialize JsValue in to Resource struct in Rust let resource: Resource = serde_wasm_bindgen:from_value(input).unwrap(); // snip } #[wasm_bindgen] pub fn search(index: &str, query: JsValue, k: usize) -> JsValue { // snip // 💡 Serialize search result into JsValue and pass it to WebAssembly let result = engine::search(&index, &query, k).unwrap(); serde_wasm_bindgen:to_value(&result).unwrap() }  डेटा प्रकारों को परिवर्तित करने के लिए यह आधिकारिक दृष्टिकोण है, लेकिन जाहिर है, हमें टाइपस्क्रिप्ट का समर्थन करने के लिए अतिरिक्त मील जाने की जरूरत है।  Tsify के साथ ऑटो-जेनरेट टाइपस्क्रिप्ट बाइंडिंग  डेटा प्रकारों को एक भाषा से दूसरी भाषा में परिवर्तित करना वास्तव में एक सामान्य पैटर्न है जिसे   (FFI) कहा जाता है। मैंने रस्ट स्ट्रक्चर्स से टाइपस्क्रिप्ट परिभाषाओं को ऑटो-जेनरेट करने के लिए   जैसे एफएफआई टूल्स की खोज की, लेकिन यह समाधान का केवल आधा था। विदेशी फ़ंक्शन इंटरफ़ेस टाइपशेयर  हमें जो चाहिए वह वासम संकलन में टैप करने और वासम मॉड्यूल के एपीआई के लिए प्रकार की परिभाषा उत्पन्न करने का एक तरीका है। इस कदर:   #[wasm_bindgen] pub fn index(resource: Resource) -> SerializedIndex { /* snip */ } #[wasm_bindgen] pub fn search(index: SerializedIndex, query: Embeddings, k: NumberOfResult) -> SearchResult { // snip }  सौभाग्य से,   उपयोग के मामले के लिए एक अद्भुत ओपन-सोर्स लाइब्रेरी है। हमें केवल "Tsify" विशेषता से प्राप्त करना है, और #[tsify] मैक्रो को structs में जोड़ना है: Tsify   type NumberOfResult = usize; type Embeddings = Vec<f32>; type SerializedIndex = String; #[derive(Serialize, Deserialize, Debug, Clone, Tsify)] #[tsify(from_wasm_abi)] pub struct EmbeddedResource { pub id: String, pub title: String, pub url: String, pub embeddings: Embeddings, } #[derive(Serialize, Deserialize, Debug, Tsify)] #[tsify(from_wasm_abi)] pub struct Resource { pub embeddings: Vec<EmbeddedResource>, } #[derive(Serialize, Deserialize, Debug, Clone, Tsify)] #[tsify(into_wasm_abi)] pub struct Neighbor { pub id: String, pub title: String, pub url: String, } #[derive(Serialize, Deserialize, Debug, Clone, Tsify)] #[tsify(into_wasm_abi)] pub struct SearchResult { neighbors: Vec<Neighbor>, } #[wasm_bindgen] pub fn index(resource: Resource) -> SerializedIndex { /* snip */ } #[wasm_bindgen] pub fn search(index: SerializedIndex, query: Embeddings, k: NumberOfResult) -> SearchResult { // snip }  इतना ही! आइए "from_wasm_abi" और "into_wasm_abi" विशेषताओं पर एक नज़र डालें।   दोनों विशेषताएँ रस्ट डेटा प्रकार को टाइपस्क्रिप्ट परिभाषा में बदल देती हैं। वे जो अलग तरीके से करते हैं वह वास के एप्लिकेशन बाइनरी इंटरफेस (एबीआई) के साथ डेटा प्रवाह की दिशा है।    : डेटा जंग से जावास्क्रिप्ट में प्रवाहित होता है। वापसी प्रकार के लिए प्रयुक्त। into_wasm_abi    : डेटा JavaScript से Rust में प्रवाहित होता है। मापदंडों के लिए उपयोग किया जाता है। from_wasm_abi  जंग और जावास्क्रिप्ट के बीच डेटा रूपांतरण को लागू करने के लिए दोनों विशेषताएँ सर्द-वासम-बाइंडजेन का उपयोग करती हैं।  हम वासम मॉड्यूल बनाने के लिए तैयार हैं। एक बार जब आप "wasm-pack बिल्ड" चलाते हैं, तो ऑटो-जेनरेट की गई टाइपस्क्रिप्ट परिभाषा:   /* tslint:disable */ /* eslint-disable */ /** * @param {Resource} resource * @returns {string} */ export function index(resource: Resource): string /** * @param {string} index * @param {Float32Array} query * @param {number} k * @returns {SearchResult} */ export function search( index: string, query: Float32Array, k: number ): SearchResult export interface EmbeddedResource { id: string title: string url: string embeddings: number[] } export interface Resource { embeddings: EmbeddedResource[] } export interface Neighbor { id: string title: string url: string } export interface SearchResult { neighbors: Neighbor[] }  सभी "किसी भी" प्रकारों को उन इंटरफेस से बदल दिया जाता है जिन्हें हमने रस्ट कोड✨ में परिभाषित किया था  अंतिम विचार  उत्पन्न प्रकार अच्छे लगते हैं, लेकिन कुछ विसंगतियाँ हैं। यदि आप बारीकी से देखते हैं, तो आप देखेंगे कि खोज फ़ंक्शन में क्वेरी पैरामीटर को फ़्लोट32एरे के रूप में परिभाषित किया गया है।  क्वेरी पैरामीटर को एंबेडेड रिसोर्स में "एम्बेडिंग" के समान प्रकार के रूप में परिभाषित किया गया है, इसलिए मैं उनसे टाइपस्क्रिप्ट में समान प्रकार की अपेक्षा करता हूं।  यदि आप जानते हैं कि वे विभिन्न प्रकारों में क्यों परिवर्तित होते हैं, तो कृपया   में पहुंचने या पुल अनुरोध खोलने में संकोच न करें। गिटहब पर Voy    WebAssembly में एक ओपन-सोर्स सिमेंटिक सर्च इंजन है। मैंने इसे दुनिया भर के लोगों के लिए सिमेंटिक सुविधाओं के निर्माण और बेहतर उपयोगकर्ता अनुभव बनाने के लिए और अधिक परियोजनाओं को सशक्त बनाने के लिए बनाया है। वॉय कई डिजाइन सिद्धांतों का पालन करता है: वॉय  🤏   : सीमित उपकरणों के लिए ओवरहेड कम करें, जैसे धीमे नेटवर्क वाले मोबाइल ब्राउज़र या IoT। अति सूक्ष्म  🚀   : उपयोगकर्ताओं के लिए सर्वश्रेष्ठ खोज अनुभव बनाएँ। तेज़  🌳   : बंडल आकार का अनुकूलन करें और वेब वर्कर्स जैसे आधुनिक वेब एपीआई के लिए अतुल्यकालिक क्षमताओं को सक्षम करें। ट्री शेकेबल  🔋   : कहीं भी, कभी भी पोर्टेबल एंबेडिंग इंडेक्स जेनरेट करें। फिर से शुरू करने योग्य  ☁️   : सीडीएन एज सर्वर पर सिमेंटिक सर्च करें। दुनिया भर में  यह एनपीएम पर उपलब्ध है। आप बस इसे अपने पसंदीदा पैकेज मैनेजर से स्थापित कर सकते हैं, और आप जाने के लिए तैयार हैं।   # with npm npm i voy-search # with Yarn yarn add voy-search # with pnpm pnpm add voy-search  इसे आज़माएं और मुझे आपकी बात सुनकर खुशी हुई!  संदर्भ    - विकिपीडिया विदेशी फ़ंक्शन इंटरफ़ेस    - गिटहब सर्द-वासम-बिंदगेन    - गिटहब स्पेक्ट्रा    - wasm-bindgen संरचना wasm_bindgen::JsValue    - रस्ट एंड वेबअसेंबली द रस्ट एंड वेबअसेंबली बुक    - गिटहब टीएस-आरएस    - गिटहब त्सिफी    - गिटहब टाइपशेयर    - गिटहब वॉय    - रस्ट और WebAssembly wasm-bindgen    - रस्ट और WebAssembly wasm-pack    - डॉव-चिह लिउ WASM सिमेंटिक सर्च इन रस्ट    - WebAssembly.org वेबअसेंबली   कनेक्ट करना चाहते हैं?   यह लेख मूल रूप से   पर पोस्ट किया गया था। Daw-Chih की वेबसाइट

2022 - HackerNoon Contributor of the Year - Leadership

2022 - HackerNoon Contributor of the Year - Learning

2022 - HackerNoon Contributor of the Year - Product Management

2022 - HackerNoon Contributor of the Year - Software Engineering

2022 - HackerNoon Contributor of the Year - Typescript

Coding Guru of 2022

Check out my website!

Nominated for 2022 - HackerNoon Contributor of the Year - Product Management

Nominated for 2022 - HackerNoon Contributor of the Year - Typescript

Nominated for 2022 - HackerNoon Contributor of the Year - Leadership

Nominated for 2022 - HackerNoon Contributor of the Year - Software Engineering

Nominated for Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Learning

यह ऑडियो कहानी की मूल भाषा में निर्मित है!

बहुत लंबा; पढ़ने के लिए

Make resilience your competitive advantage

30 सेकंड में WebAssembly के लिए टाइपस्क्रिप्ट के साथ जंग के प्रकारों को कैसे साझा करें: एक त्वरित गाइड

30 सेकंड में WebAssembly के लिए टाइपस्क्रिप्ट के साथ जंग के प्रकारों को कैसे साझा करें: एक त्वरित गाइड

About Author

टिप्पणियाँ

लेबल

इस लेख में चित्रित किया गया था

Related Stories

इन 18 डेवलपर टूल के साथ अपनी उत्पादकता बढ़ाएँ 🚀🔥

फ्लोकी का वल्लाह भारत के श्रीलंका दौरे के लिए सहयोगी प्रायोजक के रूप में शामिल हुआ

क्लाउड सॉनेट 3.5 सिस्टम प्रॉम्प्ट लीक: एक फोरेंसिक विश्लेषण

HackerNoon लेखन प्रतियोगिता जीतना चाहते हैं? #crypto-api प्रतियोगिता के विजेताओं की सलाह यहाँ पढ़ें

इन 18 डेवलपर टूल के साथ अपनी उत्पादकता बढ़ाएँ 🚀🔥

फ्लोकी का वल्लाह भारत के श्रीलंका दौरे के लिए सहयोगी प्रायोजक के रूप में शामिल हुआ

क्लाउड सॉनेट 3.5 सिस्टम प्रॉम्प्ट लीक: एक फोरेंसिक विश्लेषण

HackerNoon लेखन प्रतियोगिता जीतना चाहते हैं? #crypto-api प्रतियोगिता के विजेताओं की सलाह यहाँ पढ़ें

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps