Este guia é uma referência para mim ao configurar aplicativos React Native com Typescript. Ele explica as etapas necessárias para configurar três maneiras diferentes de configurar aliases de caminho ao criar um aplicativo React Native.

Metas:

• Como configurar o alias de caminho para diretórioscomponents/*
• Como configurar o alias de caminho global para o diretório srcsrc/*
• Como configurar o alias de caminho global para o diretório src com prefixo@/*

Imagine que temos a seguinte configuração básica para um projeto React Native:

/Users/skaan/Dev/rnapp
├── App.tsx
├── app.json
├── babel.config.js
├── package.json
├── src
|  ├── components
|  |  ├── form
|  |  |  ├── TextInput.tsx
|  |  |  └── index.tsx
|  ├── index.tsx
|  └── screens
|     └── Auth
|        └── index.tsx
|        └── AuthForm.tsx
├── tsconfig.json
└── yarn.lock

import { TextInput } from “../../components/form”

Como configurar o alias de caminho para diretórios

O primeiro objetivo é configurar o projeto de forma que possamos usar importações absolutas para diretórios específicos como

import { TextInput } from “components/form”

1. Defina o alias de caminho para o Typescript

Precisamos alterar o tsconfig.json para informar ao Typescript onde ele pode encontrar nossos módulos

// tsconfig.json
{
  "extends": "@tsconfig/react-native/tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "components/*": ["src/components/*"]
    }
  },
  ...
}

Também precisamos informar ao React Native onde pegar nossos arquivos, para isso precisamos configurar o Babel.

Instalar babel-plugin-module-resolvercomo uma dependência de desenvolvedor

yarn add --dev babel-plugin-module-resolver
npm install -save-dev babel-plugin-module-resolver

// babel.config.js
module.exports = {
  presets: ["module:metro-react-native-babel-preset"],
  plugins: [
    [
      "module-resolver",
      {
        root: ["./src"],
        extensions: [".ios.js", ".android.js", ".js", ".ts", ".tsx", ".json"],
        alias: {
          "components/": "./src/components"
        },
      },
    ],
  ],
}

Como configurar o alias de caminho para o diretório src

O segundo objetivo é permitir que o projeto use importações absolutas para o diretório src :

import { TextInput } from “src/components/form”

1. Defina o alias de caminho para o Typescript

Precisamos ajustar o tsconfig.json para incluir um alias de caminho para o diretório src

// tsconfig.json
{
  "extends": "@tsconfig/react-native/tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "components/*": ["src/components/*"],
      "src/*": ["src/*"]
    },
  },
  ...
}

Também precisamos dizer ao React Native onde pegar nossos arquivos, para esse propósito, precisamos adicionar o mapeamento para o diretório src ao Babel também.

// babel.config.js
module.exports = {
  presets: ["module:metro-react-native-babel-preset"],
  plugins: [
    [
      "module-resolver",
      {
        root: ["./src"],
        extensions: [".ios.js", ".android.js", ".js", ".ts", ".tsx", ".json"],
        alias: {
          "components/": "./src/components",
          "src/": "./src"
        }
      }
    ]
  ]
}

O terceiro objetivo é permitir que o projeto use importações absolutas para o diretório src com um prefixo.

import { TextInput } from “@/components/form”

Esta é a opção que costumo escolher, pois é bastante conveniente. Você pode distinguir claramente importações relativas, importações absolutas e importações de node_modules .

1. Defina o alias de caminho para o Typescript

Precisamos ajustar o tsconfig.json para incluir um alias de caminho para o diretório src

// tsconfig.json
{
  "extends": "@tsconfig/react-native/tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
  },
  ...
}

Também precisamos informar ao React Native onde pegar nossos arquivos, para isso precisamos adicionar o mapeamento do diretório src ao Babel com o prefixo usado.

// babel.config.js
module.exports = {
  presets: ["module:metro-react-native-babel-preset"],
  plugins: [
    [
      "module-resolver",
      {
        root: ["./src"],
        extensions: [".ios.js", ".android.js", ".js", ".ts", ".tsx", ".json"],
        alias: {
          "@/": "./src"
        }
      }
    ]
  ]
}

{
  "name": "@"
}