react-typescript-wijmoでサンプル

注意書き

C●deZineで見かけたサンプルを参考に実装しています。
（そっくりそのままtsに移植しただけですごめんなさい）

作成したコードは以下にあります。
https://github.com/ishibashi-futos/react-wijmo

当方環境

package.json

{
  "name": "wijmo-ts",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.3",
    "react-dom": "^16.8.3",
    "react-scripts-ts": "3.1.0",
    "wijmo": "^5.20183.568"
  },
  "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject"
  },
  "devDependencies": {
    "@types/jest": "^24.0.6",
    "@types/node": "^11.9.5",
    "@types/react": "^16.8.4",
    "@types/react-dom": "^16.8.2",
    "typescript": "^3.3.3333"
  }
}

create-react-appしてサーバを立ち上げる

create-react-appコマンドを利用して、reactアプリの雛形を出します。
今回は typescript を利用するので、 --scripts-version オプションをつけます。

$ create-react-app wijmo-ts  --scripts-version=react-scripts-ts
$ cd wijmo-ts/ && yarn start # or npm start

よく見るReactの画面が出てきたかと思います（スクショ略）
このあと、 npm install --save wijmo とすると、↑のような package.json ができるかと思います。

guageサンプルを実行してみる。

完成品はこちら（いきなり）

Guage.tsx

import * as React from 'react';
import 'wijmo/styles/wijmo.css';
import * as wjGauge from 'wijmo/wijmo.react.gauge';

interface IState {                                          // point 1
  gaugeValue: number;
}

class Guage extends React.Component<{}, IState> {

  constructor(props: any) {
    super(props);
    this.state = {
      gaugeValue: 30
    }
    this.gaugeChanged = this.gaugeChanged.bind(this);       // point 2
    this.textboxChanged = this.textboxChanged.bind(this);
  }

  public render() {
    return (
      <div className="App">
        <h1>Wijmo + React(ゲージ)</h1>
        <wjGauge.LinearGauge className="wijmo-control"
        value={this.state.gaugeValue} valueChanged={this.textboxChanged}/>
        gaugeValue:<input type="text" className="textBox" 
        value={this.state.gaugeValue} onChange={this.textboxChanged}/>
      </div>
    );
  }

  private gaugeChanged(newValue: number) {
    this.setState({gaugeValue: newValue});
  }

  private textboxChanged(newValue: React.ChangeEvent<HTMLInputElement>) {
    const input = newValue.target as HTMLInputElement;
    if (input != null) {                                    // point 3
      if (!isNaN(Number(input.value))) {
        this.setState({gaugeValue: Number(input.value)});
      }
    }
  }

}

export default Guage;

react自体触るのがほとんど初めてだったこともあり、wijmoと関係ないところではまりました。

point 1. interface name must start with a capitalized I

TSLintのデフォルト設定なのか、InterfaceのprefixにIを指定してないと、npm startしたときにエラーになります・・・。
tslint.jsonの rulesに以下のように設定すると消えます。

tslint.json

{
  "rules" : {
    "interface-name": [false]
  }
}

point 2. 'gaugeChanged' is declared but its value is never read.

リンク先でも触れている通り、React.Componentを使用する場合は、
イベントハンドラが自動的にbindされないらしいので、コンストラクタ内でbindする。

point3. TypeError: Cannot read property 'value' of undefined

イベントが発生した時に、HTMLInputElementが取得できていない時がある。
そのため上記のようなエラーが出るので、HTMLInputElementの型で取れなかった（nullだった？）時は
処理しないように直してみた。

終了

長くなってきたので、Gridのサンプルは別に書きます。