TypeScript Koşullu Tipler (Conditional Types) ve infer, Örneklerle

Koşullu tip, JavaScript'teki üçlü operatör gibi okunan bir testle iki tip arasında seçim yapar: T extends U ? X : Y. T, U tipine atanabiliyorsa sonuç X, aksi halde Y olur.

type IsString<T> = T extends string ? "yes" : "no";

type A = IsString<"hello">; // "yes"
type B = IsString<42>;      // "no"

// A practical one: the type of a "message" property, if there is one
type MessageOf<T> = T extends { message: unknown } ? T["message"] : never;

type ErrText = MessageOf<{ message: string; code: number }>; // string
type Nothing = MessageOf<{ code: number }>;                  // never

const a: A = "yes";
const text: ErrText = "disk full";
console.log(a, text); // yes disk full

Buradaki extends "atanabilir" anlamına gelir; bu, bir değişkene değer atadığınızda derleyicinin kullandığı ilişkinin aynısıdır. Koşullu tipler yalnızca derleme zamanında vardır; JavaScript çıktısından silinirler.

Sözdizimi

type Result = CheckedType extends TestType ? TrueType : FalseType;

Koşullu tipler, kontrol edilen tipin daha sonra somut bir tip alan bir tip parametresi olduğu generics ile işe yarar hale gelir. true dalında TypeScript kontrol edilen tipin teste uyduğunu bilir; bu yüzden düz T tipinde message özelliği olmasa bile yukarıdaki T["message"] ifadesine izin verilir.

Zincirlenmiş üçlü operatörler gibi iç içe de yazılabilirler:

type TypeName<T> =
  T extends string ? "string" :
  T extends number ? "number" :
  T extends boolean ? "boolean" :
  T extends undefined ? "undefined" :
  "object";

function typeName<T>(value: T): TypeName<T> {
  return typeof value as TypeName<T>;
}

console.log(typeName("hi"), typeName(3), typeName(true)); // string number boolean
const n: TypeName<number[]> = "object";
console.log(n); // object

Fonksiyon gövdesindeki as TypeName<T> isteğe bağlı değildir; bir sonraki bölüm bunu gösteriyor.

Koşullu Dönüş Tipleri Bir Assertion Gerektirir

Dönüş tipi kendi tip parametresi üzerinde bir koşullu tip olan bir fonksiyon, dallardan hiçbirini doğrudan döndüremez. TypeScript gövde içinde T tipini daraltmaz, bu yüzden hangi dalın geçerli olduğunu söyleyemez:

// This does not compile: TypeScript cannot pick a branch of Flip<T> inside the body
type Flip<T> = T extends string ? number : string;

function flip<T extends string | number>(x: T): Flip<T> {
  return typeof x === "string" ? x.length : String(x);
}

console.log(flip("abc"), flip(7));

index.ts(5,34): error TS2322: Type 'number' is not assignable to type 'Flip<T>'.
index.ts(5,45): error TS2322: Type 'string' is not assignable to type 'Flip<T>'.

İki yaygın çözüm var: her girdi çıktı çiftini belirten ve çağıranları kesin olarak kontrol eden overload'lar ya da implementasyonda bir assertion.

// Fix 1: overloads
function flip(x: string): number;
function flip(x: number): string;
function flip(x: string | number): string | number {
  return typeof x === "string" ? x.length : String(x);
}

const len = flip("abc"); // number
const str = flip(7);     // string
console.log(len + 1, str.padStart(3, "0")); // 4 007

// Fix 2: keep the conditional type and assert inside the body
type Flip<T> = T extends string ? number : string;
function flip2<T extends string | number>(x: T): Flip<T> {
  return (typeof x === "string" ? x.length : String(x)) as Flip<T>;
}
console.log(flip2("hello")); // 5

Overload'lar fonksiyon overload sayfasında anlatılıyor. Assertion ile derleyici size güvenir: gövdedeki yanlış bir dal yakalanmaz.

Dağılan Koşullu Tipler

Kontrol edilen tip çıplak bir tip parametresi olduğunda ve bir union aldığında, koşul her üye için bir kez çalışır ve sonuçlar yeni bir union'da birleştirilir:

type ToArray<T> = T extends unknown ? T[] : never;

type A = ToArray<string | number>; // string[] | number[]

// Wrapping both sides in [ ] turns distribution off
type ToArrayWhole<T> = [T] extends [unknown] ? T[] : never;
type B = ToArrayWhole<string | number>; // (string | number)[]

const a: A = ["x", "y"];  // an array of strings, or an array of numbers
const b: B = ["x", 1];    // a mixed array
// const bad: A = ["x", 1] would be error TS2322:
// Type '(string | number)[]' is not assignable to type 'string[] | number[]'.
console.log(a, b); // [ 'x', 'y' ] [ 'x', 1 ]

