Rust ve WebAssembly ile en kusursuz geliştirici deneyimini keşfedin. Bu, Rust kodunuzdan TypeScript tanımlarını otomatik olarak oluşturmanın en hızlı yoludur.  Bu makalede  💡 Resmi Rust ve WebAssembly araç zincirinin TypeScript için neden yeterli olmadığını öğreneceğiz.  🤹 Rust kodunuzda minimum değişiklikle TypeScript tanımını nasıl otomatik olarak oluşturacağınızı göstereceğim.  🧪 Gerçek dünyadaki bir WebAssembly kütüphanesini npm'de birlikte yeniden düzenleyeceğiz.  Hadi gidelim.  Wasm-bindgen ile Yazma Sorunu  Rust'ta WebAssembly(Wasm) modülleri için TypeScript türleri oluşturmak kolay değildir.  Wasm'da   adında bir vektör benzerlik arama motoru üzerinde çalışırken bu sorunla karşılaştım. Wasm motorunu, JavaScript ve TypeScript mühendislerine anlamsal arama için İsviçre bıçağı sağlamak üzere Rust'ta geliştirdim. İşte web için bir demo:  Voy    bulabilirsiniz! Denemekten çekinmeyin. Voy'un deposunu GitHub'da  Depoda Voy'un farklı çerçevelerde nasıl kullanılacağını görebileceğiniz   yer alıyor. örnekler  Rust kodunu oluşturup Wasm'a derlemek için   ve   kullandım. Oluşturulan TypeScript tanımları şöyle görünür: wasm-pack wasm-bindgen'i   /* 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  Gördüğünüz gibi çok sayıda "herhangi" türü var ve bu, geliştirici deneyimi için pek yararlı değil. Ne olduğunu öğrenmek için Rust koduna bakalım.   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 }  Dize, dilim ve işaretsiz tamsayı TypeScript'te doğru türleri oluşturdu ancak "   " oluşturmadı. JsValue wasm-bindgen'in bir JavaScript nesnesini temsilidir. wasm_bindgen::JsValue  JsValue'yu, Wasm aracılığıyla JavaScript ve Rust arasında ileri geri aktarmak için   . seri hale getiriyoruz ve seri durumdan çıkarıyoruz   #[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() }  Veri türlerini dönüştürmek resmi yaklaşımdır, ancak açıkça TypeScript'i desteklemek için ekstra yol kat etmemiz gerekiyor.  Tsify ile TypeScript Bağlamayı Otomatik Oluştur  Veri türlerini bir dilden diğerine dönüştürmek aslında   (FFI) adı verilen yaygın bir kalıptır. Rust yapılarından TypeScript tanımlarını otomatik olarak oluşturmak için   gibi FFI araçlarını araştırdım, ancak bu, çözümün yalnızca yarısıydı. Yabancı işlev arayüzü Typeshare  İhtiyacımız olan şey, Wasm derlemesinden yararlanmanın ve Wasm modülünün API'si için tür tanımını oluşturmanın bir yoludur. Bunun gibi:   #[wasm_bindgen] pub fn index(resource: Resource) -> SerializedIndex { /* snip */ } #[wasm_bindgen] pub fn search(index: SerializedIndex, query: Embeddings, k: NumberOfResult) -> SearchResult { // snip }  Neyse ki   , kullanım durumu için harika bir açık kaynaklı kütüphanedir. Tek yapmamız gereken "Tsify" özelliğinden türetmek ve yapılara bir #[tsify] makrosu eklemek: 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 }  Bu kadar! "from_wasm_abi" ve "into_wasm_abi" niteliklerine bir göz atalım.   Her iki özellik de Rust veri türünü TypeScript tanımına dönüştürür. Farklı yaptıkları şey, Wasm'ın Uygulama İkili Arayüzü (ABI) ile veri akışının yönüdür.    : Veriler Rust'tan JavaScript'e akar. Dönüş türü için kullanılır. into_wasm_abi    : Veriler JavaScript'ten Rust'a akar. Parametreler için kullanılır. from_wasm_abi  Her iki özellik de Rust ve JavaScript arasındaki veri dönüşümünü uygulamak için serde-wasm-bindgen'i kullanır.  Wasm modülünü oluşturmaya hazırız. "Wasm-pack build"i çalıştırdığınızda, otomatik olarak oluşturulan TypeScript tanımı:   /* 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[] }  Tüm "herhangi" türler, Rust kodunda tanımladığımız arayüzlerle değiştirilir✨  Son düşünceler  Oluşturulan türler iyi görünüyor ancak bazı tutarsızlıklar var. Yakından bakarsanız, arama fonksiyonundaki sorgu parametresinin Float32Array olarak tanımlandığını fark edeceksiniz.  Sorgu parametresi EmbeddedResource'ta "gömmeler" ile aynı türde tanımlandığından TypeScript'te de aynı türe sahip olmalarını bekliyorum.  Neden farklı türlere dönüştürüldüklerini biliyorsanız, lütfen   ulaşmaktan veya bir çekme isteği açmaktan çekinmeyin. GitHub'daki Voy'a    , WebAssembly'deki açık kaynaklı bir anlamsal arama motorudur. Bunu, anlamsal özellikler geliştirmek ve dünyanın her yerindeki insanlar için daha iyi kullanıcı deneyimleri yaratmak amacıyla daha fazla projeye güç vermek için oluşturdum. Voy çeşitli tasarım ilkelerini takip eder: Voy  🤏   : Yavaş ağlara veya IoT'ye sahip mobil tarayıcılar gibi sınırlı cihazlar için yükü azaltın. Minik  🚀   : Kullanıcılar için en iyi arama deneyimini yaratın. Hızlı  🌳   : Paket boyutunu optimize edin ve Web Çalışanları gibi modern Web API'leri için eşzamansız yetenekleri etkinleştirin. Sarsılabilir Ağaç  🔋   : İstediğiniz zaman, istediğiniz yerde taşınabilir yerleştirme dizini oluşturun. Devam Edilebilir  ☁️   : CDN uç sunucularında anlamsal bir arama çalıştırın. Dünya çapında  Npm'de mevcuttur. Favori paket yöneticinizle kolayca kurabilirsiniz ve artık hazırsınız.   # with npm npm i voy-search # with Yarn yarn add voy-search # with pnpm pnpm add voy-search  Bir deneyin, sizden haber almaktan mutluluk duyuyorum!  Referanslar    - Vikipedi Yabancı fonksiyon arayüzü    - GitHub serde-wasm-bindgen    - GitHub Specta    - wasm-bindgen Yapı wasm_bindgen::JsValue    - Rust ve WebAssembly Rust ve WebAssembly Kitabı    - GitHub ts-rs    - GitHub Tsify    - GitHub Yazı Paylaşımı    - GitHub Voy    - Rust ve WebAssembly wasm-bindgen    - Rust ve WebAssembly wasm-pack    - Daw-Chih Liou Rust'ta WASM Semantik Arama    - WebAssembly.org WebAssembly   Bağlanmak mı istiyorsunuz?   Bu makale ilk olarak   yayınlanmıştır. Daw-Chih'in Web Sitesinde

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

