TypeScript Dizi (Array): Tipler, Nesne Dizileri, map ve filter

Bir TypeScript dizi tipi, eleman tipi ve ardından [] şeklinde yazılır: string[] bir string dizisi, number[] bir sayı dizisidir. Generic yazılış Array<string> aynı tiptir. Bir diziye tip verildiğinde, eklediğiniz ve okuduğunuz her eleman o tipe sahiptir.

const names: string[] = ["Ada", "Grace"];
const scores: Array<number> = [90, 85, 72]; // same as number[]

names.push("Alan");
// @ts-expect-error: Argument of type 'number' is not assignable to parameter of type 'string'.
names.push(42);

const first: string = names[0];
const total = scores.reduce((sum, s) => sum + s, 0); // number

console.log(names, first, total);

@ts-expect-error satırı bir derleme hatasıdır (TS2345). Burada blok yine de çalışsın diye beklenen hata olarak işaretlenmiştir; tipler silindiği için 42 çalışma zamanında gerçekten eklenir: çıktı bunu gösterir.

string[] ile Array<string>

Bir kod tabanı için tek bir stil seçin. typescript-eslint'in array-type kuralı varsayılan olarak T[] biçimini ister.

Nesne Dizileri

Elemanı bir type alias veya interface ile tanımlayın, sonra Type[] kullanın. Diziden okunan her şey bu biçime göre kontrol edilir.

type User = { id: number; name: string; admin: boolean };

const users: User[] = [
    { id: 1, name: "Ada", admin: true },
    { id: 2, name: "Grace", admin: false },
    { id: 3, name: "Alan", admin: false },
];

users.push({ id: 4, name: "Linus", admin: false });

const admins = users.filter((u) => u.admin);       // User[]
const names = users.map((u) => u.name);            // string[]
const byId = users.find((u) => u.id === 2);        // User | undefined

console.log(admins.length, names);
console.log(byId?.name ?? "not found"); // Grace

users dizisine eklenen bir nesne literal'i User tipiyle tam olarak eşleşmelidir: eksik bir admin ya da yanlış yazılmış bir özellik derleme hatasıdır.

Tipli map, filter, reduce ve find

Dizi metotları generic'tir, bu yüzden sonuçları tip taşır. Her metodun çalışma zamanında ne yaptığını JavaScript dizi metotları sayfası anlatıyor; TypeScript'in eklediği tiplerdir:

const prices = [4.5, 12, 8.25];

const labels = prices.map((p) => `$${p.toFixed(2)}`); // string[]
console.log(labels); // [ '$4.50', '$12.00', '$8.25' ]

const expensive = prices.find((p) => p > 100); // number | undefined
console.log(expensive ?? "none"); // none

// reduce's result type comes from the initial value,
// or from a type argument when the initial value is just {}
const byInitial = ["apple", "avocado", "banana"].reduce<Record<string, string[]>>(
    (acc, word) => {
        (acc[word[0]] ??= []).push(word);
        return acc;
    },
    {},
);
console.log(byInitial); // { a: [ 'apple', 'avocado' ], b: [ 'banana' ] }

// filter narrows when the callback is a type check
const raw = [1, undefined, 3, undefined];
const defined = raw.filter((n) => n !== undefined); // number[]
console.log(defined); // [ 1, 3 ]

Son örnek çalışır, çünkü TypeScript (5.5'ten beri) (n) => n !== undefined ifadesinin bir type predicate olduğunu çıkarır; bu yüzden filter, (number | undefined)[] yerine number[] döndürür. Çıkaramadığı kontroller için predicate'i kendiniz yazın: filter((x): x is User => x !== null).

Birden Fazla Tip Tutan Diziler

Bir union eleman tipi karışıma izin verir. Dizi tiplerinin bir union'ı ise izin vermez:

const mixed: (string | number)[] = [1, "two", 3]; // each element: string or number

let ids: string[] | number[] = [1, 2, 3]; // all numbers...
ids = ["a", "b"];                          // ...or all strings

// @ts-expect-error: (string | number)[] is not assignable to string[] | number[]
ids = [1, "b"];

for (const item of mixed) {
    // narrow each element before using type-specific methods
    console.log(typeof item === "string" ? item.toUpperCase() : item.toFixed(1));
}

Konumların sabit tipleri olduğunda, örneğin bir [name, age] çifti, bunun yerine bir tuple kullanın: [string, number] 0. indeksin bir string, 1. indeksin bir sayı olduğunu bilir; (string | number)[] ise bilmez.

Readonly Diziler

readonly T[], diziyi değiştiren her metodu kaldırır. Bir fonksiyonun değiştirmemesi gereken parametreler ve sabitler için kullanın.

// This does not compile: readonly arrays have no push.
function average(values: readonly number[]): number {
    values.push(0);
    return values.reduce((a, b) => a + b, 0) / values.length;
}

console.log(average([2, 4, 6]));

index.ts(3,12): error TS2339: Property 'push' does not exist on type 'readonly number[]'.

push satırını silin, blok 4 yazdırır. Değiştirilebilir bir number[] her zaman readonly number[] beklenen yere verilebilir, bu yüzden readonly parametrelerin çağıranlara hiçbir maliyeti yoktur. Kontrol yalnızca derleme zamanındadır: çalışma zamanında sıradan bir dizidir. Readonly bir diziyi sıralamak için bir kopyasını sıralayın: [...values].sort().

Literal Dizilerde includes Tuzağı

as const bir diziyi literal tiplerden oluşan readonly bir tuple'a dönüştürür. İzin verilen değerlerin bir listesi için kullanışlıdır, ama o zaman includes metodu yalnızca bu literal'leri kabul eder:

const COLORS = ["red", "green", "blue"] as const;
type Color = (typeof COLORS)[number]; // "red" | "green" | "blue"

function isColor(value: string): value is Color {
    // COLORS.includes(value) is error TS2345: 'string' is not assignable
    // to '"blue" | "green" | "red"'. Widen the array for the check:
    return (COLORS as readonly string[]).includes(value);
}

const input: string = "green";
if (isColor(input)) {
    const c: Color = input; // narrowed to Color
    console.log("valid color:", c);
}
console.log(isColor("purple")); // false

Kontrolü bir type guard (value is Color) içine almak, genişletmenin bir kez yapılması ve çağıranların daraltılmış bir değer geri alması anlamına gelir.

İndeksleme ve Boş Diziler

arr[i] okumak, i aralık dışında olsa ve çalışma zamanındaki değer undefined olsa bile T tipini verir. at(i) ise T | undefined olarak tiplenmiştir; noUncheckedIndexedAccess derleyici seçeneği de düz indekslemenin T | undefined döndürmesini sağlar.

const queue: string[] = []; // annotate empty arrays

const head = queue[0];     // type string, value undefined
const last = queue.at(-1); // type string | undefined

console.log(head, last);            // undefined undefined
console.log(last?.toUpperCase());   // undefined, safely

queue[0].toUpperCase() derlenir ve ardından çalışma zamanında bir TypeError fırlatırdı. Bir indeks eksik olabiliyorsa at(), bir uzunluk kontrolü ya da noUncheckedIndexedAccess tercih edin.