Exclude ve Extract tiplerini çalıştıran şey bu dağılımdır. Exclude<T, U>, T extends U ? never : T olarak tanımlanır: U ile eşleşen her üye never olur ve never bir union'dan kaybolur. Bu yüzden Exclude<"a" | "b" | "c", "a">, "b" | "c" olur.

Aynı kuraldan iki sürpriz çıkar. boolean, true | false union'ıdır; bu yüzden ToArray<boolean>, boolean[] değil false[] | true[] olur. Ve never boş union'dır; dolayısıyla never verilen dağılan bir koşullu tip hiçbir şeyi test etmeden never döndürür:

type IsNever<T> = T extends never ? true : false;
type X = IsNever<never>; // never, not true

type IsNeverFixed<T> = [T] extends [never] ? true : false;
type Y = IsNeverFixed<never>; // true

infer ile Tip Çıkarmak

infer, extends ifadesinin içinde yeni bir tip değişkeni bildirir. Eşleşme başarılı olursa TypeScript bu değişkeni kontrol edilen tipten doldurur ve onu true dalında kullanabilirsiniz:

type ElementOf<T> = T extends readonly (infer E)[] ? E : T;
type Unpromise<T> = T extends Promise<infer V> ? V : T;
type FirstArg<F> = F extends (first: infer A, ...rest: any[]) => unknown ? A : never;
type Head<T> = T extends [infer H, ...unknown[]] ? H : never;

type E1 = ElementOf<string[]>;              // string
type V1 = Unpromise<Promise<{ id: number }>>; // { id: number }
type A1 = FirstArg<(name: string, age: number) => void>; // string
type H1 = Head<[Date, number]>;              // Date

const id: V1 = { id: 7 };
const first: A1 = "Ada";
const when: H1 = new Date("2024-03-15T10:30:00Z");
console.log(id, first, when.toISOString());
// { id: 7 } Ada 2024-03-15T10:30:00.000Z

T extends Promise<infer V> ? V : T ifadesini şöyle okuyun: "T bir şeyin promise'i ise, o şeye V de ve onu döndür; değilse T tipini olduğu gibi döndür". infer yalnızca bir koşullu tipin extends ifadesinde kullanılabilir.

Bir infer değişkeni extends ile kendi kısıtlamasını taşıyabilir. O zaman eşleşme yalnızca çıkarılan tip uyarsa başarılı olur:

type FirstString<T> = T extends [infer S extends string, ...unknown[]] ? S : never;

type A = FirstString<["a", 1]>; // "a"
type B = FirstString<[1, "a"]>; // never: the first element is not a string

ReturnType'ı Kendiniz Yazmak

Yerleşik ReturnType, infer içeren tek satırlık bir koşullu tiptir. Onu kendiniz yazmak, iki fikri de oturtan klasik alıştırmadır:

type MyReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

function makeUser(name: string) {
  return { name, joined: new Date("2024-03-15T10:30:00Z") };
}

type User = MyReturnType<typeof makeUser>; // { name: string; joined: Date }
type Same = ReturnType<typeof makeUser>;   // the built-in gives the same type

const u: User = makeUser("Ada");
const copy: Same = { ...u, name: "Grace" };
console.log(copy.name, copy.joined.getUTCFullYear()); // Grace 2024

typeof makeUser fonksiyon değerini tipine çevirir, ardından koşullu tip onu "herhangi bir fonksiyon" ile eşleştirir ve dönüş tipini R olarak yakalar. Standart kütüphanedeki sürüm iki ayrıntıda farklıdır: parametresi fonksiyon tipleriyle kısıtlanmıştır (T extends (...args: any) => any), bu yüzden ReturnType<string> never değil bir derleme hatası olur; false dalı ise any olur. ReturnType sayfası Parameters, InstanceType ve Awaited tiplerini de anlatıyor.

Özyinelemeli Koşullu Tipler

Bir koşullu tip kendisine başvurabilir; bu da her derinlikteki iç içe yapıyı açmasını sağlar:

type Flatten<T> = T extends readonly (infer U)[] ? Flatten<U> : T;

type A = Flatten<number[][][]>; // number
type B = Flatten<string>;       // string

Yerleşik Awaited<T> bu şekilde çalışır ve Promise<Promise<T>> tipini T tipine kadar açar. Pratikte özyinelemeyi sığ tutun: çok derin ya da sınırsız özyineleme derleyicinin error TS2589: Type instantiation is excessively deep and possibly infinite ile vazgeçmesine neden olur.

Hızlı Başvuru