TypeScript vs Flow

README.md

TypeScript vs Flow

Comparison of two javascript type checker mainly about tagged union = discriminated union = disjoint union.

Short answer: TypeScript win!

Reference: facebook/flow#2400

Z1.ts

// TypeScript 2.2, compiled with: --strictNullChecks
'use strict'

type PaymentMethod =
  { kind: 'cash', receipt() } |
  { kind: 'paypal', email() } |
  { kind: 'credit', activeX() }

function describePaymentMethod(method: PaymentMethod): string {
  switch (method.kind) {
    //case 'ㅇㅅㅇ': return 'Nooo' // NOTE: 이 코드 주석을 해제하면, 타입 에러가 남
    case 'cash':
      method.receipt()
      return '캐시'
    case 'paypal':
      method.email()
      return '페이팔'
    case 'credit':
      method.activeX()
      //method.email() // NOTE: 이 코드 주석을 해제하면, 타입 에러가 남
      return '카드' // NOTE: 이 코드 주석처리하면 타입에러가 남
  }
}

Z2.js

// @flow
// v0.44.1
'use strict'

type PaymentMethod =
  {| kind: 'cash', receipt: () => void |} |
  {| kind: 'paypal', email: () => void |} |
  {| kind: 'credit', activeX: () => void |};

// NOTE: exhaustive하게 처리해줬음에도 불구하고, 컴파일러가
// 인지를 못해서 불필요한 default clause를 넣어야 함!!!!
function describePaymentMethod(method: PaymentMethod): string {
  switch (method.kind) {
    //case 'ㅇㅅㅇ': return 'Nooo'; // NOTE: 이 코드 주석을 해제해도, 타입 에러가 나지 않음!!!!
    default: return 'ㅇㅅㅇ;;'; // NOTE: 이 코드가 없어도 컴파일 되어야 정상임!!!
    case 'cash':
      method.receipt();
      return '현금';
    case 'paypal':
      method.email()
      return '페이팔'
    case 'credit':
      method.activeX()
      //method.email() // NOTE: 이 코드 주석을 해제하면, 타입 에러가 남
      return '카드' // NOTE: 이 코드 주석처리하면 타입에러가 남
  }
}