Ce guide est destiné à servir de référence pour moi-même lors de la configuration d'applications React Native avec Typescript. Il explique les étapes nécessaires pour configurer trois manières différentes de configurer les alias de chemin lors de la création d'une application React Native.

Buts:

• Comment configurer l'alias de chemin pour les répertoirescomponents/*
• Comment configurer l'alias de chemin global pour le répertoire srcsrc/*
• Comment configurer l'alias de chemin global pour le répertoire src avec préfixe@/*

Imaginez que nous ayons la configuration nue suivante pour un projet 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”

Comment configurer l'alias de chemin pour les répertoires

Le premier objectif est de configurer le projet de manière à pouvoir utiliser des importations absolues pour des répertoires spécifiques tels que

import { TextInput } from “components/form”

1. Définir l'alias de chemin pour Typescript

Nous devons changer tsconfig.json afin d'indiquer à Typescript où il peut trouver nos modules

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

Nous devons également indiquer à React Native où récupérer nos fichiers, à cette fin, nous devons configurer Babel.

Installer la babel-plugin-module-resolverdépendance en tant que développeur

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

Comment configurer l'alias de chemin pour le répertoire src

Le deuxième objectif est de permettre au projet d'utiliser des importations absolues pour le répertoire src :

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

1. Définir l'alias de chemin pour Typescript

Nous devons ajuster le tsconfig.json pour inclure un alias de chemin pour le répertoire src

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

Nous devons également indiquer à React Native où récupérer nos fichiers, à cette fin, nous devons également ajouter le mappage du répertoire src à 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"
        }
      }
    ]
  ]
}

Le troisième objectif est de permettre au projet d'utiliser des importations absolues pour le répertoire src avec un préfixe.

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

C'est l'option que je choisis habituellement, car elle est assez pratique. Vous pouvez clairement distinguer les importations relatives, les importations absolues et les importations de node_modules .

1. Définir l'alias de chemin pour Typescript

Nous devons ajuster le tsconfig.json pour inclure un alias de chemin pour le répertoire src

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

Nous devons également indiquer à React Native où récupérer nos fichiers, à cette fin, nous devons ajouter le mappage du répertoire src à Babel avec le préfixe utilisé.

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