静的型なきJS界を救う英雄たちの話

大正Geek Vol.2 での発表資料です。
https://taisho-geek.connpass.com/event/89869/

Flow と TypeScriptを同時につかってみる話です。
補足ですが、この遊びをしているときに、 TypeScript側にstrictNullCheckをつけ忘れるというミスがありました。つまり、例としてあまりよくありません。ご注意ください。

# 解説
https://blog.eiel.info/blog/2018/06/13/taisho-geek-vol2/

# 関連

- FlowのドキュメントにあるコードをひたすらTypeScriptのPlaygroundで試す
- https://qiita.com/eielh/items/21168709edf2813acdcc

Transcript

1. 静的型なきJS界を
   救う英雄たちの話
   2018-06-13 大正GeekNight Vol.2
   

   View Slide

2. 静的型なきJS界を
   救う英雄達の話
   

   View Slide

3. View Slide

4. の話はしません
   

   View Slide

5. View Slide

6. の話もしません
   

   View Slide

7. Flow TypeScript
   

   View Slide

8. Flowとは
   JavaScriptに型アノテーションを追加
   し、静的型チェックができるツール
   

   View Slide

9. Flowとは
   JavaScriptに型アノテーションを追加
   し、静的型チェックができるツール
   じゅもん特化の賢者(イラスト略)
   

   View Slide

10. TypeScript
    JavaScriptのスーパーセットで、クラ
    スベースOOPと静的型付けを加えた言語
    

    View Slide

11. TypeScript
    JavaScriptのスーパーセットで、クラ
    スベースOOPと静的型付けを加えた言語
    万能かつ優秀な勇者(イラスト略)
    

    View Slide

12. 思ったことありませんか?
    

    View Slide

13. 二人が手を取り合うことを
    

    View Slide

14. 最強のコンビに違いない
    

    View Slide

15. TypeScriptͱFlow
    ಉ࣌ʹ͔ͭͬͯΈ·ͨ͠
    

    View Slide

16. やり方
    

    View Slide

17. 1. FlowとTypeScriptを設定する
    2. .flowconfigに.tsも対象ファイルとして
    設定する
    3. .tsでコードをかく
    4. ファイルの先頭に // @flow をかく
    

    View Slide

18. .flowconfig
    [options]
    module.file_ext=.ts
    

    View Slide

19. github.com
    eiel-sample-code/flow-with-typescript
    

    View Slide

20. https://github.com/eiel-sample-code/flow-with-typescript/blob/master/

    src/Hoge.ts
    

    View Slide

21. View Slide

22. $ flow
    No errors!
    $ tsc
    $ ls dist
    Hoge.js index.js
    

    View Slide

23. 素晴らしい
    

    View Slide

24. View Slide

25. $ flow
    Error
    ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈
    ┈┈┈┈┈┈┈┈┈┈ src/index.ts:6:6
    Cannot call hoge with undefined bound to hoge because:
    • Either property x is missing in undefined [1] but exists in
    Hoge [2].
    • Or undefined [1] is incompatible with null [3].
    src/index.ts
    3│
    4│ hoge({x: 1, y: 2})
    5│ hoge({x: 1, y: 2, z: 3})
    [1] 6│ hoge(undefined)
    7│
    src/Hoge.ts
    [2][3] 7│ export const hoge = (hoge: Hoge | null): Hoge =>
    {
    

    View Slide

26. $ tsc
    src/index.ts:5:19 - error TS2345: Argument of type '{ x:
    number; y: number; z: number; }' is not assignable to
    parameter of type 'Hoge'.
    Object literal may only specify known properties, and
    'z' does not exist in type 'Hoge'.
    5 hoge({x: 1, y: 2, z: 3})
    ~~~~
    

    View Slide

27. View Slide

28. つらい
    

    View Slide

29. わかってたけどつらい
    

    View Slide

30. パズルとしては楽しめる
    

    View Slide

31. 今回の例のポイント
    • Maybeがない(TS)
    • Hoge | null で代用した
    • しかし、TSでは undefined もnull扱い
    • 文法の競合で型のimportができない
    • できることはできる(しかし、使えない)
    • データ定義
    • interfaceを使うしかない
    • classを使ったとき挙動が違う
    • object type使ったときの挙動が違う
    • 関数は問題ない
    

    View Slide

32. FlowとTypeScriptの違いを

    把握するのにやったこと
    Flowのドキュメントにあるコードを

    ひたすらTypeScriptのPlaygroundで試す
    https://qiita.com/eielh/items/
    21168709edf2813acdcc
    

    View Slide

33. まとめ
    

    View Slide

34. まとめ
    • FlowとTypeScriptは一緒に使える
    • ただし、実用性ゼロ
    • 型のimportが詰んでる
    • 同じようなことはできるが文法が違う
    

    View Slide

35. 雑な感想
    • TypeScript
    • クラス中心
    • でも、JSも活かす
    • アノテーションないならany
    • Flow
    • オブジェクト中心
    • クラス使うなら構造が同じでも別の型
    • アノテーションなくても検査
    

    View Slide