Posted at

React TutorialをTypeScriptで書いてみる

More than 3 years have passed since last update.

TypeScriptとReactの勉強がしたかったので、

React Tutorial を TypeScript で書いてみました。


  • ajaxのところを試したかったのでサーバからのデータの取得のところまで


    • ajaxを扱うライブラリはjQueryではなくsuperagentを使用



  • Markdown化は省略

  • タスクランナーはgulp

githubにソースを置きました。

https://github.com/hushin/react-tutorial-typescript


作業コマンドメモ

npm init

gibo Node >> .gitignore
npm install react --save
dtsm init
dtsm install react react-dom superagent --save
tsc --init
# edit tsconfig.json
# add tslint.json

npm install gulp gulp-shell typescript tslint gulp-tslint gulp-tsconfig-update run-sequence coffee-script --save-dev

# edit gulpfile.coffee


開発環境

Atom に atom-typescript をインストールしています。


感想

型が付いているのでやっぱり安心感あっていいですね。

1年前くらいTypeScript試した時は開発環境がまだあまり揃ってなくて微妙だなーと思っていたんですが、Atom なら設定も楽でいい感じです。


よくわかっていない


  • フォルダ構造:下記のように置いていますがTypeScriptの流儀にあってるのかよくわからないです。あまり気にしなくていいかもしれませんが。。


    • src: .ts, .tsx

    • lib: TypeScriptからコンパイルしたJavaScript

    • public: browserify でライブラリも結合したJavaScript



  • TypeScriptのバージョンアップが頻繁にあるので半年前の書き方と変わっている


    • サンプルコードには /// <reference path='../../hoge'/> とあるが今ならtsconfigを書けば不要になるっぽい

    • 最新の仕様でイケているモジュールの扱いがよくわからない



  • tsconfig.jsonのfilesプロパティの更新をgulpでやるべきか?


    • Atomでもやってくれるのでいらないかも?




うまく行ってない点

Atom上でTSXのpropやstateの行で下記エラーになる


  • Property 'key' is missing in type


  • Property 'ref' is missing in type

CommentBox_tsx.png

gulpからのコンパイルだとうまくいくので様子見。

下記のissueと状況が似ているので待っていたら直るかも??

tsx file compile fails on optional properties · Issue #6029 · Microsoft/TypeScript


あとでやりたい


  • unit test

  • source map

  • watchify


参考にしたページ