Rust와 WebAssembly를 통해 가장 원활한 개발자 경험을 찾아보세요. 이는 Rust 코드에서 TypeScript 정의를 자동 생성하는 가장 빠른 방법입니다.  이 기사에서는  💡 공식 Rust 및 WebAssembly 툴체인이 TypeScript에 충분하지 않은 이유를 알아 보겠습니다.  🤹 Rust 코드를 최소한으로 변경하면서 TypeScript 정의를 자동 생성하는 방법을 보여 드리겠습니다.  🧪 우리는 npm에서 실제 WebAssembly 라이브러리를 함께 리팩토링하겠습니다.  갑시다.  wasm-bindgen의 타이핑 문제  Rust에서 WebAssembly(Wasm) 모듈용 TypeScript 유형을 생성하는 것은 간단하지 않습니다.    라는 Wasm의 벡터 유사성 검색 엔진을 작업할 때 문제가 발생했습니다. 저는 JavaScript 및 TypeScript 엔지니어에게 의미론적 검색을 위한 스위스 칼을 제공하기 위해 Rust로 Wasm 엔진을 구축했습니다. 다음은 웹용 데모입니다.  Voy    찾을 수 있습니다! 자유롭게 사용해 보세요. GitHub에서 Voy의 저장소를  저장소에는 다양한 프레임워크에서 Voy를 사용하는 방법을 확인할 수 있는   포함되어 있습니다. 예제가  나는   과   사용하여 Rust 코드를 Wasm으로 빌드하고 컴파일했습니다. 생성된 TypeScript 정의는 다음과 같습니다. 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  보시다시피 개발자 경험에 별로 도움이 되지 않는 "모든" 유형이 많이 있습니다. 무슨 일이 일어났는지 알아보기 위해 Rust 코드를 살펴보겠습니다.   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 }  문자열, 슬라이스 및 부호 없는 정수는 TypeScript에서 올바른 유형을 생성했지만 "   "는 그렇지 않았습니다. JsValue는 wasm-bindgen의 JavaScript 객체 표현입니다. wasm_bindgen::JsValue  우리는 JsValue를   Wasm을 통해 JavaScript와 Rust 사이에서 앞뒤로 전달합니다. 직렬화 및 역직렬화하여   #[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() }  이는 데이터 유형을 변환하는 공식적인 접근 방식이지만 TypeScript를 지원하려면 더 많은 노력이 필요합니다.  Tsify를 사용하여 TypeScript 바인딩 자동 생성  한 언어에서 다른 언어로 데이터 유형을 변환하는 것은 실제로 FFI(   )라는 일반적인 패턴입니다. Rust 구조체에서 TypeScript 정의를 자동 생성하기 위해   와 같은 FFI 도구를 탐색했지만 이는 솔루션의 절반에 불과했습니다. 외래 함수 인터페이스 Typeshare  우리에게 필요한 것은 Wasm 컴파일을 활용하고 Wasm 모듈의 API에 대한 유형 정의를 생성하는 방법입니다. 이와 같이:   #[wasm_bindgen] pub fn index(resource: Resource) -> SerializedIndex { /* snip */ } #[wasm_bindgen] pub fn search(index: SerializedIndex, query: Embeddings, k: NumberOfResult) -> SearchResult { // snip }  운 좋게도   사용 사례에 대한 놀라운 오픈 소스 라이브러리입니다. 우리가 해야 할 일은 "Tsify" 특성에서 파생되고 #[tsify] 매크로를 구조체에 추가하는 것입니다. 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" 속성을 살펴보겠습니다.   두 속성 모두 Rust 데이터 유형을 TypeScript 정의로 변환합니다. 그들이 다르게 하는 것은 Wasm의 ABI(Application Binary Interface)를 사용한 데이터 흐름의 방향입니다.    : 데이터는 Rust에서 JavaScript로 흐릅니다. 반환 유형에 사용됩니다. into_wasm_abi    : 데이터는 JavaScript에서 Rust로 흐릅니다. 매개변수에 사용됩니다. from_wasm_abi  두 속성 모두 serde-wasm-bindgen을 사용하여 Rust와 JavaScript 간의 데이터 변환을 구현합니다.  Wasm 모듈을 빌드할 준비가 되었습니다. "wasm-pack build"를 실행하면 자동 생성된 TypeScript 정의는 다음과 같습니다.   /* 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[] }  모든 "any" 유형은 Rust 코드에서 정의한 인터페이스로 대체됩니다✨  마지막 생각들  생성된 유형은 보기에는 좋지만 일부 불일치가 있습니다. 자세히 살펴보면 검색 기능의 쿼리 매개변수가 Float32Array로 정의되어 있음을 알 수 있습니다.  쿼리 매개변수는 EmbeddedResource의 "embeddings"과 동일한 유형으로 정의되므로 TypeScript에서도 동일한 유형을 가질 것으로 예상됩니다.  왜 다른 유형으로 변환되는지 알고 있다면 주저하지 말고   에서 끌어오기 요청을 제출하세요. GitHub의 Voy    는 WebAssembly의 오픈 소스 의미 검색 엔진입니다. 저는 더 많은 프로젝트가 의미론적 기능을 구축하고 전 세계 사람들을 위한 더 나은 사용자 경험을 만들 수 있도록 힘을 실어주기 위해 이를 만들었습니다. Voy는 다음과 같은 몇 가지 디자인 원칙을 따릅니다. Voy  🤏   : 네트워크가 느린 모바일 브라우저나 IoT 등 제한된 장치에 대한 오버헤드를 줄입니다. 매우 작음  🚀   : 사용자에게 최고의 검색 경험을 제공합니다. 신속함  🌳   : 번들 크기를 최적화하고 Web Workers와 같은 최신 웹 API에 대한 비동기 기능을 활성화합니다. Tree Shakable  🔋   : 언제 어디서나 휴대용 임베딩 인덱스를 생성합니다. 재개 가능  ☁️   : CDN 엣지 서버에서 의미 검색을 실행합니다. 전 세계  npm에서 사용 가능합니다. 즐겨 사용하는 패키지 관리자를 사용하여 간단히 설치하면 바로 사용할 수 있습니다.   # with npm npm i voy-search # with Yarn yarn add voy-search # with pnpm pnpm add voy-search  한번 시도해 보세요. 여러분의 의견을 듣게 되어 기쁩니다!  참고자료    - Wikipedia 외부 함수 인터페이스    - GitHub serde-wasm-bindgen    - GitHub 스펙타    - wasm-bindgen 구조체 wasm_bindgen::JsValue    - Rust와 WebAssembly Rust와 WebAssembly 책    - GitHub TS-RS    - GitHub Tsify    - GitHub Typeshare    - GitHub 보이    - Rust 및 WebAssembly wasm-bindgen    - Rust 및 WebAssembly wasm-pack    - Daw-Chih Liou Rust의 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

