React NativeでflowからTypeScriptに移行する下準備

やりたいこと

中規模ぐらいのこの JavaScript（flow） ファイルたちを TypeScript に移行していきたい。

少しずつだが、その記録を記事としてメモメモ。

ファイル数

$ find src/ -name '*.js' | wc -l
358

JavaScriptの行数

$ find . -name '*.js' | xargs wc -l
30984

ディレクトリ内のすべてのファイルの行数を人間が読める形式でどのようにリストしますか。

TypeScriptをテンプレートとしてReact Nativeアプリを作る

$ npx react-native init ReactNativeApp --template react-native-template-typescript

Using TypeScript · React Native

flowのjsファイルを作る

src/flow-type.js

// @flow

type State = {
  isReady: boolean,
};

export function flowHoge(foo: ?string = null, action: State): number {
  console.log(foo, action.isReady);
  return 1;
}

TypeScriptのtsファイルを作る

src/typescript-type.js

type State = {
  isReady: boolean;
};

export function tsHoge(
  foo: string | null | undefined = null,
  action: State,
): number {
  console.log(foo, action.isReady);
  return 1;
}

両方のファイルをエントリーポイントから読み込む

import {tsHoge} from './src/typescript-type';
import {flowHoge} from './src/flow-type';

tsHoge('a', {
  isReady: false,
});
flowHoge('b', {
  isReady: true,
});

ぼくのエディター上は flow-type の方の js ファイルはエラーを指摘してくるが、 react-native コンパイラは怒ってこないので、特殊な構文を使っていない限り、比較的楽に移行できる気がする（気がしているだけな気もする！）

まずはこのエントリーをジャブとする。