Bu ses hikayenin orijinal dilinde üretilmiştir!

Çok uzun; Okumak

WebAssembly için Pas Türlerini TypeScript ile 30 Saniyede Paylaşma: Hızlı Kılavuz

WebAssembly için Pas Türlerini TypeScript ile 30 Saniyede Paylaşma: Hızlı Kılavuz

About Author

YORUMLAR

ETİKETLERİ ASIN

BU YAZI

Related Stories

HackerNoon Yazma Yarışmasını mı Kazanmak İstiyorsunuz? İşte #crypto-api Yarışması Kazananlarının Önerileri

Yapay Zekanın Gücünü Ortaya Çıkarıyoruz. En Son Tekniklerin Sistematik Bir İncelemesi: Özet ve Giriş

State of the Noonion: Building, Selling and Storytelling @ HackerNoon

Forumlardan Feed'lere: Sosyal Medya Algoritmaları Dijital Etkileşimi Nasıl Şekillendiriyor

HackerNoon Yazma Yarışmasını mı Kazanmak İstiyorsunuz? İşte #crypto-api Yarışması Kazananlarının Önerileri

Yapay Zekanın Gücünü Ortaya Çıkarıyoruz. En Son Tekniklerin Sistematik Bir İncelemesi: Özet ve Giriş

State of the Noonion: Building, Selling and Storytelling @ HackerNoon

Forumlardan Feed'lere: Sosyal Medya Algoritmaları Dijital Etkileşimi Nasıl Şekillendiriyor

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps