静的型なき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
2. 静的型なきJS界を 救う英雄達の話
4. の話はしません
6. の話もしません
7. Flow TypeScript
8. Flowとは JavaScriptに型アノテーションを追加 し、静的型チェックができるツール
9. Flowとは JavaScriptに型アノテーションを追加 し、静的型チェックができるツール じゅもん特化の賢者(イラスト略)
10. TypeScript JavaScriptのスーパーセットで、クラ スベースOOPと静的型付けを加えた言語
11. TypeScript JavaScriptのスーパーセットで、クラ スベースOOPと静的型付けを加えた言語 万能かつ優秀な勇者(イラスト略)
12. 思ったことありませんか?
13. 二人が手を取り合うことを
14. 最強のコンビに違いない
15. TypeScriptͱFlow ಉ࣌ʹ͔ͭͬͯΈ·ͨ͠
16. やり方
17. 1. FlowとTypeScriptを設定する 2. .flowconfigに.tsも対象ファイルとして 設定する 3. .tsでコードをかく 4. ファイルの先頭に // @flow をかく
18. .flowconfig [options] module.file_ext=.ts
19. github.com eiel-sample-code/flow-with-typescript
20. https://github.com/eiel-sample-code/flow-with-typescript/blob/master/
 src/Hoge.ts
22. $ flow No errors! $ tsc $ ls dist Hoge.js index.js
23. 素晴らしい
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 => {
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}) ~~~~
28. つらい
29. わかってたけどつらい
30. パズルとしては楽しめる
31. 今回の例のポイント • Maybeがない(TS) • Hoge | null で代用した • しかし、TSでは undefined もnull扱い • 文法の競合で型のimportができない • できることはできる(しかし、使えない) • データ定義 • interfaceを使うしかない • classを使ったとき挙動が違う • object type使ったときの挙動が違う • 関数は問題ない
32. FlowとTypeScriptの違いを
 把握するのにやったこと Flowのドキュメントにあるコードを
 ひたすらTypeScriptのPlaygroundで試す https://qiita.com/eielh/items/ 21168709edf2813acdcc
33. まとめ
34. まとめ • FlowとTypeScriptは一緒に使える • ただし、実用性ゼロ • 型のimportが詰んでる • 同じようなことはできるが文法が違う
35. 雑な感想 • TypeScript • クラス中心 • でも、JSも活かす • アノテーションないならany • Flow • オブジェクト中心 • クラス使うなら構造が同じでも別の型 • アノテーションなくても検査