[TR] TypeScript ile Daha Güvenli ve Esnek React Native Geliştirme

TypeScript ve React Native kombinasyonu, modern mobil uygulama geliştirme süreçlerinde güçlü bir araç seti sunar. Bu yazıda, TypeScript’in avantajlarını ve React Native projelerinde nasıl kullanılabileceğini anlatacağım.✅

TypeScript Nedir ve Neden Kullanılmalıdır?

TypeScript, JavaScript’in bir süper seti olup, statik tür kontrolü sağlayarak kodun daha güvenli ve hata toleranslı olmasını sağlar. JavaScript dinamik bir dil olduğu için değişkenlerin türleri çalışma zamanında belirlenir ve bu da bazen hatalara yol açabilir. TypeScript, bu sorunu ortadan kaldırarak daha sağlam bir kod yazmanıza yardımcı olur.💙

⭐Avantajları:

• Statik Tür Kontrolü: TypeScript, kodunuzu yazarken tür hatalarını yakalar ve bu sayede çalışma zamanında karşılaşabileceğiniz sorunları önler.
• Daha İyi Geliştirici Deneyimi: TypeScript, IDE’lerde daha iyi otomatik tamamlama ve hata bulma özellikleri sunar.
• Kolay Bakım ve Refaktörizasyon: Tür bilgileri, kodun daha kolay anlaşılmasını ve düzenlenmesini sağlar.

Örneğin, bir JavaScript fonksiyonunun nasıl TypeScript ile daha güvenli hale getirilebileceğine bakalım:

function greet(name: string): string {
  return `Hello, ${name}`;
}

console.debug(greet("React Native")); // Çıktı: Hello, React Native

Bu örnekte, name parametresinin bir string olduğunu belirttik. Böylece yanlış türde bir parametre kullanıldığında TypeScript hata verecektir.

Type ve Interface Arasındaki Farklar

TypeScript’te type ve interface kullanarak tür tanımlamaları yapabilirsiniz. Ancak, bu iki yapı arasında bazı farklar vardır.

Interface:

• Genişletilebilirlik: interface tanımları genişletilebilir. Birden fazla interface birleştirilerek yeni bir interface oluşturulabilir.
• Deklarasyon Birleştirme: Aynı isimde birden fazla interface tanımı yapıldığında, TypeScript bu tanımları birleştirir.

interface User {
  id: number;
  name: string;
}

interface User {
  email: string;
}

const user: User = {
  id: 1,
  name: 'John Doe',
  email: 'john.doe@example.com'
};

Type:

• Birleşik Türler: type ile birleşik türler (union types) ve kesişim türleri (intersection types) oluşturulabilir.
• Diğer Türlerle Kullanım: type, interface dışındaki diğer türlerle (örneğin, string, number) birlikte kullanılabilir.

Örnek:

type ID = number | string;

type Product = {
  id: ID;
  name: string;
  price: number;
};

const product: Product = {
  id: 'abc123',
  name: 'Product Name',
  price: 99.99
};

type ve interface arasında seçim yaparken, projenizin ihtiyaçlarına ve kodun genişletilebilirliğine göre karar verebilirsiniz.

Any Türü ve Birleşik Türler

TypeScript’te any türü, herhangi bir türde veri taşıyabilen bir türdür. Ancak, any türü kullanımı, TypeScript'in sağladığı tür güvenliğini azaltabilir.

Örnek:

let value: any;

value = 123;  // Geçerli
value = 'Hello';  // Geçerli
value = true;  // Geçerli

Birleşik türler (union types) ise, bir değişkenin birden fazla türde değer alabileceğini belirtir:

Örnek:

type ID = number | string;

let userId: ID;

userId = 123;  // Geçerli
userId = 'abc123';  // Geçerli

Bu özellikler, daha esnek ve güçlü tür tanımlamaları yapmanıza olanak tanır.

🚀React Native Projelerinde TypeScript Kurulumu

React Native projelerinde TypeScript kullanmak için öncelikle gerekli bağımlılıkları yüklememiz gerekiyor. Yeni bir proje oluştururken TypeScript’i doğrudan entegre edebiliriz.

Yeni Proje Oluşturma:

npx react-native init MyTSProject --template react-native-template-typescript

Mevcut Projeye TypeScript Ekleme:

1. Gerekli bağımlılıkları yükleyin:

npm install --save-dev typescript @types/react @types/react-native

2. tsconfig.json dosyasını oluşturun:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es6"],
    "jsx": "react",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "skipLibCheck": true
  }
}

3 .js dosyalarını .tsx veya .ts olarak değiştirin.

🛡️TypeScript ile Daha Güvenli Kod Yazma

