Descubra a experiência de desenvolvedor mais perfeita com Rust e WebAssembly. Esta é a maneira mais rápida de gerar automaticamente definições TypeScript a partir do seu código Rust.  Neste artigo  💡 Aprenderemos por que a cadeia de ferramentas oficial Rust e WebAssembly não é suficiente para TypeScript.  🤹 Mostrarei como gerar automaticamente a definição TypeScript com alteração mínima em seu código Rust.  🧪 Refatoraremos juntos uma biblioteca WebAssembly do mundo real no npm.  Vamos.  O problema de digitação com wasm-bindgen  A geração de tipos TypeScript para módulos WebAssembly(Wasm) em Rust não é simples.  Encontrei o problema quando estava trabalhando em um mecanismo de pesquisa de similaridade vetorial no Wasm chamado   . Eu construí o mecanismo Wasm em Rust para fornecer aos engenheiros de JavaScript e TypeScript um canivete suíço para pesquisa semântica. Aqui está uma demonstração para a web:  Voy  Você pode encontrar o   ! Sinta-se livre para experimentá-lo. repositório do Voy no GitHub  O repositório inclui   que você pode ver como usar o Voy em diferentes frameworks. exemplos  Eu usei   e   para construir e compilar o código Rust para Wasm. As definições TypeScript geradas se parecem com isto: 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  Como você pode ver, há muitos tipos "qualquer", o que não é muito útil para a experiência do desenvolvedor. Vamos examinar o código Rust para descobrir o que aconteceu.   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 }  A string, slice e unsigned integer geraram os tipos corretos no TypeScript, mas o "   " não. JsValue é a representação de wasm-bindgen de um objeto JavaScript. wasm_bindgen::JsValue    o JsValue para passá-lo entre JavaScript e Rust por meio do Wasm. Serializamos e desserializamos   #[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() }  É a abordagem oficial para converter tipos de dados, mas, evidentemente, precisamos ir além para oferecer suporte a TypeScript.  Gerar automaticamente ligação TypeScript com Tsify  A conversão de tipos de dados de um idioma para outro é, na verdade, um padrão comum chamado   (FFI). Eu explorei ferramentas FFI como   para gerar automaticamente definições TypeScript a partir de estruturas Rust, mas foi apenas metade da solução. interface de função estrangeira Typeshare  O que precisamos é de uma maneira de explorar a compilação Wasm e gerar a definição de tipo para a API do módulo Wasm. Assim:   #[wasm_bindgen] pub fn index(resource: Resource) -> SerializedIndex { /* snip */ } #[wasm_bindgen] pub fn search(index: SerializedIndex, query: Embeddings, k: NumberOfResult) -> SearchResult { // snip }  Felizmente,   é uma incrível biblioteca de código aberto para o caso de uso. Tudo o que precisamos fazer é derivar do traço "Tsify" e adicionar uma macro #[tsify] às estruturas: o 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 }  É isso! Vamos dar uma olhada nos atributos "from_wasm_abi" e "into_wasm_abi".   Ambos os atributos convertem o tipo de dados Rust em definição TypeScript. O que eles fazem de diferente é a direção do fluxo de dados com a Application Binary Interface (ABI) do Wasm.    : os dados fluem de Rust para JavaScript. Usado para o tipo de retorno. into_wasm_abi    : os dados fluem de JavaScript para Rust. Usado para parâmetros. from_wasm_abi  Ambos os atributos usam serde-wasm-bindgen para implementar a conversão de dados entre Rust e JavaScript.  Estamos prontos para construir o módulo Wasm. Depois de executar "wasm-pack build", a definição de TypeScript gerada automaticamente:   /* 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[] }  Todos os tipos "any" são substituídos pelas interfaces que definimos no código Rust✨  Pensamentos finais  Os tipos gerados parecem bons, mas existem algumas inconsistências. Se você olhar de perto, notará que o parâmetro de consulta na função de pesquisa é definido como Float32Array.  O parâmetro de consulta é definido como o mesmo tipo de "embeddings" em EmbeddedResource, portanto, espero que eles tenham o mesmo tipo em TypeScript.  Se você sabe por que eles são convertidos em tipos diferentes, não hesite em entrar em contato ou abrir uma solicitação pull no   . Voy no GitHub    é um mecanismo de pesquisa semântica de código aberto no WebAssembly. Eu o criei para capacitar mais projetos para construir recursos semânticos e criar melhores experiências de usuário para pessoas ao redor do mundo. Voy segue vários princípios de design: Voy  🤏   : Reduza a sobrecarga para dispositivos limitados, como navegadores móveis com redes lentas ou IoT. Tiny  🚀   : crie a melhor experiência de pesquisa para os usuários. Rápido  🌳   : Otimize o tamanho do pacote e habilite recursos assíncronos para API da Web moderna, como Web Workers. Tree Shakable  🔋   : gere índice de incorporação portátil em qualquer lugar, a qualquer hora. Recuperável  ☁️   : execute uma pesquisa semântica em servidores de borda CDN. Em todo o mundo  Está disponível no npm. Você pode simplesmente instalá-lo com seu gerenciador de pacotes favorito e pronto.   # with npm npm i voy-search # with Yarn yarn add voy-search # with pnpm pnpm add voy-search  Experimente e ficarei feliz em saber de você!  Referências    - Wikipedia Interface de função estrangeira    - GitHub serde-wasm-bindgen    - GitHub Specta    - wasm-bindgen Estrutura wasm_bindgen::JsValue    - Rust e WebAssembly O livro Rust e WebAssembly    - GitHub ts-rs    - GitHub Tsify    - GitHub Typeshare    - GitHub Voy    - Rust e WebAssembly wasm-bindgen    - Rust e WebAssembly wasm-pack    - Daw-Chih Liou Pesquisa Semântica WASM em Rust    - WebAssembly.org WebAssembly   Quer se conectar?   Este artigo foi publicado originalmente no   . site da 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

Este áudio é produzido no idioma original da história!

Muito longo; Para ler

Como compartilhar tipos Rust com TypeScript para WebAssembly em 30 segundos: um guia rápido

Como compartilhar tipos Rust com TypeScript para WebAssembly em 30 segundos: um guia rápido

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

De fóruns a feeds: como os algoritmos de mídia social moldam a interação digital

As camadas invisíveis: por que as entrevistas com usuários são um ativo insubstituível

Navegando pelas águas: desenvolvendo aplicações RAG de nível de produção com data lakes

Crescimento de Criptomoedas: Criando Personas de Usuários Eficazes

De fóruns a feeds: como os algoritmos de mídia social moldam a interação digital

As camadas invisíveis: por que as entrevistas com usuários são um ativo insubstituível

Navegando pelas águas: desenvolvendo aplicações RAG de nível de produção com data lakes

Crescimento de Criptomoedas: Criando Personas de Usuários Eficazes

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps