Bu kılavuz, React Native uygulamalarını TypeScript ile ayarlarken kendim için referans olarak tasarlanmıştır. Bir React Native uygulaması oluştururken yol takma adlarını yapılandırmanın üç farklı yolunu yapılandırmak için gerekli adımları açıklar.

Hedefler:

• Dizinler için yol takma adı nasıl kurulurcomponents/*
• src dizini için genel yol takma adı nasıl kurulursrc/*
• önek ile src dizini için genel yol diğer adı nasıl kurulur@/*

Bir React Native projesi için aşağıdaki çıplak kuruluma sahip olduğumuzu hayal edin:

/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”

Dizinler için yol takma adı nasıl kurulur

İlk hedef, projeyi, aşağıdaki gibi belirli dizinler için mutlak ithalatı kullanabileceğimiz şekilde yapılandırmaktır.

import { TextInput } from “components/form”

1. TypeScript için Yol Takma Adını Ayarlayın

TypeScript'e modüllerimizi nerede bulabileceğini söylemek için tsconfig.json'u değiştirmemiz gerekiyor.

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

Ayrıca React Native'e dosyalarımızı nereden alacağımızı söylememiz gerekiyor, bunun için Babel'i yapılandırmamız gerekiyor.

babel-plugin-module-resolverGeliştirici bağımlılığı olarak yükleyin

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

src dizini için yol takma adı nasıl kurulur

İkinci amaç, projenin src dizini için mutlak içe aktarma kullanmasına izin vermektir :

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

1. TypeScript için Yol Takma Adını Ayarlayın

src dizini için bir yol diğer adı eklemek üzere tsconfig.json'u ayarlamamız gerekiyor

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

Ayrıca React Native'e dosyalarımızı nereden alacağımızı söylememiz gerekiyor, bunun için Babel'e src dizini için de mapping eklememiz gerekiyor.

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

Üçüncü amaç, projenin src dizini için bir ön ek ile mutlak içe aktarma kullanmasına izin vermektir .

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

Oldukça uygun olduğu için genellikle seçtiğim seçenek budur. Göreceli içe aktarmaları, mutlak içe aktarmaları ve içe aktarmaları node_modules öğesinden açıkça ayırt edebilirsiniz .

1. TypeScript için Yol Takma Adını Ayarlayın

src dizini için bir yol diğer adı eklemek üzere tsconfig.json'u ayarlamamız gerekiyor

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

Ayrıca React Native'e dosyalarımızı nereden alacağımızı söylememiz gerekiyor, bunun için kullanılan önekle birlikte Babel'e src dizini için mapping eklememiz gerekiyor.

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