이 오디오는 이야기의 원래 언어로 제작되었습니다!

너무 오래; 읽다

30초 안에 WebAssembly용 TypeScript로 Rust 유형을 공유하는 방법: 빠른 가이드

30초 안에 WebAssembly용 TypeScript로 Rust 유형을 공유하는 방법: 빠른 가이드

About Author

코멘트

태그 걸기

이 기사는 다음에서 발표되었습니다.

Related Stories

HackerNoon 글쓰기 대회에서 우승하고 싶으신가요? #crypto-api 대회 우승자들이 추천하는 내용은 다음과 같습니다.

AI의 힘을 발휘하세요. 최첨단 기술의 체계적 검토: 개요 및 소개

디지털 유목민 들어보기: 태국의 새로운 DTV 비자에 대해 알아야 할 사항

성공적인 클라우드 마이그레이션을 위한 전체 가이드: 전략 및 모범 사례

HackerNoon 글쓰기 대회에서 우승하고 싶으신가요? #crypto-api 대회 우승자들이 추천하는 내용은 다음과 같습니다.

AI의 힘을 발휘하세요. 최첨단 기술의 체계적 검토: 개요 및 소개

디지털 유목민 들어보기: 태국의 새로운 DTV 비자에 대해 알아야 할 사항

성공적인 클라우드 마이그레이션을 위한 전체 가이드: 전략 및 모범 사례

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps