TypeScriptとReact

React,TypeScript
2016-05-18

はやり（？）のアレ。いっちょやってみようって感じでやりました。

とはいえ、さすが最先端、ネットの情報がバージョン入り乱れて、うまくいかない・・・
参考記事の見分け方としては、
・typingsを使ってるか（tscだっけかな、は、推奨から外れたらしい）
・class構文で定義（typescriptでサポートされたとのこと）

最終的に参考にさせていただいたのが「TypeScriptを使ってreactのチュートリアルを進めると捗るかなと思った。」
ほぼこのまんまでいけます。2016/05/18現在。

このわかりやすい記事を読んでもまだハマるJavaScript初心者なんですが。
個人的にはまったのは、

1. 各種インポート方法。
まだ体系的なところはわからないけど、とりあえず、
・typingsで持ってきたものは

import * as [コード中でアクセスする名前] from "[モジュール名=インストールで指定した名前]";

 

例：import * as React from "react";

・自作のクラスは

import {作ったクラス名} from "[ファイル名]";

 

例：import {Hoge} from "Hoge.tcx";

 

この辺りはどの言語でも使い始めに引っかかる。

2. this
これはTypeScriptとかReactの問題じゃない、ような気がしてますが。
jQueryのajaxでデータ追加をポストして、戻りJSONに追加されたデータを加えた全データを返すようなロジックにて。
this.setState({hoge: data})なんて感じで反映させようと思ったら、setStateはありません・・・
何が原因かというとajaxのsuccessやらに指定した関数内でのthisはイベントハンドラになるらしい。
今回はsetStateを呼び出したいので関数を定義したクラスのインスタンスになってほしい。
で、↓


class hogehoge ... {
  // これがイベントハンドラ
  handler() {
    $.ajax(
     // ここはチュート通り
     success: function(data) {
     }.bind(),
     ...
  }
  render() {
    // handlerを登録
    return (
    // // ここがキモ。onSubmitに登録するときにbindでrenderのthis=このクラスのインスタンスを渡す。
    // // 参考記事ではこのクラスのコンストラクタで設定してたんだけど、うまくいかなかった。何が悪いんだろう？？？
    
    ...
    );
  }
}

実際確かめたコードはもちょっと複雑だったので、簡単にした、んだけど動作確認はしてないコード。発想は間違ってないはずなのでそこを参考にしていただければ・・・

次はデバッグの仕方とテストの勉強かなー。