React ile TypeScript: Ölçeklenebilir ve Sürdürülebilir Uygulamalar için En İyi Uygulamalar

TypeScript ve React, modern web uygulamaları oluşturmak için güçlü bir kombinasyondur. TypeScript, JavaScript'e statik tipleme getirerek kod kalitesini ve sürdürülebilirliğini artırırken, React kullanıcı arayüzleri oluşturmak için bildirimsel ve bileşen tabanlı bir yaklaşım sunar. Bu blog gönderisi, küresel bir kitleye uygun, sağlam, ölçeklenebilir ve sürdürülebilir uygulamalar oluşturmak için React ile TypeScript kullanmaya yönelik en iyi uygulamaları keşfetmektedir.

Neden React ile TypeScript Kullanmalısınız?

En iyi uygulamalara dalmadan önce, TypeScript'in React geliştirmesine neden değerli bir katkı olduğunu anlayalım:

• Geliştirilmiş Kod Kalitesi: TypeScript'in statik tiplemesi, hataları geliştirme sürecinin başlarında yakalamaya yardımcı olarak çalışma zamanı sorunlarını azaltır ve kod güvenilirliğini artırır.
• Gelişmiş Sürdürülebilirlik: Tip açıklamaları ve arayüzler, kodun anlaşılmasını ve yeniden düzenlenmesini kolaylaştırarak daha iyi uzun vadeli sürdürülebilirliğe yol açar.
• Daha İyi IDE Desteği: TypeScript, otomatik tamamlama, kod navigasyonu ve yeniden düzenleme araçları dahil olmak üzere mükemmel IDE desteği sağlayarak geliştirici üretkenliğini artırır.
• Azaltılmış Hatalar: Statik tipleme, birçok yaygın JavaScript hatasını çalışma zamanından önce yakalayarak daha kararlı ve hatasız bir uygulamaya yol açar.
• Geliştirilmiş İşbirliği: Açık tip tanımları, ekiplerin büyük projelerde işbirliği yapmasını kolaylaştırır, çünkü geliştiriciler farklı bileşenlerin ve işlevlerin amacını ve kullanımını hızlı bir şekilde anlayabilirler.

Bir TypeScript React Projesi Kurma

Create React App Kullanarak

Yeni bir TypeScript React projesine başlamanın en kolay yolu, TypeScript şablonuyla Create React App'i kullanmaktır:

npx create-react-app my-typescript-react-app --template typescript

Bu komut, gerekli bağımlılıklar ve bir tsconfig.json dosyası dahil olmak üzere TypeScript yapılandırılmış temel bir React projesi kurar.

tsconfig.json Yapılandırma

tsconfig.json dosyası, TypeScript yapılandırmanızın kalbidir. İşte bazı önerilen ayarlar:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

Dikkate alınması gereken temel seçenekler:

• "strict": true: Potansiyel hataları yakalamak için şiddetle tavsiye edilen katı tip kontrolünü etkinleştirir.
• "esModuleInterop": true: CommonJS ve ES modülleri arasında birlikte çalışabilirliği etkinleştirir.
• "jsx": "react-jsx": React kodunu basitleştiren ve performansı artıran yeni JSX dönüşümünü etkinleştirir.

TypeScript ile React Bileşenleri için En İyi Uygulamalar

Bileşen Özelliklerini Tiplendirme

TypeScript'i React ile kullanmanın en önemli yönlerinden biri, bileşen özelliklerinizi düzgün bir şekilde tiplendirmektir. Özellik nesnesinin şeklini tanımlamak için arayüzleri veya tip takma adlarını kullanın.

interface MyComponentProps {
  name: string;
  age?: number; // İsteğe bağlı özellik
  onClick: () => void;
}

const MyComponent: React.FC = ({ name, age, onClick }) => {
  return (
    

      
Merhaba, {name}!
      {age && 
{age} yaşındasınız.
}
      Bana tıkla
    
  );
};

React.FC<MyComponentProps> kullanmak, bileşenin işlevsel bir bileşen olmasını ve özelliklerin doğru şekilde tiplenmesini sağlar.

Bileşen Durumunu Tiplendirme

Sınıf bileşenleri kullanıyorsanız, bileşenin durumunu da tiplendirmeniz gerekir. Durum nesnesi için bir arayüz veya tip takma adı tanımlayın ve bileşen tanımında kullanın.

