Gatsby TypeScript Setup: Configuring GatsbyJS Project with TypeScript Step by Step

🎯 What Will You Learn in This Guide?

In this guide, you'll learn how to catch errors at an early stage and secure your code by integrating your GatsbyJS project with TypeScript.
We explain in simple language all the processes, from the installation of the new Gatsby project to the conversion of components to the .tsx format.

⚙️ 1️⃣ New Gatsby Project Creation and Cleanup

💻 Start Project

gatsby new genixnode-gatsby-ts
cd genixnode-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:

bash

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:

bash

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
bash

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:

json

{
  "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:

tsx

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 &#123; site &#125;: 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 ? `$&#123;title&#125; | $&#123;defaultTitle&#125;` : title}>
      <meta name="description" content=&#123;metaDescription&#125; />
    </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
tsx

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

interface LayoutProps {
  children: React.ReactNode;
}

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

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

  return (
    <>
      <Header siteTitle=&#123;siteTitle&#125; />
      <main>&#123;children&#125;</main>
    </>
  );
};

export default Layout;
Header.tsx
tsx

import * as React from "react";
import &#123; Link &#125; from "gatsby";

interface HeaderProps {
  siteTitle: string;
}

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

export default Header;
🚀 6️⃣ Projeyi Test Edin
bash

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.

2. .tsx neden zorunlu?
Çünkü Gatsby bileşenleri JSX içerir, .ts yeterli değildir.

3. “strict: true” ne işe yarar?
Tüm katı tip kurallarını etkinleştirir ve kod kalitesini yükseltir.

4. any tipi ne zaman kullanılmalı?
API veya GraphQL’den dönen belirsiz veri tiplerinde, geçici olarak.

5. GenixNode’ta nasıl dağıtırım?
Hazırladığın projeyi GenixNode 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.