Help us understand the problem. What is going on with this article?

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

参考にしたページ

hush_in
Web開発をしています。フロントエンド中心。
http://hushin-text.fdempa.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away