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

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

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

Trop long; Pour lire

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

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

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Les couches invisibles : pourquoi les entretiens avec les utilisateurs sont un atout irremplaçable

Comment améliorer votre flux de travail par 10 : 17 applications essentielles

Le guide complet pour réussir une migration vers le cloud : stratégies et bonnes pratiques

Valhalla de Floki se joint en tant que sponsor associé de la tournée indienne au Sri Lanka

Les couches invisibles : pourquoi les entretiens avec les utilisateurs sont un atout irremplaçable

Comment améliorer votre flux de travail par 10 : 17 applications essentielles

Le guide complet pour réussir une migration vers le cloud : stratégies et bonnes pratiques

Valhalla de Floki se joint en tant que sponsor associé de la tournée indienne au Sri Lanka

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps