Bölüm 3: Fonksiyonlarda TypeScript Kullanımı – Detaylı Öğretici Anlatım

1
function greet(name) {
2
  return name.toUpperCase();
3
}
4

5
greet("Yasin");  // ✅
6
greet(123);      // ❌ Runtime hatası!

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

1
greet("Yasin"); // ✅
2
greet(123);     // ❌ TS Error

1
const greet = (name: string): string => {
2
  return `Selam, ${name}`;
3
};

1
const greet: (name: string) => string = (name) => {
2
  return `Selam, ${name}`;
3
};

1
function sayHi(name?: string): string {
2
  return `Merhaba, ${name ?? "Ziyaretçi"}!`;
3
}

1
sayHi();         // Merhaba, Ziyaretçi!
2
sayHi("Yasin");  // Merhaba, Yasin!

1
function multiply(a: number, b: number = 2): number {
2
  return a * b;
3
}

1
multiply(3);     // 6
2
multiply(3, 4);  // 12

1
function sumAll(...numbers: number[]): number {
2
  return numbers.reduce((acc, curr) => acc + curr, 0);
3
}

1
sumAll(1, 2, 3);      // 6
2
sumAll(10, 20, 30);   // 60

1
function handleClick(callback: () => void): void {
2
  callback();
3
}

1
handleClick(() => {
2
  console.log("Tıklandı!");
3
});

1
type MathOperation = (x: number, y: number) => number;
2

3
const add: MathOperation = (a, b) => a + b;
4
const sub: MathOperation = (a, b) => a - b;

1
export type Operation = "add" | "subtract" | "multiply" | "divide";
2

3
export function calculate(a: number, b: number, op: Operation): number {
4
  switch (op) {
5
    case "add":
6
      return a + b;
7
    case "subtract":
8
      return a - b;
9
    case "multiply":
10
      return a * b;
11
    case "divide":
12
      return a / b;
13
    default:
14
      throw new Error("Bilinmeyen işlem türü");
15
  }
16
}

1
const result = calculate(10, 5, "multiply"); // 50

1
type ButtonProps = {
2
  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
3
};
4

5
export default function CustomButton({ onClick }: ButtonProps) {
6
  return <button onClick={onClick}>Tıkla</button>;
7
}