Upgrade to Pro — share decks privately, control downloads, hide ads and more …

TypeScript+React入門

59744530bd626ed2d9a547f73b35364c?s=47 rchaser53
December 19, 2016

 TypeScript+React入門

59744530bd626ed2d9a547f73b35364c?s=128

rchaser53

December 19, 2016
Tweet

Transcript

  1. TypeScript + React 入門 @rchaser53

  2. 伝えたいこと 静的解析があると本当に楽 (TypeScript でもFlow でもOK) ゆるく導入してもメリットはある 少しずつ学んでいく

  3. 本日のリポジトリ 取引先のフィールドが淡々と出力されるだけのものです TypeScript で書いた際の雰囲気をお楽しみください https://github.com/rchaser53/TsxDemo

  4. 静的解析があると本当に楽 N 番煎じなので静的解析については略 補完や構文エラーが出るのは非常に便利 visual studio code 優秀 ( 好きなeditor

    を使いたいならtsserver で頑張ろう)
  5. 補完機能は思ったより大事 オブジェクトの構造の把握が容易になる => 新規メンバーや臨時メンバーが入りやすい => リファクタリングもしやすい interface を充実させれば下手なドキュメントより優秀? ( エラーが出るから少なくともメンテはされる)

  6. ゆるく導入してもメリットはある ハードルは日に日に下がっている TypeScript 2 系で設定は大分楽になった TypeScript 2.1.4 でmodule の宣言も不要に

  7. 例1. props のinterface だけでも効果あり export interface Props { name: string

    label: string index: number } export class Row extends React.Component< Props, {} > { // 略 }
  8. 例2. 導入が楽なところから攻める(tsconfig 編) noUnusedLocals 使用していないローカル変数をチェックする noUnusedParameters 使用していない引数をチェックする

  9. 例2. 導入が楽なところから攻める( 型編) readonly property を読取り専用にする export interface Circle {

    readonly radius: number x: number y: number } let circleA: CirCle = { radius: 10, x: 5, y: 5 } circleA.radiux = 20 // Error! circleA.x = 10 // ok
  10. ハードルが低く効果がわかりやすい所から 体感してもらえないと導入しても使ってくれない 簡単にできて、効果が実感しやすい所から攻める やってくれる人を少しずつ増やしていく

  11. 少しずつ学んでいく 一から全部やろうとするから辛い 空いた時間で少しずつ綺麗にしていく ( ファイル、関数、オブジェクト単位で少しずつ) 最初のうちは分かる物だけ使えばよい

  12. わかる機能から始める 非常に多機能。最初から全部は辛い 簡単なものから使っていく 特に既存プロジェクトに一気に導入するのは辛い

  13. 皆で一斉にやらなくたっていい 誰かまず始める 空き時間で型を付けたり、interface を宣言したりする (2-3 日に1 回、2-30 分くらいでも十分に効果あり) ある程度ノウハウがたまったら展開していく (

    コードレビューあたりを利用)
  14. 終わりに 何事もすぐに理想の状態にはならない ちょっとずつ頑張っていく