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

Flowtypeによるコンポーネント指向における型の入手/flowtype-with-flow

joe_re
June 10, 2016

 Flowtypeによるコンポーネント指向における型の入手/flowtype-with-flow

http://connpass.com/event/31305/

Modern Web App LT!(freee x WACUL) LT資料

joe_re

June 10, 2016
Tweet

More Decks by joe_re

Other Decks in Technology

Transcript

  1. 強力な型推論 ① / / @ f l o w f

    u n c t i o n f o o ( x ) { r e t u r n x * 1 0 ; } f o o ( ' H e l l o , w o r l d ! ' ) ; $ f l o w f l o w . j s : 5 5 : f o o ( ' H e l l o , w o r l d ! ' ) ; ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ f u n c t i o n c a l l 3 : r e t u r n x * 1 0 ; ^ s t r i n g . T h i s t y p e i s i n c o m p a t i b l e w i t h 3 : r e t u r n x * 1 0 ; ^ ^ ^ ^ ^ ^ n u m b e r
  2. OCaml 製だけあって OCaml っぽさを感じる 強力さ l e t f o

    o x = x * 1 0 ; ; # v a l f o o : i n t - > i n t = < f u n >
  3. 強力な型推論② f u n c t i o n b

    a r ( x ) { i f ( x < 1 0 ) { r e t u r n ; } r e t u r n x * 1 0 ; } c o n s o l e . l o g ( b a r ( 1 ) * 1 0 ) ; $ f l o w f l o w . j s : 8 8 : c o n s o l e . l o g ( a * 1 0 ) ; ^ u n d e f i n e d . T h i s t y p e i s i n c o m p a t i b l e w i t h 8 : c o n s o l e . l o g ( a * 1 0 ) ; ^ ^ ^ ^ ^ ^ n u m b e r
  4. チェックすればエラー にならない / / @ f l o w f

    u n c t i o n b a r ( x ) { i f ( x < 1 0 ) { r e t u r n ; } r e t u r n x * 1 0 ; } c o n s t a = b a r ( 1 ) ; i f ( a ) { c o n s o l e . l o g ( a * 1 0 ) ; } $ f l o w N o e r r o r s !
  5. ちなみにOCaml 的には こんな感じ l e t b a r x

    = i f x < 1 0 t h e n N o n e e l s e S o m e ( x * 1 0 ) ; ; # v a l b a r : i n t - > i n t o p t i o n = < f u n >
  6. Settings # f l o w c o n f

    i g [ o p t i o n s ] m o d u l e . f i l e _ e x t = . r e a c t . j s m o d u l e . f i l e _ e x t = . j s m o d u l e . n a m e _ m a p p e r . e x t e n s i o n = ' s c s s ' - > ' < P R O J E C T _ R O O T > / i n t e r f a c e / C S S M o d u l e s . j s ' / / C S S M o d u l e s . j s / / @ f l o w / / C S S m o d u l e s h a v e a ` c l a s s N a m e ` e x p o r t w h i c h i s a s t r i n g t y p e C S S M o d u l e = { [ k e y : s t r i n g ] : s t r i n g } ; c o n s t e m p t y C S S M o d u l e : C S S M o d u l e = { } ; e x p o r t d e f a u l t e m p t y C S S M o d u l e ; m o d u l e . n a m e _ m a p p e r . e x t e n s i o n = ' s c s s ' で .scss 拡張子のファイルをimport した際の型を指定
  7. Component and Style / / t i m e r

    _ t e x t . r e a c t . j s i m p o r t s t y l e f r o m ' ! s t y l e ! c s s ! s a s s ! . / t i m e r _ t e x t . s c s s ' ; e x p o r t d e f a u l t c l a s s T i m e r T e x t e x t e n d s C o m p o n e n t { r e n d e r ( ) { r e t u r n ( < d i v c l a s s N a m e = { ` t i m e r - t e x t $ { s t y l e [ " t i m e r - t e x t " ] } ` } > { t h i s . p r o p s . t i m e } < / d i v > ) ; t } } / * t i m e r _ t e x t . s c s s * / : l o c a l ( . t i m e r - t e x t ) { f o n t - s i z e : 1 0 0 p x ; m a r g i n : a u t o ; }
  8. あくまでsyntax checker なのでjs のシンタックスの拡張はし ない TypeScript にあるようなscope 定義や、 Constructor で受け取った値を自動でClass

    のproperty にす るような独自記法は存在しない その分babel と共にあるのでどこまでもesnext の世界で戦え るとも言える //@flow と書けばflow が有効になるし、 書かなければそのままなだけなので手軽に始められる
  9. Flowtype の型はデフォルトでnon­nullable ( 冒頭の紹介の通り) Typescript はnon­nullable type を提供していない 2.0 からサポー

    トする https://github.com/Microsoft/TypeScript/pull/7140 マー ジ済みなので、 最新リポジトリでstrictNullChecks と target es6 を有効にすれば今でも動く