TypeScript Fonksiyonlar: Parametre ve Dönüş Tipleri, void

Bir TypeScript fonksiyonu, parametrelerinde ve isteğe bağlı olarak dönüş değerinde tipler olan bir JavaScript fonksiyonudur. Her parametre bir notasyon alır, dönüş tipi parametre listesinden sonra gelir ve derleyici her çağrıyı ikisine göre de kontrol eder.

function area(width: number, height: number): number {
  return width * height;
}

console.log(area(3, 4)); // 12

// @ts-expect-error: Argument of type 'string' is not assignable to parameter of type 'number'.
area("3", 4);

// @ts-expect-error: Expected 2 arguments, but got 1.
area(3);

İki hatalı çağrı da derleme zamanı hatasıdır (TS2345 ve TS2554). // @ts-expect-error yorumları derleyiciye sonraki satırda bir hata beklendiğini söyler, böylece dosyanın geri kalanı yine çalışır. Birini silin ve gerçek mesajı görmek için yeniden çalıştırın.

Parametre Tipleri

Her parametre name: Type şeklinde yazılır. TypeScript 7'de varsayılan olarak açık olan strict altında, notasyonu olmayan ve çıkarım yapılacak bağlamı bulunmayan bir parametre hatadır: Parameter 'x' implicitly has an 'any' type. (TS7006). Yani pratikte bağımsız bir fonksiyonun her parametresine notasyon yazılır.

Parametre tipi olarak her tip kullanılabilir: primitive'ler, diziler, nesne tipleri, union'lar, başka fonksiyonlar.

type User = { name: string; tags: string[] };

function describe(user: User, maxTags: number): string {
  const shown = user.tags.slice(0, maxTags).join(", ");
  return `${user.name} (${shown})`;
}

function formatId(id: string | number): string {
  return typeof id === "number" ? id.toFixed(0).padStart(5, "0") : id.toUpperCase();
}

console.log(describe({ name: "Ada", tags: ["math", "code", "tea"] }, 2)); // Ada (math, code)
console.log(formatId(42));      // 00042
console.log(formatId("ab-7"));  // AB-7

TypeScript argüman sayısını da kontrol eder. Fonksiyonun bildirdiğinden fazla ya da az argüman vermek hatadır; eksikleri undefined ile dolduran ve fazlaları yok sayan düz JavaScript'in aksine. Bir parametreyi opsiyonel yapmak veya ona varsayılan değer vermek için opsiyonel parametreler sayfasına bakın.

Dönüş Tipleri: Yazmak ya da Çıkarımına Bırakmak

Dönüş tipi kapanış parantezinden sonra gelir: function f(): Type. İsteğe bağlıdır. Yazılmazsa TypeScript tipi gövdedeki her return ifadesinden çıkarır.

// Inferred: (n: number) => "even" | "odd"
function parity(n: number) {
  return n % 2 === 0 ? "even" : "odd";
}

// Annotated: the contract is written down
function average(values: number[]): number {
  if (values.length === 0) return 0;
  const sum = values.reduce((acc, v) => acc + v, 0);
  return sum / values.length;
}

const p = parity(7);
console.log(p, average([2, 4, 9])); // odd 5

Fonksiyon export edildiğinde, birkaç dönüş yolu olduğunda ya da özyinelemeli olduğunda notasyon kendini amorti eder. Hata o zaman bir çağıranda değil, fonksiyonun içinde, yanlış return ifadesinde görünür. Klasik bir örnek, döndürmeyi unutan bir daldır:

// This does not compile: one path falls off the end of the function.
function grade(score: number): string {
  if (score >= 90) return "A";
  if (score >= 80) return "B";
}

console.log(grade(85));

Derleyici index.ts(2,32): error TS2366: Function lacks ending return statement and return type does not include 'undefined'. bildirir. Sona bir return "C"; ekleyin, çalışır. : string notasyonu olmasaydı fonksiyon "A" | "B" | undefined çıkarılan tipiyle derlenir ve sorun sonucu kullanan kişiye kayardı.

void: Hiçbir Şey Döndürmeyen Fonksiyonlar

Yalnızca bir şey yapan (loglayan, yazan, değiştiren) bir fonksiyonun dönüş tipi void olur. Değer içeren bir return olmadığında TypeScript'in çıkardığı budur ve bunu açıkça da yazabilirsiniz.

function logLine(label: string, value: number): void {
  console.log(`${label.padEnd(8)}${value}`);
}

logLine("apples", 3);
logLine("pears", 12);

// A callback typed as returning void may return a value; it is ignored.
const lengths: number[] = [];
const push: (s: string) => void = (s) => lengths.push(s.length);
["a", "bcd"].forEach(push);
console.log(lengths); // [ 1, 3 ]

void ile ilgili şu kurallar insanları şaşırtır:

İkinci satır kasıtlıdır. push bir sayı döndürmesine rağmen arr.forEach(x => list.push(x)) ifadesinin derlenmesinin nedeni budur. Bir fonksiyon tipindeki void "bu ne döndürürse döndürsün, kimse onu okumaz" anlamına gelir. Hiç dönmeyen bir fonksiyon için (her zaman hata fırlatır veya sonsuza kadar döner) dönüş tipi never olur.

Arrow Function'lar ve Function Expression'lar

Arrow function'lar ve function expression'lar aynı notasyonları alır. Dönüş tipi parametre listesinden sonra, => işaretinden önce gelir.

const double = (n: number): number => n * 2;

const toUpper = function (s: string): string {
  return s.toUpperCase();
};

// Returning an object literal from an arrow needs parentheses.
const point = (x: number, y: number) => ({ x, y });

console.log(double(21), toUpper("ok")); // 42 OK
console.log(point(1, 2));               // { x: 1, y: 2 }

Parantezler olmadan (x, y) => { x, y } ifadesi return içermeyen bir bloktur ve fonksiyon undefined döndürür. Arrow function'ların çalışma zamanı kuralları (kendi this değerleri yok, arguments yok) JavaScript'tekiyle aynıdır; bkz. JavaScript'te arrow function'lar.

Bir fonksiyon bir argüman olarak satır içi yazıldığında parametrelerine genellikle hiç notasyon yazmazsınız. TypeScript callback'in ne aldığını, onun verildiği fonksiyondan bilir (bağlamsal tipleme): [1, 2].map(n => n * 2) ifadesinde n zaten number tipindedir. Bir fonksiyonun tipini bir değer olarak yazmak, (n: number) => string, fonksiyon tipleri sayfasında anlatılıyor.

Birden Fazla Değer Döndürmek

Bir fonksiyon tek bir değer döndürür, bu yüzden bir nesne ya da bir tuple döndürün ve destructuring yapın.

function minMax(values: number[]): { min: number; max: number } {
  return { min: Math.min(...values), max: Math.max(...values) };
}

function splitName(full: string): [first: string, last: string] {
  const i = full.indexOf(" ");
  return [full.slice(0, i), full.slice(i + 1)];
}

const { min, max } = minMax([7, 2, 9]);
const [first, last] = splitName("Grace Hopper");
console.log(min, max, first, last); // 2 9 Grace Hopper

Tuple dönüş tipi notasyon ister. Notasyon olmadan [a, b] bir string[] olarak çıkarılır: destructuring yine çalışır ama tip artık tam olarak iki eleman olduğunu söylemez.

Async Fonksiyonlar

Bir async fonksiyon her zaman bir Promise döndürür. Dönüş tipini Promise<T> olarak yazın; burada T fonksiyonun içeride döndürdüğü şeydir.

async function loadScore(id: number): Promise<number> {
  await new Promise((resolve) => setTimeout(resolve, 10));
  return id * 10;
}

async function main(): Promise<void> {
  const score = await loadScore(4); // score: number
  console.log("score", score);
}

main();

async function f(): number yazmak bir hatadır: The return type of an async function or method must be the global Promise<T> type. Did you mean to write 'Promise<number>'? (TS1064).

this Parametresi

JavaScript this değerine çağrı anında karar verir. TypeScript, this adında sahte bir ilk parametreyle this değerinin ne olması gerektiğini bildirmenize izin verir. Derlenmiş JavaScript'ten kaldırılır ve çağıranlar onu vermez.

interface Counter {
  count: number;
}

function increment(this: Counter, by: number): void {
  this.count += by;
}

const c = { count: 0, increment };
c.increment(2); // fine: this is c

increment(2);
// error TS2684: The 'this' context of type 'void' is not assignable to method's 'this' of type 'Counter'.

this parametresi olmadan bağımsız bir fonksiyonun içindeki this örtük bir any olur ve strict mod 'this' implicitly has type 'any' because it does not have a type annotation. (TS2683) bildirir. Sınıf metotlarında this zaten sınıf örneği olarak tiplenmiştir; bu yüzden parametre çoğunlukla nesnelere bağlanan bağımsız fonksiyonlar ve kütüphanelerin belirli bir this ile çağırdığı callback'ler için kullanışlıdır.