TypeScript Fonksiyon Tipleri: Arrow Sözdizimi ve Callback Tipleri

Bir fonksiyon tipi, bir fonksiyonun parametrelerini ve dönüş değerini tanımlar ve bir okla yazılır: (a: number, b: number) => number. Ona type ile bir ad verin; değişkenler, parametreler ve nesne özellikleri için kullanabilirsiniz.

type Operation = (a: number, b: number) => number;

const add: Operation = (a, b) => a + b;       // a and b are number
const multiply: Operation = (x, y) => x * y;  // names do not have to match

function apply(op: Operation, a: number, b: number): number {
  return op(a, b);
}

console.log(apply(add, 2, 3));      // 5
console.log(apply(multiply, 2, 3)); // 6

add değişkenine atanan fonksiyonun notasyona ihtiyacı yoktur: parametre tipleri Operation tipinden gelir. Buna bağlamsal tipleme (contextual typing) denir ve fonksiyon tiplerine ad vermenin ana nedeni budur.

Fonksiyon Tipi Sözdizimi

Biçim (parameters) => ReturnType şeklindedir. Her parametre bir ad ve bir tip ister. Adlar okunabilirlik ve editör ipuçları içindir; parametre tipleri uyumlu olan her fonksiyon, onlara ne ad verirse versin eşleşir.

type Predicate = (value: number) => boolean;
type Formatter = (value: number, digits?: number) => string; // optional parameter
type Logger = (...parts: string[]) => void;                    // rest parameter
type Factory = () => { id: number };                           // no parameters

Ad isteğe bağlı değildir. (string) => void, tipi olmayan string adında bir parametre bildirir ve strict mod onu TS7051: Parameter has a name but no type. Did you mean 'arg0: string'? ile reddeder. (value: string) => void yazın.

Arrow Function'lara Tip Vermek

Bir arrow function'a iki şekilde tip verilebilir. Ya fonksiyonun kendisine notasyon yazarsınız ya da değişkene bir fonksiyon tipi verip parametrelerin çıkarılmasına bırakırsınız.

// 1. Annotations on the function
const toCelsius = (f: number): number => ((f - 32) * 5) / 9;

// 2. A function type on the variable
const toFahrenheit: (c: number) => number = (c) => (c * 9) / 5 + 32;

// 3. The same, with a named type
type Convert = (value: number) => number;
const round1: Convert = (v) => Math.round(v * 10) / 10;

console.log(round1(toCelsius(100)));  // 37.8
console.log(toFahrenheit(37));        // 98.6

Bağımsız bir fonksiyon için alışılmış seçim 1. biçimdir. 3. biçim, birkaç fonksiyon tek bir imzayı paylaştığında (handler'lar, karşılaştırıcılar, dönüştürücüler) kendini amorti eder, çünkü imza bir kez yazılır ve üzerindeki bir değişiklik her yerde kontrol edilir.

Callback Tipleri

Tipi bir fonksiyon tipi olan bir parametre bir callback'tir. Çağıranın fonksiyonu ona göre kontrol edilir ve parametreleri ondan çıkarılır.

function repeat(times: number, action: (index: number) => void): void {
  for (let i = 0; i < times; i++) action(i);
}

repeat(3, (i) => console.log("run", i));

function mapValues(values: number[], fn: (value: number, index: number) => string): string[] {
  const out: string[] = [];
  values.forEach((v, i) => out.push(fn(v, i)));
  return out;
}

// A callback may ignore trailing parameters: this one takes only value.
console.log(mapValues([1.5, 2.25], (v) => v.toFixed(1))); // [ '1.5', '2.3' ]

İki kural callback'leri kullanmayı rahat kılar:

• Daha az parametre sorun değildir. Tek parametre alan bir fonksiyon, iki parametre sunulan bir yere verilebilir. JavaScript fazla argümanları yok sayar, bu yüzden TypeScript buna izin verir. Tipin sunduğundan fazla parametre ise hatadır (Target signature provides too few arguments.).
• void dönüşü her şeyi kabul eder. (...) => void olarak tiplenmiş bir callback bir değer döndürebilir; çağıran onu kullanmayacağına söz verir. push bir sayı döndürmesine rağmen list.forEach((x) => other.push(x)) ifadesinin derlenmesinin nedeni budur.

Parametre tipleri yine de uyumlu olmalıdır. (a: number, b: number) => number beklenen yere (x: string) => ... vermek Types of parameters 'x' and 'a' are incompatible. ile başarısız olur.

Call Signature'lar

(n: number) => string, call signature'a sahip bir nesne tipinin kısa yazımıdır: { (n: number): string }. Fonksiyon özellikler de taşıdığında uzun biçime ihtiyaç duyarsınız.

type Counter = {
  (): number;        // call signature: calling it returns a number
  count: number;     // and it has a property
  reset: () => void; // and a method
};

function makeCounter(): Counter {
  const fn = () => ++fn.count;
  fn.count = 0;
  fn.reset = () => { fn.count = 0; };
  return fn;
}

const next = makeCounter();
next();
next();
console.log(next(), next.count); // 3 3
next.reset();
console.log(next.count);         // 0

TypeScript, aynı kapsamda const ile bildirilmiş bir fonksiyona özellik eklemenize izin verir ve onları fonksiyonun tipinde izler. Bir interface de bir call signature tutabilir: interface Counter { (): number; count: number }.

Bir construct signature, new ile çağrılan bir şeyi tanımlar. Başına new ekler: new (name: string) => User ya da nesne biçiminde { new (name: string): User }. Bir sınıf alan bir parametreye bu şekilde tip verirsiniz.

Metot Sözdizimi ile Özellik Sözdizimi

Bir nesne tipinde bir fonksiyon üyesi bir metot olarak, handle(value: string): void, ya da bir fonksiyon tutan bir özellik olarak, handle: (value: string) => void, yazılabilir. Birbirinin yerine geçer gibi görünürler ama strict altında farklı kontrol edilirler:

// This does not compile: the property form checks parameters strictly.
interface WithMethod { handle(value: string | number): void }
interface WithProperty { handle: (value: string | number) => void }

const onlyStrings = (value: string) => console.log(value.toUpperCase());

const a: WithMethod = { handle: onlyStrings };   // accepted
const b: WithProperty = { handle: onlyStrings }; // rejected
a.handle(42);

Derleyici şunu bildirir:

index.ts(8,27): error TS2322: Type '(value: string) => void' is not assignable to type '(value: string | number) => void'.
  Types of parameters 'value' and 'value' are incompatible.
    Type 'string | number' is not assignable to type 'string'.
      Type 'number' is not assignable to type 'string'.

Hata haklıdır: onlyStrings bir sayıyı ele alamaz. Metot biçimi aynı hatayı geçirir (metot parametreleri tarihsel nedenlerle "bivariant" kontrol edilir) ve a.handle(42) çalışma zamanında TypeError: value.toUpperCase is not a function ile çökerdi. O çökmeyi görmek için b satırını silin. Kendi nesne tiplerinizi yazarken özellik biçimi daha fazlasını yakalar.

Function Tipinden Kaçının

Function, her fonksiyon değerinin karşıladığı yerleşik tiptir. Neredeyse hiçbir zaman istediğiniz şey değildir: TypeScript parametreleri ya da dönüş tipini bilmez, bu yüzden her çağrı kabul edilir ve any döndürür.

const loose: Function = Math.max;
const result = loose("a", {});   // compiles: any arguments, result is any
console.log(result);             // NaN

const strict: (...values: number[]) => number = Math.max;
console.log(strict(3, 9, 4));    // 9
// @ts-expect-error: Argument of type 'string' is not assignable to parameter of type 'number'.
strict("a");

Function yerine gerçek imzayı yazın. Gerçekten her fonksiyonu kabul ediyorsanız (generic bir debounce, bir loglama sarmalayıcısı), (...args: never[]) => unknown her fonksiyonu kabul eder ve sonucu any yerine yine unknown olarak tutar. Tipleri girdilerine bağlı olan fonksiyonlar için generic'ler sayfasına bakın: generic bir fonksiyon tipi <T>(value: T) => T şeklinde görünür.