Tsify

Tsify 是一个用于从 Rust 代码生成 TypeScript 定义库。

与 wasm-bindgen 一起使用时，会自动将类型输出到 .d.ts。

受 typescript-definitions 和 ts-rs 启发。

示例

[dependencies]
tsify = "0.4.5"
serde = { version = "1.0", features = ["derive"] }
wasm-bindgen = { version = "0.2" }

use serde::{Deserialize, Serialize};
use tsify::Tsify;
use wasm_bindgen::prelude::*;

#[derive(Tsify, Serialize, Deserialize)]
#[tsify(into_wasm_abi, from_wasm_abi)]
pub struct Point {
    x: i32,
    y: i32,
}

#[wasm_bindgen]
pub fn into_js() -> Point {
    Point { x: 0, y: 0 }
}

#[wasm_bindgen]
pub fn from_js(point: Point) {}

将生成以下 .d.ts 文件

/* tslint:disable */
/* eslint-disable */
/**
 * @returns {Point}
 */
export function into_js(): Point;
/**
 * @param {Point} point
 */
export function from_js(point: Point): void;
export interface Point {
  x: number;
  y: number;
}

这是由于 typescript_custom_section 和 Rust 类型转换 的行为。

组件功能

• json (默认) 通过 serde_json 启用序列化。
• js 通过 serde-wasm-bindgen 启用序列化，并为它生成适当类型。这将是在未来版本中的默认选项。

属性

Tsify 容器属性

• into_wasm_abi 实现 IntoWasmAbi 和 OptionIntoWasmAbi。这可以直接从 Rust 转换到 JS 通过 serde_json 或 serde-wasm-bindgen。
• from_wasm_abi 实现 FromWasmAbi 和 OptionFromWasmAbi。这是上述操作的相反操作。
• namespace 为枚举变体生成命名空间。

Tsify 字段属性

• 类型
• 可选

Serde 属性

• 重命名
• 重命名全部
• 标签
• 内容
• 未标记
• 跳过
• 跳过序列化
• 跳过反序列化
• 跳过序列化条件= "Option::is_none"
• 展开
• 默认
• 透明

类型覆盖

use tsify::Tsify;

#[derive(Tsify)]
pub struct Foo {
    #[tsify(type = "0 | 1 | 2")]
    x: i32,
}

生成类型

export interface Foo {
  x: 0 | 1 | 2;
}

可选属性

#[derive(Tsify)]
struct Optional {
    #[tsify(optional)]
    a: Option<i32>,
    #[serde(skip_serializing_if = "Option::is_none")]
    b: Option<String>,
    #[serde(default)]
    c: i32,
}

生成类型

export interface Optional {
  a?: number;
  b?: string;
  c?: number;
}

枚举

#[derive(Tsify)]
enum Color {
    Red,
    Blue,
    Green,
    Rgb(u8, u8, u8),
    Hsv {
        hue: f64,
        saturation: f64,
        value: f64,
    },
}

生成类型

export type Color =
  | "Red"
  | "Blue"
  | "Green"
  | { Rgb: [number, number, number] }
  | { Hsv: { hue: number; saturation: number; value: number } };

带有命名空间的枚举

#[derive(Tsify)]
#[tsify(namespace)]
enum Color {
    Red,
    Blue,
    Green,
    Rgb(u8, u8, u8),
    Hsv {
        hue: f64,
        saturation: f64,
        value: f64,
    },
}

生成类型

declare namespace Color {
  export type Red = "Red";
  export type Blue = "Blue";
  export type Green = "Green";
  export type Rgb = { Rgb: [number, number, number] };
  export type Hsv = { Hsv: { hue: number; saturation: number; value: number } };
}

export type Color =
  | "Red"
  | "Blue"
  | "Green"
  | { Rgb: [number, number, number] }
  | { Hsv: { hue: number; saturation: number; value: number } };

类型别名

use tsify::{declare, Tsify};

#[derive(Tsify)]
struct Foo<T>(T);

#[declare]
type Bar = Foo<i32>;

生成类型

export type Foo<T> = T;
export type Bar = Foo<number>;