Découvrez l'expérience de développement la plus transparente avec Rust et WebAssembly. C'est le moyen le plus rapide de générer automatiquement des définitions TypeScript à partir de votre code Rust. Dans cet article 💡 Nous apprendrons pourquoi la chaîne d'outils officielle Rust et WebAssembly n'est pas suffisante pour TypeScript. 🤹 Je vais vous montrer comment générer automatiquement la définition TypeScript avec un minimum de changement dans votre code Rust. 🧪 Nous allons refactoriser ensemble une bibliothèque WebAssembly du monde réel sur npm. Allons-y. Le problème de frappe avec wasm-bindgen La génération de types TypeScript pour les modules WebAssembly (Wasm) dans Rust n'est pas simple. J'ai rencontré le problème lorsque je travaillais sur un moteur de recherche de similarité vectorielle dans Wasm appelé . J'ai construit le moteur Wasm dans Rust pour fournir aux ingénieurs JavaScript et TypeScript un couteau suisse pour la recherche sémantique. Voici une démo pour le Web : Voy Vous pouvez trouver le ! N'hésitez pas à l'essayer. dépôt de Voy sur GitHub Le référentiel comprend que vous pouvez voir comment utiliser Voy dans différents cadres. des exemples J'ai utilisé et pour construire et compiler le code Rust en Wasm. Les définitions TypeScript générées ressemblent à ceci : wasm-pack wasm-bindgen /* 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 Comme vous pouvez le voir, il y a beaucoup de type "tout", ce qui n'est pas très utile pour l'expérience du développeur. Examinons le code Rust pour savoir ce qui s'est passé. 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 } La chaîne, la tranche et l'entier non signé ont généré les types corrects dans TypeScript, mais pas " ". JsValue est la représentation de wasm-bindgen d'un objet JavaScript. wasm_bindgen :: JsValue Nous la JsValue pour la transmettre entre JavaScript et Rust via Wasm. sérialisons et désérialisons #[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() } C'est l'approche officielle pour convertir les types de données, mais évidemment, nous devons faire un effort supplémentaire pour prendre en charge TypeScript. Générer automatiquement une liaison TypeScript avec Tsify La conversion de types de données d'un langage à un autre est en fait un modèle courant appelé (FFI). J'ai exploré des outils FFI comme pour générer automatiquement des définitions TypeScript à partir de structures Rust, mais ce n'était que la moitié de la solution. interface de fonction étrangère Typeshare Ce dont nous avons besoin, c'est d'un moyen d'exploiter la compilation Wasm et de générer la définition de type pour l'API du module Wasm. Comme ça: #[wasm_bindgen] pub fn index(resource: Resource) -> SerializedIndex { /* snip */ } #[wasm_bindgen] pub fn search(index: SerializedIndex, query: Embeddings, k: NumberOfResult) -> SearchResult { // snip } Heureusement, est une bibliothèque open source incroyable pour le cas d'utilisation. Tout ce que nous avons à faire est de dériver du trait "Tsify" et d'ajouter une macro #[tsify] aux structures : 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 } C'est ça! Examinons les attributs "from_wasm_abi" et "into_wasm_abi". Les deux attributs convertissent le type de données Rust en définition TypeScript. Ce qu'ils font différemment, c'est la direction du flux de données avec l'interface binaire d'application (ABI) de Wasm. : Les données circulent de Rust vers JavaScript. Utilisé pour le type de retour. into_wasm_abi : Les données circulent de JavaScript vers Rust. Utilisé pour les paramètres. from_wasm_abi Les deux attributs utilisent serde-wasm-bindgen pour implémenter la conversion de données entre Rust et JavaScript. Nous sommes prêts à construire le module Wasm. Une fois que vous avez exécuté "wasm-pack build", la définition TypeScript générée automatiquement : /* 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[] } Tous les types "any" sont remplacés par les interfaces que nous avons définies dans le code Rust✨ Dernières pensées Les types générés semblent bons, mais il y a quelques incohérences. Si vous regardez attentivement, vous remarquerez que le paramètre de requête dans la fonction de recherche est défini comme un Float32Array. Le paramètre de requête est défini comme le même type que "embeddings" dans EmbeddedResource, donc je m'attends à ce qu'ils aient le même type dans TypeScript. Si vous savez pourquoi ils sont convertis en différents types, n'hésitez pas à nous contacter ou à ouvrir une demande d'extraction dans . Voy sur GitHub est un moteur de recherche sémantique open source dans WebAssembly. Je l'ai créé pour permettre à davantage de projets de créer des fonctionnalités sémantiques et de créer de meilleures expériences utilisateur pour les personnes du monde entier. Voy suit plusieurs principes de conception : Voy 🤏 : Réduisez les frais généraux pour les appareils limités, tels que les navigateurs mobiles avec des réseaux lents ou l'IoT. Minuscule 🚀 : Créez la meilleure expérience de recherche pour les utilisateurs. Rapide 🌳 : Optimisez la taille du bundle et activez les fonctionnalités asynchrones pour les API Web modernes, telles que les Web Workers. Tree Shakable 🔋 : Générez un index d'intégrations portable n'importe où, n'importe quand. Reprise ☁️ : effectuez une recherche sémantique sur les serveurs Edge CDN. Dans le monde entier Il est disponible sur npm. Vous pouvez simplement l'installer avec votre gestionnaire de paquets préféré et vous êtes prêt à partir. # with npm npm i voy-search # with Yarn yarn add voy-search # with pnpm pnpm add voy-search Essayez-le, et je suis heureux d'avoir de vos nouvelles! Les références - Wikipédia Interface de fonction étrangère - GitHub serde-wasm-bindgen - GitHub Specta - wasm-bindgen Structure wasm_bindgen :: JsValue - Rust et WebAssembly Le livre Rust et WebAssembly - GitHub ts-rs - GitHub Tsify - GitHub Partage de type - GitHub Voy - Rust et WebAssembly wasm-bindgen - Rust et WebAssembly wasm-pack - Daw-Chih Liou Recherche sémantique WASM dans Rust - WebAssembly.org WebAssembly Vous voulez vous connecter ? Cet article a été initialement publié sur . le site Web de Daw-Chih

Cet audio est produit dans la langue originale de l'histoire !

Trop long; Pour lire

Making security fun one episode at a time

Comment partager des types Rust avec TypeScript pour WebAssembly en 30 secondes : un guide rapide

Trop long; Pour lire

Daw-Chih Liou

About Author

ÉTIQUETTES

Languages

CET ARTICLE A ÉTÉ PARU DANS...

Comment partager des types Rust avec TypeScript pour WebAssembly en 30 secondes : un guide rapide

Trop long; Pour lire

Daw-Chih Liou

About Author

ÉTIQUETTES

Languages

CET ARTICLE A ÉTÉ PARU DANS...

HISTOIRES CONNEXES