Esta guía pretende ser una referencia para mí al configurar aplicaciones React Native con Typescript. Explica los pasos necesarios para configurar tres formas diferentes de configurar alias de ruta al crear una aplicación React Native.

Objetivos:

• Cómo configurar un alias de ruta para directorioscomponents/*
• Cómo configurar un alias de ruta global para el directorio srcsrc/*
• Cómo configurar un alias de ruta global para el directorio src con prefijo@/*

Imagine que tenemos la siguiente configuración básica para un proyecto 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”

Cómo configurar un alias de ruta para directorios

El primer objetivo es configurar el proyecto de modo que podamos usar importaciones absolutas para directorios específicos como

import { TextInput } from “components/form”

1. Establecer alias de ruta para mecanografiado

Necesitamos cambiar tsconfig.json para decirle a Typescript dónde puede encontrar nuestros módulos

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

También necesitamos decirle a React Native dónde tomar nuestros archivos, para este propósito necesitamos configurar Babel.

Instale el babel-plugin-module-resolvercomo una dependencia de desarrollador

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"
        },
      },
    ],
  ],
}

Cómo configurar el alias de ruta para el directorio src

El segundo objetivo es permitir que el proyecto use importaciones absolutas para el directorio src :

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

1. Establecer alias de ruta para mecanografiado

Necesitamos ajustar tsconfig.json para incluir un alias de ruta para el directorio src

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

También debemos decirle a React Native dónde tomar nuestros archivos, para este propósito también debemos agregar el mapeo para el directorio src a Babel.

// 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"
        }
      }
    ]
  ]
}

El tercer objetivo es permitir que el proyecto use importaciones absolutas para el directorio src con un prefijo.

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

Esta es la opción que suelo elegir, ya que es bastante cómoda. Puede distinguir claramente las importaciones relativas, las importaciones absolutas y las importaciones de node_modules .

1. Establecer alias de ruta para mecanografiado

Necesitamos ajustar tsconfig.json para incluir un alias de ruta para el directorio src

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

También necesitamos decirle a React Native dónde tomar nuestros archivos, para este propósito necesitamos agregar el mapeo para el directorio src a Babel con el prefijo utilizado.

// 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": "@"
}