TypeScript’in en büyük avantajlarından biri, statik tür kontrolü sayesinde daha güvenli kod yazmanıza olanak tanımasıdır. Bu, özellikle büyük projelerde ve ekip çalışmalarında hata yapma olasılığını azaltır.

interface User {
  id: number;
  name: string;
  email: string;
}

const getUser = (id: number): User => {
  return {
    id,
    name: 'John Doe',
    email: 'john.doe@example.com',
  };
};

const user = getUser(1);
console.debug(user.name); // Çıktı: John Doe

Bu örnekte, User arayüzünü tanımladık ve getUser fonksiyonunun dönüş türünü User olarak belirledik. Böylece fonksiyonun döndüreceği verinin yapısı net olarak belirlenmiş oldu.

TypeScript ile Ölçeklenebilir Kod Yapısı Oluşturma

Büyük projelerde kodun ölçeklenebilir ve modüler olması önemlidir. TypeScript, modüler ve iyi organize edilmiş kod yapıları oluşturmanızı sağlar. Bu, kodun daha kolay anlaşılmasını ve bakımının daha kolay yapılmasını sağlar.

// components/Button.tsx
import React from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';

interface ButtonProps {
  title: string;
  onPress: () => void;
}

const Button: React.FC<ButtonProps> = ({ title, onPress }) => {
  return (
    <TouchableOpacity onPress={onPress} style={styles.button}>
      <Text style={styles.text}>{title}</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    backgroundColor: 'blue',
    padding: 10,
    borderRadius: 5,
  },
  text: {
    color: 'white',
    textAlign: 'center',
  },
});

export default Button;

Bu örnekte, Button bileşeni için bir ButtonProps arayüzü tanımladık ve bu arayüzü bileşenin props olarak kullandık. Bu sayede Button bileşeni, yalnızca belirlenen türdeki props'ları kabul eder.

TypeScript’in React Native Projelerine Entegrasyonu

TypeScript, React Native projelerine sorunsuz bir şekilde entegre edilebilir. Yukarıda bahsettiğimiz kurulum adımlarını takip ettikten sonra, mevcut JavaScript dosyalarınızı TypeScript dosyalarına dönüştürmeye başlayabilirsiniz.

Örnek:

// App.tsx
import React from 'react';
import { SafeAreaView, StyleSheet, Text } from 'react-native';
import Button from './components/Button';

const App: React.FC = () => {
  const handlePress = () => {
    console.log('Button Pressed!');
  };

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.title}>Welcome to React Native with TypeScript</Text>
      <Button title="Press Me" onPress={handlePress} />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 24,
    marginBottom: 20,
  },
});

export default App;

TypeScript Kullanarak React Native’de Sık Yapılan Hatalardan Kaçınma

TypeScript, birçok yaygın hatayı önlemenize yardımcı olabilir. Örneğin, yanlış türde veri kullanımı veya eksik parametreler gibi hatalar derleme aşamasında tespit edilir:

Örnek:

interface Product {
  id: number;
  name: string;
  price: number;
}

const getProduct = (id: number): Product => {
  return {
    id,
    name: 'Product Name',
    price: 99.99,
  };
};

const product = getProduct(1);
console.debug(product.price); // Çıktı: 99.99

Bu örnekte, Product arayüzünü tanımladık ve getProduct fonksiyonunun dönüş türünü Product olarak belirledik. Bu sayede fonksiyonun döndüreceği verinin yapısı net olarak belirlenmiş oldu.

Import Yollarını Kısaltmak

Büyük projelerde, dosya yollarının yönetimi zor olabilir. TypeScript’in paths özelliğini kullanarak import yollarını kısaltabilirsiniz.

Örnek:

tsconfig.json dosyasına aşağıdaki ayarları ekleyin:

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@components/*": ["components/*"],
      "@utils/*": ["utils/*"]
    }
  }
}

Bu ayarlar sayesinde, import işlemlerini şu şekilde yapabilirsiniz:

import Button from '@components/Button';
import { formatDate } from '@utils/date';

Bu yöntem, projeyi daha düzenli hale getirir ve dosya yollarının yönetimini kolaylaştırır.

TypeScript, React Native projelerinde daha güvenli ve ölçeklenebilir kod yazmanıza olanak tanır. Statik tür kontrolü sayesinde hataları erken aşamada tespit edebilir, modüler ve iyi organize edilmiş kod yapıları oluşturabilirsiniz. Bu yazıda TypeScript’in avantajlarını ve React Native projelerine nasıl entegre edilebileceğini teorik bilgilerle anlattım ve örneklerle desteklemeye çalıştım. TypeScript kullanarak projelerinizi daha sürdürülebilir ve yönetilebilir hale getirebilirsiniz.

[TR] React Projemizi Firebase ile Nasıl Deploy Edebiliriz ?

[TR] Axios Interceptors

[TR] ReactNative APK Oluşturma