React Native x TypeScript x TypeDocを構築する

モチベーション

主に以下3つの理由です。

• 巷で話題のReact Nativeをためしてみたかった
• そろそろTypeScriptをちゃんと触りたかった
• TypeDoc良さげだったのでついでに試したかった

試していく中で、少しハマったこともあったので、そこを共有できたら嬉しいです。

前提とする環境

• OS: High Sierra (macOS 10.13.3)
• Node.js: 9.4.
• npm: 5.6.0
• yarn: 1.3.2
• create-react-native-app: 1.0.0

実際の手順

$ npm install -g create-react-native-app
$ create-react-native-app AwesomeProject
$ cd AwesomeProject
$ yarn add @types/react @types/react-native
$ yarn add -D typescript tslint typings typedoc
$ npx tsc --init

tsconfig.jsonを下記のように編集

$ mkdir src
$ cd src
$ touch Root.tsx

Root.tsxを下記のように編集

App.tsxを下記のように編集

$ npx tsc

適宜、package.jsonにスクリプト追加する方がベターです

アプリを動かしたい場合

$ yarn start

ドキュメント作成したい場合

$ npx typedoc --out docs src

こちらも同様に、実際の運用時にはpackage.jsonにスクリプトを追記するのが望ましいです。

ハマったこと

tsconfig.jsonにtypesの指定がない場合、下記のようなエラーが出てしまいます。

Error: /Users/dorayaki/Dev/src/github.com/dorayakikun/AwesomeProject/node_modules/@types/node/index.d.ts(139)
Duplicate identifier ‘require’.
Error: /Users/dorayaki/Dev/src/github.com/dorayakikun/AwesomeProject/node_modules/@types/react-native/index.d.ts(8639)
Duplicate identifier ‘require’.

※型定義が競合しているみたい

むすび

とりあえず、React Native最初の一歩ということで環境構築をしてみました。

折りをみてはてブリーダとかを作れたらなぁと思っています。

参考文献

Getting Started · React Native

TypeScript in CRNA

Is there a conflict between @types/node and @types/react-native? · Issue #15960 ·…