Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

の話はしません

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

の話もしません

Slide 7

Slide 7 text

Flow TypeScript

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

最強のコンビに違いない

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

やり方

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

.flowconfig [options] module.file_ext=.ts

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

https://github.com/eiel-sample-code/flow-with-typescript/blob/master/
 src/Hoge.ts

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

素晴らしい

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

$ 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 => {

Slide 26

Slide 26 text

$ 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}) ~~~~

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

つらい

Slide 29

Slide 29 text

わかってたけどつらい

Slide 30

Slide 30 text

パズルとしては楽しめる

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

FlowとTypeScriptの違いを
 把握するのにやったこと Flowのドキュメントにあるコードを
 ひたすらTypeScriptのPlaygroundで試す https://qiita.com/eielh/items/ 21168709edf2813acdcc

Slide 33

Slide 33 text

まとめ

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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