はぁはぁ、、、ReactをTypeScriptで書いてみたはぁはぁ...

January 10, 2016

TypeScriptとか見よう見まねで、Reactもいろいろ把握していない状態でぶつかりながら進んでみた。いろいろダメだと思うけどやったことの記録をしておく。このブログは匿名のつもりでやってる。恥ずかしいこと書き出す。

今までJavaScriptはちょっとやっては、やめるというのを繰り返してて全然基礎体力ついていない。よくない。

やったこと＆ハマったこと

ReactのTutorialをTypeScriptで書き換えてみる。自己流->挫折->参考サイトを見ていろいろ取り入れてなんとかできました。

とりあえずできたものはここに置いています。

js-study/8.react-tutorial-typescript at master · morizotter/js-study

super agentが読み込めずにハマった。当初、Working with React and TypeScriptの流儀でnamespaceを切って、app.componentsの中に書くという書き方をしていたんだけど、そうすると、import * as React from 'react'をやると、同階層のファイルが読み込めなくなったりimport ...をしないとsuper agentが使えなかったりしてハマった。質問もした( reactjs - I want to use superagent in TypeScript-ed React - Stack Overflow )。結局、namespaceを外したことで解決した。
export defaultすると、import CommentList from './CommentList'こんな感じに一つだけとれるのですね。
すごい初歩的なんだけど、setInterval(this.loadCommentsFromServer.bind(this), this.props.pollInterval);のところで、this.loadCommentsFromServerと、bind(this)をつけずにやってしまい。通信時にthisが意味不明ですって言われてハマった。bind(this)すれば解消した。
serverにアクセスしたらCrossOriginですよとか言って怒られたので、強引に静めてしまった。

app.use(’/’, express.static(path.join(__dirname, ‘public’))); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({extended: true}));

--- ここから強引なコードを記述

var allowCrossDomain = function(req, res, next) { res.header(‘Access-Control-Allow-Origin’, ‘null’); res.header(‘Access-Control-Allow-Methods’, ‘GET,PUT,POST,DELETE’); res.header(‘Access-Control-Allow-Headers’, ‘Content-Type’); next(); }; app.use(allowCrossDomain);

--- 強引なコードはここまで

曖昧だったこと

そもそもTypeScriptもReactもまだまだ触り始めなのでちゃんとドキュメント読めば解決することが多いと思います。。。。。。。。。

interfaceは個別ファイルに置いておいて、共通で使うものは、interface.d.tsに入れたけどこんな書き方で良いんだろうか。Working with React and TypeScriptの例だと全てinterface.d.tsに入れている。これはこれでinterfacesが肥大化していきそうなんだけど。例えば、CommentのモデルをICommentというinterfaceにしたんだけど、それでいいのか。
動的な更新を表現するために2秒ごとに通信しているけど通信しすぎではないのか？
tsd.d.ts はreferenceで読み込むという記事が多かったけど、実際はそのまま使えた。ただ、react系は、import * as React from 'reactというようにimportする必要があった（import周りわかってない）。