typescript

2019-05-23

RNプロジェクトへtypescriptを適用して開発してみよう。

react-nativeプロジェクト生成

下記のコマンドを使ってRNのプロジェクトを生成します。

react-native init proejct-name

typescriptへ必要なライブラリをインストール

typescriptが動作出来るようにするため必要なライブラリをインストールします。

npm install typescript @types/react @types/react-native --save-dev

typescript ライブラリ

  • typescript: typescriptをインストール。
  • @types/react: typescriptへ必要なreactのtypeをインストール。
  • @types/react-native: typescriptへ必要なreact-nativeのtypeをインストール。

typescript設定

typescriptを設定してreact-nativeが動作出来るようにします。

tsconfig.jsonを作る

プロジェクトのrootフォルダへtsconfig.jsonファイルを作成して下記の内容をコピペします。

{
  "compilerOptions": {
    "target": "es2015",
    "module": "commonjs",
    "moduleResolution": "node",
    "noResolve": false,
    "noImplicitAny": false,
    "removeComments": false,
    "allowJs": true,
    "jsx": "react",
    "allowSyntheticDefaultImports": true,
    "typeRoots": ["./node_modules/@types", "./src/@types"]
  },
  "exclude": [
    "node_modules",
    "dest",
    "android",
    "ios",
    "acceptance-tests",
    ".jest",
    "src/setupTests.ts",
    "./node_modules/**/*"
  ],
  "include": ["./node_modules/@types", "./src/**/*", "./src/@types"]
}

詳しい内容は公式ホームページを参考してください。

tslint.jsonを作る

typescriptの開発を便利にするためtslintを適用します。下記の内容をプロジェクトのrootフォルダへtslint.jsonを作ってコピペします。

{
    "extends": [],
    "defaultSeverity": "warning",
    "linterOptions": {
      "exclude": [
        "config/**/*.js",
        "node_modules/**/*.ts"
      ]
    }
}

詳しい内容は公式ホームページを参考してください。

rn-cli.config.jsを作る

Bruno LemosさんがNo need for rn-cli.config.js anymore since v0.57でファイスブック(facebook)へコメントをくれって確認した結果、RN(react-native)のバージョン0.57以上はrn-cli.config.jsが要らないです。ご参考してください。

typescriptをランタイム中に認識できることを助けてくれるライブラリの設定ファイルです。プロジェクトのrootフォルダへrn-cli.config.jsファイルへ下記の内容を作成します。

module.exports = {
  getTransformModulePath() {
    return require.resolve('react-native-typescript-transformer');
  },
  getSourceExts() {
    return ['ts', 'tsx'];
  },
};

typescriptでコーディングする。

App.jsをApp.tsxにファイル名を変更してtypescriptスタイルでコーディングします。

import * as React from 'react';
...
interface Props {}
interface State {}
...
export default class App extends React.Component<Props, State> {
Buy me a coffeeBuy me a coffee
Posts