interface MyComponentState {
  count: number;
}

class MyComponent extends React.Component<{}, MyComponentState> {
  state: MyComponentState = {
    count: 0
  };

  handleClick = () => {
    this.setState({
      count: this.state.count + 1
    });
  };

  render() {
    return (
      

        
Sayı: {this.state.count}
        Artır
      
    );
  }
}

useState kancasını kullanan işlevsel bileşenler için TypeScript genellikle durum değişkeninin türünü çıkarabilir, ancak açıkça da sağlayabilirsiniz:

import React, { useState } from 'react';

const MyComponent: React.FC = () => {
  const [count, setCount] = useState(0);

  return (
    

      
Sayı: {count}
       setCount(count + 1)}>Artır
    
  );
};

Tip Korumaları Kullanma

Tip korumaları, belirli bir kapsam içinde bir değişkenin türünü daraltan işlevlerdir. Birleşim türleriyle uğraşırken veya bir işlem gerçekleştirmeden önce bir değişkenin belirli bir türe sahip olduğundan emin olmanız gerektiğinde kullanışlıdırlar.

interface Circle {
  kind: "circle";
  radius: number;
}

interface Square {
  kind: "square";
  side: number;
}

type Shape = Circle | Square;

function isCircle(shape: Shape): shape is Circle {
  return shape.kind === "circle";
}

function getArea(shape: Shape): number {
  if (isCircle(shape)) {
    return Math.PI * shape.radius ** 2;
  } else {
    return shape.side ** 2;
  }
}

isCircle işlevi, bir Shape'in bir Circle olup olmadığını kontrol eden bir tip korumasıdır. if bloğu içinde TypeScript, shape'in bir Circle olduğunu bilir ve radius özelliğine erişmenize izin verir.

Olayları İşleme

React'ta TypeScript ile olayları işlerken, olay nesnesini doğru şekilde tiplendirmek önemlidir. React ad alanından uygun olay türünü kullanın.

const MyComponent: React.FC = () => {
  const handleChange = (event: React.ChangeEvent) => {
    console.log(event.target.value);
  };

  return (
    
  );
};

Bu örnekte, bir giriş öğesindeki bir değişiklik olayı için olay nesnesini tiplendirmek için React.ChangeEvent<HTMLInputElement> kullanılır. Bu, bir HTMLInputElement olan target özelliğine erişim sağlar.

Proje Yapısı

İyi yapılandırılmış bir proje, sürdürülebilirlik ve ölçeklenebilirlik için çok önemlidir. İşte bir TypeScript React uygulaması için önerilen bir proje yapısı:

src/
├── components/
│   ├── MyComponent/
│   │   ├── MyComponent.tsx
│   │   ├── MyComponent.module.css
│   │   └── index.ts
├── pages/
│   ├── HomePage.tsx
│   └── AboutPage.tsx
├── services/
│   ├── api.ts
│   └── auth.ts
├── types/
│   ├── index.ts
│   └── models.ts
├── utils/
│   ├── helpers.ts
│   └── constants.ts
├── App.tsx
├── index.tsx
├── react-app-env.d.ts
└── tsconfig.json

Temel noktalar:

• Bileşenler: İlgili bileşenleri dizinler halinde gruplandırın. Her dizin, bileşenin TypeScript dosyasını, CSS modüllerini (kullanılıyorsa) ve bileşeni dışa aktarmak için bir index.ts dosyası içermelidir.
• Sayfalar: Uygulamanızın farklı sayfalarını temsil eden üst düzey bileşenleri saklayın.
• Hizmetler: API çağrılarını ve diğer hizmetleri bu dizinde uygulayın.
• Tipler: Genel tip tanımlarını ve arayüzlerini bu dizinde tanımlayın.
• Araçlar: Yardımcı işlevleri ve sabitleri saklayın.
• index.ts: Bir dizindeki modülleri yeniden dışa aktarmak için index.ts dosyalarını kullanarak modülleri içe aktarmak için temiz ve düzenli bir API sağlayın.

TypeScript ile Kancaları Kullanma

React Kancaları, işlevsel bileşenlerde durumu ve diğer React özelliklerini kullanmanıza olanak tanır. TypeScript, Kancalarla sorunsuz bir şekilde çalışır, tip güvenliği ve gelişmiş geliştirici deneyimi sağlar.

