LoginSignup
10
8

More than 5 years have passed since last update.

@hush_in

React TutorialをTypeScriptで書いてみる

Posted at

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

参考にしたページ

10
8
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
10
8