diff --git a/crates/typescript-tests/src/lib.rs b/crates/typescript-tests/src/lib.rs index 5336adf4..6c6db10e 100644 --- a/crates/typescript-tests/src/lib.rs +++ b/crates/typescript-tests/src/lib.rs @@ -5,4 +5,5 @@ pub mod opt_args_and_ret; pub mod optional_fields; pub mod simple_fn; pub mod simple_struct; +pub mod typescript_type; pub mod web_sys; diff --git a/crates/typescript-tests/src/typescript_type.rs b/crates/typescript-tests/src/typescript_type.rs new file mode 100644 index 00000000..5bd7dc54 --- /dev/null +++ b/crates/typescript-tests/src/typescript_type.rs @@ -0,0 +1,38 @@ +use wasm_bindgen::prelude::*; + +#[wasm_bindgen(typescript_custom_section)] +const ITEXT_STYLE: &'static str = r#" +interface ITextStyle { + bold: boolean; + italic: boolean; + size: number; +} +"#; + +#[wasm_bindgen] +extern "C" { + #[wasm_bindgen(typescript_type = "ITextStyle")] + pub type ITextStyle; +} + +#[wasm_bindgen] +#[derive(Default)] +pub struct TextStyle { + pub bold: bool, + pub italic: bool, + pub size: i32, +} + +#[wasm_bindgen] +impl TextStyle { + #[wasm_bindgen(constructor)] + pub fn new(_i: ITextStyle) -> TextStyle { + // parse JsValue + TextStyle::default() + } + + pub fn optional_new(_i: Option) -> TextStyle { + // parse JsValue + TextStyle::default() + } +} diff --git a/crates/typescript-tests/src/typescript_type.ts b/crates/typescript-tests/src/typescript_type.ts new file mode 100644 index 00000000..a05ada63 --- /dev/null +++ b/crates/typescript-tests/src/typescript_type.ts @@ -0,0 +1,9 @@ +import * as wbg from '../pkg/typescript_tests'; + +const style: wbg.TextStyle = new wbg.TextStyle({ + bold: true, + italic: true, + size: 42, +}); + +const optional_style: wbg.TextStyle = wbg.TextStyle.optional_new(); diff --git a/guide/src/SUMMARY.md b/guide/src/SUMMARY.md index 9c3d9224..791f90d9 100644 --- a/guide/src/SUMMARY.md +++ b/guide/src/SUMMARY.md @@ -82,6 +82,7 @@ - [`getter` and `setter`](./reference/attributes/on-rust-exports/getter-and-setter.md) - [`inspectable`](./reference/attributes/on-rust-exports/inspectable.md) - [`skip_typescript`](./reference/attributes/on-rust-exports/skip_typescript.md) + - [`typescript_type`](./reference/attributes/on-rust-exports/typescript_type.md) - [`web-sys`](./web-sys/index.md) - [Using `web-sys`](./web-sys/using-web-sys.md) diff --git a/guide/src/reference/attributes/on-rust-exports/typescript_type.md b/guide/src/reference/attributes/on-rust-exports/typescript_type.md new file mode 100644 index 00000000..6dc68afd --- /dev/null +++ b/guide/src/reference/attributes/on-rust-exports/typescript_type.md @@ -0,0 +1,56 @@ +# typescript_type + +The `typescript_type` allows us to use typescript declarations in `typescript_custom_section` as arguments for rust functions! For example: + +```rust +#[wasm_bindgen(typescript_custom_section)] +const ITEXT_STYLE: &'static str = r#" +interface ITextStyle { + bold: boolean; + italic: boolean; + size: number; +} +"#; + +#[wasm_bindgen] +extern "C" { + #[wasm_bindgen(typescript_type = "ITextStyle")] + pub type ITextStyle; +} + +#[wasm_bindgen] +#[derive(Default)] +pub struct TextStyle { + pub bold: bool, + pub italic: bool, + pub size: i32, +} + +#[wasm_bindgen] +impl TextStyle { + #[wasm_bindgen(constructor)] + pub fn new(_i: ITextStyle) -> TextStyle { + // parse JsValue + TextStyle::default() + } + + pub fn optional_new(_i: Option) -> TextStyle { + // parse JsValueo + TextStyle::default() + } +} +``` + +We can write our `typescript` code like: + +```ts +import { ITextStyle, TextStyle } from "./my_awesome_module"; + +const style: TextStyle = new TextStyle({ + bold: true, + italic: true, + size: 42, +}); + +const optional_style: TextStyle = TextStyle.optional_new(); +```