✡️

p5.jsのRadio ButtonにTypeScriptを適用する

2023/08/13に公開

p5.jsでRadio Buttonを使う時は,おそらくp5.createRadioを使うと思います.ところがこの関数の返り値はp5.Elementとなっており,Radio Button用の型になっていません.そのため,radio_btn.option, radio_btn.selectedは型エラーになってしまいます(error TS2339: Property 'option' does not exist on type 'Element').

そこで,Radio Button用の型を定義して適用することでこのエラーを回避します.

import p5 from "p5";
const sketch = (p5: p5) => {
  type RadioButton = p5.Element & {
    option: (name: string) => null,
    selected: (name: string) => null
  };
  let my_radio_btn: RadioButton;
  p5.setup = () => {
    my_radio_btn = p5.createRadio("my radio btn") as RadioButton;
    my_radio_btn.option("hoge");
    my_radio_btn.option("fuga");
    my_radio_btn.selected("hoge");
  };
};

Discussion