useState

Daha önce gösterildiği gibi, useState kullanırken durum değişkenini açıkça tiplendirebilirsiniz:

import React, { useState } from 'react';

const MyComponent: React.FC = () => {
  const [count, setCount] = useState(0);

  return (
    

      
Sayı: {count}
       setCount(count + 1)}>Artır
    
  );
};

useEffect

useEffect kullanırken, bağımlılık dizisine dikkat edin. TypeScript, efekt içinde kullanılan bir bağımlılığı eklemeyi unutursanız hataları yakalamanıza yardımcı olabilir.

import React, { useState, useEffect } from 'react';

const MyComponent: React.FC = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Sayı: ${count}`;
  }, [count]); // Bağımlılık dizisine 'count' ekleyin

  return (
    

      
Sayı: {count}
       setCount(count + 1)}>Artır
    
  );
};

Bağımlılık dizisinden count'u çıkarırsanız, efekt yalnızca bileşen bağlandığında bir kez çalışır ve sayı değiştiğinde belge başlığı güncellenmez. TypeScript sizi bu potansiyel sorun hakkında uyaracaktır.

useContext

useContext kullanırken, bağlam değeri için bir tür sağlamanız gerekir.

import React, { createContext, useContext } from 'react';

interface ThemeContextType {
  theme: string;
  toggleTheme: () => void;
}

const ThemeContext = createContext(undefined);

const ThemeProvider: React.FC = ({ children }) => {
  // Tema mantığını burada uygulayın
  return (
     {} }}>
      {children}
    
  );
};

const MyComponent: React.FC = () => {
  const { theme, toggleTheme } = useContext(ThemeContext) as ThemeContextType;

  return (
    

      
Tema: {theme}
      Temayı Değiştir
    
  );
};

export { ThemeProvider, MyComponent };

Bağlam değeri için bir tür sağlayarak, useContext kancasının doğru türe sahip bir değer döndürmesini sağlarsınız.

TypeScript React Bileşenlerini Test Etme

Test etme, sağlam uygulamalar oluşturmanın önemli bir parçasıdır. TypeScript, tip güvenliği ve gelişmiş kod kapsamı sağlayarak test etmeyi geliştirir.

Birim Testi

Bileşenlerinizi birim test etmek için Jest ve React Testing Library gibi test çerçevelerini kullanın.

// MyComponent.test.tsx
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('bileşeni doğru adla oluşturur', () => {
    render();
    expect(screen.getByText('Merhaba, John!')).toBeInTheDocument();
  });

  it('düğmeye tıklandığında onClick işleyicisini çağırır', () => {
    const onClick = jest.fn();
    render();
    fireEvent.click(screen.getByRole('button'));
    expect(onClick).toHaveBeenCalledTimes(1);
  });
});

TypeScript'in tip kontrolü, yanlış özellikler geçirme veya yanlış olay işleyicilerini kullanma gibi testlerinizdeki hataları yakalamaya yardımcı olur.

Entegrasyon Testi

Entegrasyon testleri, uygulamanızın farklı bölümlerinin birlikte doğru şekilde çalıştığını doğrular. Uçtan uca test için Cypress veya Playwright gibi araçları kullanın.

Performans Optimizasyonu

TypeScript, geliştirme sürecinin başlarında potansiyel performans darboğazlarını yakalayarak performans optimizasyonuna da yardımcı olabilir.

Belleğe Alma (Memoization)

İşlevsel bileşenleri belleğe almak ve gereksiz yeniden oluşturmaları önlemek için React.memo'yu kullanın.

import React from 'react';

interface MyComponentProps {
  name: string;
}

const MyComponent: React.FC = ({ name }) => {
  console.log('MyComponent Oluşturuluyor');
  return (
    
Merhaba, {name}!
  );
};

export default React.memo(MyComponent);

React.memo, bileşen yalnızca özellikler değiştiyse yeniden oluşturulur. Bu, özellikle karmaşık bileşenler için performansı önemli ölçüde artırabilir.

Kod Bölme

Kodunuzu daha küçük parçalara bölmek ve isteğe bağlı olarak yüklemek için dinamik içe aktarmaları kullanın. Bu, uygulamanızın ilk yükleme süresini azaltabilir.

import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

const App: React.FC = () => {
  return (
    Yükleniyor...