わたしもみてる |【Typescript vs Flow】

Flow

ここをわたしもみている
https://djcordhose.github.io/flow-vs-typescript/2016_hhjs.html#/

なぜ型システムを使うか
型システムはコード維持を簡単にさせる

より読みやすくさせ
より解析しやすくさせ
信頼の高いリファクタリングを可能にし
一般的なIDEサポートを可能にし
早い段階でエラーをキャッチできる

わたしにとって一番重要なユースケースは
JSONスタイルデータを扱うときだ
REST payload、configFile,データベースへのオブジェクトなど

TypeScriptは
・Microsoft
・ES6がベースにある
・オプション追加できる(型注釈、可視化、デコレーター)
・コンパイラーはチェックし型注釈を削除する
・最新の1.8はより一般的なチェック機能を加えた
・内部修飾子は型情報を追加できる。pureなJSへの

Flow
ゴールとして実行時エラーをさせないこと
・Facebook
・フローは静的型チェッカーでアプリケーションの中のエラーを素早く見つけるようにデザインされている
・コンパイラーではなくチェッカーだ
・なんの型注釈もなくに動く
・型推論がいい感じだ
・もし型注釈を渡せばbabelによってとても簡単に削除できる

比較
//TypeScript

//1
let obj: string;
obj = 'yo';
//Error Type 'number' is not assignable to type 'string'(数値型は文字列型へ割り当てられない)
obj = 10;

//2
//types can be inferred(返り値型は推測される)
function sayIt(what: string){
 return `Saying: ${what}`;
}
const said : string = sayIt(obj);

//3
class Sayer {
//mandatory(義務的な)
what : string;
constructor(what: string) {
 this.what = what;
}

//return type if you want to
sayIt(): string {
 return `Saying: ${this.what}`;
}
}

Flow

//1
let obj: string;
obj ='yo';
//Error : number: This type is incompatible with string(数値:←この型は文字列型とは不適合だ)
obj = 10;


//2
//一緒
function sayIt(what: string){
 return `Saying: ${what}`;
}
const said : string = sayIt(obj);

//3
//一緒
const said : string = sayIt(obj);
class Sayer {
//mandatory(義務的な)
what : string;
constructor(what: string) {
 this.what = what;
}

RIGHT, PRETTY MUCH THE SAME
そうです。ほとんど同じ！！

これらの基本的な特徴はドキュメントやリファクタリングやIDEのサポートに役立ちます

Non-Nullable Types
コレクションについて

TypeScript

function foo(num: number) {
    if (num > 10) {
      return 'cool';
    }
}
// cool
const result: string = foo(100);
console.log(result.toString());
// still cool?
console.log(foo(1).toString());
// error at runtime (実行時エラー)
"Cannot read property 'toString' of undefined"

TypeScript does not chatch　this
TypeScriptはthisを捕捉できない

Flow

function foo(num: number) {
    if (num > 10) {
        return 'cool';
    }
}
// error: call of method `toString`.エラー。メソッドtoStringの呼び出し
// Method cannot be called on possibly null value(nullの可能性がある値にメソッドは呼び出せません)
console.log(foo(100).toString());

Flowはthisを捕捉できる
なぜ？？

Flowは返り値の型としての文字列を型推論しない

// error: return undefined. This type is incompatible with string
function foo(num: number): string {
	if (num > 10) {
		return 'cool';
	}
}
//まだエラー
nullable Type(TypeScriptのような)は?をつけることによりnullを可能にする

// nullable type: the one inferred
function foo(num: number): ?string {
	if (num > 10) {
		return 'cool';
	}
}

//修正
// to fix this, we need to check the result(thisを修正するために返り値をチェックする必要がある)呼び出し元にもチェックする
const fooed: ?string = foo(100);
if (fooed) {
    fooed.toString();
}

NON-NULLABLE TYPESは、、

ちょっと脱線。
ドキュメントがそこらへん詳しく書いている
Javascriptにおいて、nullは暗黙的にすべてのプリミティブ型に変換します。
それはオブジェクトの種類として有効です。
それとは対照的にFlowはnullを個別の値になるように考えます。

var o = null;
print(o.x);
//Property cannot be accessed on possibly null value

?T とすることで任意の型を書き込むことによってnullを含めることができるが、、まだエラーとしてチェックする
var o: ?string = null;
print(o.length);
//Property cannot be accessed on possibly null or undefined value

nullチェックをしなくてはいけない
//No errors
var o: ?string = null;
if (o == null) {
  o = 'hello';
}
print(o.length);

このコードではif文の後にoはnullじゃないとFlow推論される

・TypeScriptにおいて型はnullable
・デフォルトのFlowにおいて型はnon-nullable。null-ableTypeにすることも可能

Non-nullable types not yet present in TypeScript ( but there is hope )
non-nullable typeはTypeScriptにおいてまだ実装されていない。でも期待はある←ブログの情報古い？？mergeされている

お時間です。
わたしもさらにみている。