Skip to main content

Gatsby TypeScript Kurulumu: TypeScript ile GatsbyJS Projesini Adım Adım Yapılandırma 💻

🎯 Bu Rehberde Ne Öğreneceksiniz?​

Bu rehberde, GatsbyJS projenizi TypeScript ile entegre ederek hataları erken aşamada yakalamayı ve kodunuzu güvenli hale getirmeyi öğreneceksiniz.
Yeni Gatsby projesi kurulumundan, bileşenlerin .tsx formatına dönüştürülmesine kadar tüm süreçleri sade bir dille anlatıyoruz.

⚙️ 1️⃣ Yeni Gatsby Projesi Oluşturma ve Temizlik​

💻 Projeyi Başlatın​

gatsby new rabisu-gatsby-ts
cd rabisu-gatsby-ts

➡️ Bu komut, temel Gatsby dosyalarını oluşturur ve sizi geliştirmeye hazır hale getirir.

🧹 Gereksiz Dosyaları Kaldırın​

Aşağıdaki komutlarla kullanılmayan yapılandırma dosyalarını temizleyin:


rm gatsby-node.js gatsby-browser.js gatsby-ssr.js

➡️ Bu, projenizi sadeleştirir ve TypeScript entegrasyonu için ideal hale getirir.

📦 2️⃣ TypeScript Bağımlılıklarını Kurun​

Gatsby, TypeScript için yerleşik desteğe sahiptir, ancak bazı tip tanımlamaları eklemeniz gerekir:


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

➡️ Bu komut, React ve DOM için tip denetimi sağlar.

🔄 JS Dosyalarını TSX Formatına Taşıyın​


mv src/components/header.js src/components/header.tsx
mv src/components/layout.js src/components/layout.tsx
mv src/components/seo.js src/components/seo.tsx
mv src/pages/index.js src/pages/index.tsx

➡️ .tsx uzantısı, JSX içeren TypeScript dosyaları için zorunludur.

🧩 3️⃣ TypeScript Derleyici Ayarları (tsconfig.json)​

Proje kök dizinine tsconfig.json oluşturun:


{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "jsx": "preserve",
    "strict": true,
    "noEmit": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true
  },
  "include": ["./src/**/*"]
}

➡️ Bu yapı, katı tip denetimi sağlar ama Gatsby’nin Babel derlemesine müdahale etmez.

🧠 4️⃣ SEO Bileşenini TypeScript ile Yeniden Yazın​

src/components/seo.tsx dosyasındaki PropTypes yapısını kaldırın ve aşağıdaki gibi yeniden oluşturun:


import * as React from "react";
import { Helmet } from "react-helmet";
import { useStaticQuery, graphql } from "gatsby";

interface SeoProps {
  description?: string;
  lang?: string;
  meta?: Array<{ name: string; content: string }>;
  title: string;
}

function Seo({ description = '', lang = 'tr', meta = [], title }: SeoProps) {
  const { site }: any = useStaticQuery(graphql`
    query {
      site {
        siteMetadata {
          title
          description
          author
        }
      }
    }
  `);

  const metaDescription: string = description || site.siteMetadata.description;
  const defaultTitle: string = site.siteMetadata?.title;

  return (
    <Helmet title={defaultTitle ? `${title} | ${defaultTitle}` : title}>
      <meta name="description" content={metaDescription} />
    </Helmet>
  );
}
export default Seo;

➡️ Artık SEO bileşeni tam tip güvenliğiyle çalışıyor.

🧱 5️⃣ Layout ve Header Bileşenlerini Dönüştürün​

Layout.tsx


import * as React from "react";
import { useStaticQuery, graphql } from "gatsby";
import Header from "./header";

interface LayoutProps {
  children: React.ReactNode;
}

const Layout = ({ children }: LayoutProps) => {
  const data: any = useStaticQuery(graphql`
    query {
      site {
        siteMetadata {
          title
        }
      }
    }
  `);

  const siteTitle: string = data.site.siteMetadata?.title || "Başlık";

  return (
    <>
      <Header siteTitle={siteTitle} />
      <main>{children}</main>
    </>
  );
};

export default Layout;
Header.tsx
tsx

import * as React from "react";
import { Link } from "gatsby";

interface HeaderProps {
  siteTitle: string;
}

const Header = ({ siteTitle }: HeaderProps) => (
  <header style={{ background: "#0069ff", padding: "1rem", textAlign: "center" }}>
    <h1>
      <Link to="/" style={{ color: "white", textDecoration: "none" }}>
        {siteTitle}
      </Link>
    </h1>
  </header>
);

export default Header;

🚀 6️⃣ Projeyi Test Edin​


gatsby develop

Tarayıcıda http://localhost:8000 adresine giderek projenizi çalıştırın. Herhangi bir tip hatası varsa, TypeScript derleyicisi sizi hemen uyaracaktır ✅

💬 Sıkça Sorulan Sorular (SSS)​

  1. TypeScript neden tercih edilmeli?

Çünkü derleme aşamasında hataları yakalayarak kod güvenliğini artırır.

  1. .tsx neden zorunlu?

Çünkü Gatsby bileşenleri JSX içerir, .ts yeterli değildir.

  1. “strict: true” ne işe yarar?

Tüm katı tip kurallarını etkinleştirir ve kod kalitesini yükseltir.

  1. any tipi ne zaman kullanılmalı?

API veya GraphQL’den dönen belirsiz veri tiplerinde, geçici olarak.

  1. Rabisu Bulut’ta nasıl dağıtırım?

Hazırladığın projeyi Rabisu panelinden “Statik Site Dağıtımı” sekmesiyle yükleyebilirsin.

🧾 Sonuç​

Artık Gatsby projen tamamen TypeScript destekli, hatasız ve ölçeklenebilir hale geldi. Bu yapı, kodun okunabilirliğini artırır ve gelecekteki geliştirmeleri kolaylaştırır.