Panduan ini dimaksudkan sebagai referensi untuk saya sendiri saat mengatur aplikasi React Native dengan TypeScript. Ini menjelaskan langkah-langkah yang diperlukan untuk mengonfigurasi tiga cara berbeda dalam mengonfigurasi alias jalur saat membuat aplikasi React Native.

Sasaran:

• Cara mengatur alias jalur untuk direktoricomponents/*
• Cara mengatur alias jalur global untuk direktori srcsrc/*
• Cara mengatur alias jalur global untuk direktori src dengan awalan@/*

Bayangkan kita memiliki pengaturan kosong berikut untuk proyek 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”

Cara mengatur alias jalur untuk direktori

Tujuan pertama adalah untuk mengonfigurasi proyek sedemikian rupa sehingga kita dapat menggunakan impor absolut untuk direktori tertentu seperti

import { TextInput } from “components/form”

1. Setel Path Alias ​​untuk TypeScript

Kita perlu mengubah tsconfig.json untuk memberi tahu TypeScript di mana dia dapat menemukan modul kita

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

Kami juga perlu memberi tahu React Native di mana harus mengambil file kami, untuk tujuan ini kami perlu mengonfigurasi Babel.

Instal babel-plugin-module-resolversebagai ketergantungan pengembang

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

Cara mengatur alias jalur untuk direktori src

Tujuan kedua adalah untuk mengizinkan proyek menggunakan impor absolut untuk direktori src :

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

1. Setel Path Alias ​​untuk TypeScript

Kita perlu menyesuaikan tsconfig.json untuk menyertakan alias path untuk direktori src

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

Kita juga perlu memberi tahu React Native di mana harus mengambil file kita, untuk tujuan ini kita juga perlu menambahkan pemetaan untuk direktori src ke 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"
        }
      }
    ]
  ]
}

Tujuan ketiga adalah untuk mengizinkan proyek menggunakan impor absolut untuk direktori src dengan awalan.

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

Ini adalah opsi yang biasanya saya pilih, karena cukup nyaman. Anda dapat membedakan dengan jelas impor relatif, impor absolut, dan impor dari node_modules .

1. Setel Path Alias ​​untuk TypeScript

Kita perlu menyesuaikan tsconfig.json untuk menyertakan alias path untuk direktori src

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

Kita juga perlu memberi tahu React Native tempat mengambil file kita, untuk tujuan ini kita perlu menambahkan pemetaan untuk direktori src ke Babel dengan awalan yang digunakan.

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