Bölüm 1: TypeScript'e Giriş: Temeller ve İlk Uygulama

1.1 TypeScript Nedir?

TypeScript, Microsoft tarafından geliştirilen, JavaScript'in tüm özelliklerini kapsayan ancak statik tip desteğiyle geliştirilen bir üst dildir. Yani:

• JavaScript’in superset’idir (üst kümesi)
• .ts uzantılı dosyalar kullanılır
• Derlenerek JavaScript’e dönüşür
• Modern editörlerde otomatik tamamlama, hata öncesi uyarılar, güçlü refactoring imkanı sağlar

1.2 Neden TypeScript Kullanmalıyız?

TypeScript, JavaScript'te karşılaşılan bazı problemleri daha proje derlenmeden önce yakalayarak geliştiricinin daha güvenli kod yazmasına yardımcı olur:

Özellikle büyük React/Next.js projelerinde:

• Hata oranını düşürür
• Developer deneyimini artırır
• Ekip çalışmasında okunabilirliği artırır

1.3 TypeScript Nasıl Kurulur?

React Projesi:

1
npx create-react-app my-app --template typescript
2
# veya mevcut projeye:
3
npm install --save-dev typescript @types/react @types/node

Next.js Projesi:

1
npx create-next-app@latest my-next-app
2
# İlk çalıştırmada tsconfig.json ve .ts dosyaları otomatik oluşur

1.4 tsconfig.json – Ayarlar Dosyası

TypeScript'in nasıl derleneceğini belirleyen ayarların tutulduğu dosyadır.

1
{
2
  "compilerOptions": {
3
    "target": "ES6",
4
    "module": "ESNext",
5
    "strict": true,
6
    "jsx": "preserve",
7
    "esModuleInterop": true,
8
    "moduleResolution": "node",
9
    "forceConsistentCasingInFileNames": true,
10
    "skipLibCheck": true
11
  },
12
  "include": ["src"]
13
}

Önemli Ayarlar:

• strict: Tüm tip güvenlik kurallarını aktif eder (önerilir)
• jsx: React kullanıyorsan react veyapreserve
• esModuleInterop: CommonJS modüllerle uyum sağlar

1.5 İlk TypeScript Dosyası

Basit bir fonksiyon yazalım ve parametre ile dönüş tiplerini tanımlayalım:

1
function greet(name: string): string {
2
  return `Hello, ${name.toUpperCase()}!`;
3
}
4

5
console.log(greet("Yasin"));

Bu örnekte name: string ve : string dönüş tipi ile hem giriş hem çıkış tipi güvence altına alınmış olur.

Mini Uygulama: “React Selamla Bileşeni”

Amaç: Basit bir TypeScript bileşeni oluşturup props tipini tanımlamak.

1
// components/Greeting.tsx
2
type GreetingProps = {
3
  name: string;
4
};
5

6
export default function Greeting({ name }: GreetingProps) {
7
  return <h2>Hello, {name.toUpperCase()}!</h2>;
8
}

1
// App.tsx
2
import Greeting from "./components/Greeting";
3

4
export default function App() {
5
  return <Greeting name="Yasin" />;
6
}

Özet