【ReactNative・TypeScript】import に絶対パスを使用する設定

はじめに

ReactNative（0.63~） + TypeScript（4.0~）を使用するプロジェクトで
importに絶対パスを使用する方法をまとめます。

絶対パスによるインポートを許可することで、ネストの深いモジュールをインポートする場合も簡潔にパスを記述できます。

相対パスの例

import * from '../../../component/foo';

絶対パスの例

import * from 'src/component/foo';

方法

以下２つのファイルに設定を加えます。

• tsconfig.json
• metro.config.js

ReactNativeだとtsconfigだけではうまく動かない。

tsconfig.json

"baseUrl": "./"

metro.config.js

const path = require("path")

module.exports = {
  resolver: {
    extraNodeModules: {
      "src": path.resolve(__dirname, 'src'),
    }
  },
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
}

まとめ

以下２つのファイルに設定を加えることで実現できる。

• tsconfig.json
• metro.config.js

もちろん、通常どおり相対パスによる指定も可能です。