ts-utility-type

Utility Type

TS'de, mevcut türleri değiştirmeden değiştirmemize yardımcı olan Yardımcı Türler olarak adlandırılan bir tür vardır

Partial<Type>

Required<Type>’ın tam tersidir. Verilen tipin tüm özelliklerini Optional hale getirir.

interface Person {
  name: string;
  age: number;
  adress?: string;
}

const person1: Person = {
  name: "John",
  age: 30,
};

type PartialPerson = Partial<Person>;

const person2: PartialPerson = {
  name: "John",
};

Bu kod örneği, TypeScript'te Partial utility type'ının kullanımını göstermektedir.

  • Öncelikle, bir Person interface'i tanımlanmıştır. Bu interface, name ve age özelliklerini zorunlu, adress özelliğini ise opsiyonel olarak içerir.
  • person1 objesi, Person interface'ine uygun olarak oluşturulmuştur. name ve age özellikleri verilmiş, opsiyonel olan adress özelliği atlanmıştır.
  • Daha sonra, Partial<Person> kullanılarak PartialPerson tipi oluşturulmuştur. Partial utility, Person interface'indeki tüm özellikleri opsiyonel hale getirir.
  • Son olarak, person2 objesi PartialPerson tipinde oluşturulmuştur. Bu obje sadece name özelliğini içermektedir, çünkü Partial sayesinde tüm özellikler opsiyonel hale gelmiştir.

Böylece, Partial utility type'ı sayesinde orijinal Person interface'inin tüm özelliklerini içermek zorunda kalmadan, istediğimiz özellikleri seçerek bir obje oluşturabiliyoruz.

Required<Type>

Parametre olarak verilen tipin(Type) tüm özelliklerini(properties) zorunlu hale getirir.

interface Person {
  name: string;
  age: number;
  adress?: string;
}

const person1: Person = {
  name: "John",
  age: 30,
};


type RequiredPerson = Required<Person>;

const person3: RequiredPerson = {
  name: "John",
  age: 30,
  adress: "New York",
  // email: "john@example" // die Email Eigenschaft sollte unbedingt verwendet werden
};

Bu kod örneği TypeScript'te Required utility type'ının kullanımını göstermektedir.

  • Öncelikle, bir Person interface'i tanımlanmıştır. Bu interface'de name ve age özellikleri zorunlu, adress özelliği ise opsiyoneldir (soru işareti ile belirtilmiş).
  • person1 objesi, orijinal Person interface'ine uygun olarak oluşturulmuştur. Sadece zorunlu olan name ve age özelliklerini içerir.
  • Daha sonra, Required<Person> kullanılarak RequiredPerson tipi oluşturulmuştur. Required utility, Person interface'indeki tüm özellikleri zorunlu hale getirir.
  • Son olarak, person3 objesi RequiredPerson tipinde oluşturulmuştur. Bu obje artık tüm özellikleri (name, age ve adress) içermek zorundadır, çünkü Required sayesinde tüm özellikler zorunlu hale gelmiştir.

Böylece, Required utility type'ı sayesinde orijinal Person interface'inin tüm özelliklerini zorunlu hale getirmiş oluyoruz. Bu, bir objenin belirli bir yapıya kesinlikle uymasını istediğimiz durumlarda kullanışlıdır.

Not: Kod örneğinde bir yorum satırı var ve bu satır email özelliğinin de kullanılması gerektiğini belirtiyor, ancak bu özellik orijinal Person interface'inde tanımlanmamıştır. Bu muhtemelen bir hata veya eksik tanımlama olabilir.

Pick<Type, Keys>

Verilen bir tip içerisinden, bazı özellikleri alıp yeni bir tip oluşturmamızı sağlıyor.

// ! Pick erlaubt es, nur bestimmte Eigenschaften eines Types zu extrahieren
// ! Pick, bir türün yalnızca belirli özelliklerini çıkarmanıza olanak tanır
// ! Pick allows you to extract only certain properties of a type
interface Product {
    id: number;
    name: string;
    price: number;
    description: string;
    price: number;
    category: string;
}

const product_eins: Product = {
    id: 1,
    name: "Product 1",
    price: 100,
    description: "Description",
    category: "Category"
}

console.log(product_eins)

type PickProduct = Pick<Product, "id" | "name" | "price">;

const product_zwei: PickProduct = {
    id: 2,
    name: "Product 2",
    price: 200
}

console.log(product_zwei)

Bu kod örneği, TypeScript'te Pick utility type'ının kullanımını göstermektedir.

Öncelikle, bir Product interface'i tanımlanmıştır. Bu interface şu özellikleri içerir:

  • id: number
  • name: string
  • price: number
  • description: string
  • category: string

Daha sonra, Pick<Product, "id" | "name" | "price"> kullanılarak PickProduct tipi oluşturulmuştur:

type PickProduct = Pick<Product, "id" | "name" | "price">;

Bu yeni PickProduct tipi, orijinal Product interface'inden sadece "id", "name" ve "price" özelliklerini içerir. Pick utility, mevcut bir tipten belirli özellikleri seçerek yeni bir tip oluşturmanıza olanak tanır.

Son olarak, product_zwei adında bir obje PickProduct tipinde oluşturulmuştur:

const product_zwei: PickProduct = {
    id: 2,
    name: "Product 2",
    price: 200
}

Bu obje sadece PickProduct tipinde belirtilen özellikleri ("id", "name" ve "price") içermek zorundadır.

Pick utility, mevcut bir tipten sadece belirli özellikleri içeren yeni bir tip oluşturmak istediğinizde kullanışlıdır.

Omit<Type, Keys>

Pick<Type,Keys>’in tersi gibi düşünebiliriz. Bir tipten bazı özelliklerini alıp yeni bir tip oluşturmak yerine, bazı özellikleri çıkartıp yeni bir tip oluşturmamızı sağlar.

// ! Omit entfernt bestimmte Eigenschaften
// ! Omit removes certain properties
// ! Omit belirli özellikleri kaldırır

type ProductWithOutDesc = Omit<Product, "desc">

const product_drei: ProductWithOutDesc = {
    id: 3,
    name: "Laptop",
    price: 1200,
    category: "Electronics"
}

console.log(product_drei);

Bu kod örneği, TypeScript'te Omit utility type'ının kullanımını göstermektedir.

  • Öncelikle, Omit utility type'ı kullanılarak yeni bir tip oluşturuluyor:

Bu, Product tipinden "desc" özelliğini çıkararak yeni bir tip oluşturur.

type ProductWithOutDesc = Omit<Product, "desc">

Daha sonra, bu yeni tip kullanılarak bir obje oluşturuluyor:

const product_drei: ProductWithOutDesc = {
    id: 3,
    name: "Laptop",
    price: 1200,
    category: "Electronics"
}
  • Bu obje, ProductWithOutDesc tipine uygun olarak, "desc" özelliği hariç Product tipinin diğer özelliklerini içeriyor.
  • Son olarak, oluşturulan obje console.log ile yazdırılıyor:

Omit utility type'ı, bir tipten belirli özellikleri çıkararak yeni bir tip oluşturmak istediğinizde kullanışlıdır. Bu örnekte, Product tipinden "desc" özelliği çıkarılarak yeni bir tip oluşturulmuştur.

Record<Keys, Type>

Verilen 2 tipi key, value şeklinde birleştirerek yeni bir type oluşturmamızı sağlıyor. İlk parametre key, 2. parametre value olacak şekilde birleştirme yapılıyor.

type PermissionLevel = "ADMIN" | "USER" | "GUEST";

type Permission = Record<PermissionLevel, string[]>;

const userPermission: Permission = {
  ADMIN: ["READ", "WRITE", "DELETE"],
  USER: ["READ", "UPDATE"],
  GUEST: ["READ"],
};

if (userPermission.ADMIN.includes("WRITE")) {
  console.log("Yuu are admin");
  
} else if (userPermission.USER.includes("UPDATE")) {
  console.log("You are user");
}else if (userPermission.GUEST.includes("READ")) {
  console.log("You are guest");
}

Bu kod örneği, TypeScript'te Record utility type'ının kullanımını göstermektedir.

  • İlk olarak, bir PermissionLevel tipi tanımlanıyor:
type PermissionLevel = "ADMIN" | "USER" | "GUEST";

Bu, üç olası değeri olan bir union type'dır.

  • Ardından, Record utility type'ı kullanılarak Permission tipi oluşturuluyor:
type Permission = Record<PermissionLevel, string[]>;

Bu, her PermissionLevel için bir string dizisi içeren bir nesne tipi oluşturur.

  • userPermission adında bir nesne oluşturuluyor:
const userPermission: Permission = {
  ADMIN: ["READ", "WRITE", "DELETE"],
  USER: ["READ", "UPDATE"],
  GUEST: ["READ"],
};

Bu nesne, her yetki seviyesi için izin verilen eylemleri içerir.

  • Son olarak, bir if-else bloğu kullanılarak kullanıcının yetkisi kontrol ediliyor:
if (userPermission.ADMIN.includes("WRITE")) {
  console.log("Yuu are admin");
} else if (userPermission.USER.includes("UPDATE")) {
  console.log("You are user");
} else if (userPermission.GUEST.includes("READ")) {
  console.log("You are guest");
}

Bu blok, kullanıcının yetkisine göre uygun mesajı konsola yazdırır.

Record utility type'ı, bir nesnenin anahtar-değer çiftlerini tanımlamak için kullanışlıdır. Bu örnekte, farklı yetki seviyelerini ve bunlara karşılık gelen izinleri tanımlamak için kullanılmıştır.

Readonly<Type>

Verilen tipin tüm özelliklerini readonly hale getirip yeni bir tip oluşturabilirsiniz.

type ReadOnlyProduct = Readonly<Product>;
const product_four: Product = {
  id: 1,
  name: "Product 4",
  price: 100,
  description: "Description",
  category: "Category",
};

product_four.price = 200; // erlaubt, weil die Eigenschaft nicht readonly ist

const product_five: ReadOnlyProduct = {
  id: 1,
  name: "Product 5",
  price: 100,
  description: "Description",
  category: "Category",
};

// product_five.price = 200; // Error, weil die Eigenschaft readonly ist

Bu örnek, TypeScript'te Readonly utility type'ının kullanımını gösteriyor:

  • İlk olarak, ReadOnlyProduct adında yeni bir tip oluşturuluyor:
type ReadOnlyProduct = Readonly<Product>;

Bu, Product tipinin tüm özelliklerini readonly yaparak yeni bir tip oluşturur.

  • Sonra, normal bir Product nesnesi oluşturuluyor:
const product_four: Product = {
  id: 1,
  name: "Product 4",
  price: 100,
  description: "Description",
  category: "Category",
};

Bu nesnenin özellikleri değiştirilebilir.

  • Örneğin, fiyatı değiştirmek mümkündür:
product_four.price = 200; // izin verilir, çünkü özellik readonly değil
  • Ardından, ReadOnlyProduct tipinde bir nesne oluşturuluyor:
const product_five: ReadOnlyProduct = {
  id: 1,
  name: "Product 5",
  price: 100,
  description: "Description",
  category: "Category",
};

Bu nesnenin tüm özellikleri readonly'dir.

  • Son olarak, yorum satırında gösterildiği gibi, bu readonly nesnenin özelliklerini değiştirmeye çalışmak bir hata oluşturacaktır:
// product_five.price = 200; // Hata, çünkü özellik readonly

Readonly utility type'ı, bir nesnenin özelliklerinin değiştirilmesini engellemek istediğinizde kullanışlıdır. Bu, özellikle immutable veri yapıları oluştururken faydalıdır.

Exclude<Type>

type BasicColors = "RED" | "BLUE" | "GREEN" | "YELLOW" | "BLACK" | "WHITE";

type RealColors = Exclude<BasicColors, "BLACK" | "WHITE">;

function showColors(color: RealColors) {
  console.log(color);
}

// showColors("BLACK"); // Error

showColors("RED");

Bu kod örneği, TypeScript'te Exclude utility type'ının kullanımını göstermektedir. İşte açıklaması:

  • Öncelikle, BasicColors adında bir union type tanımlanıyor:
type BasicColors = "RED" | "BLUE" | "GREEN" | "YELLOW" | "BLACK" | "WHITE";

Bu, altı temel rengi içeren bir tip.

  • Ardından, Exclude utility type'ı kullanılarak RealColors adında yeni bir tip oluşturuluyor:
type RealColors = Exclude<BasicColors, "BLACK" | "WHITE">;

Bu, BasicColors'dan "BLACK" ve "WHITE" renklerini çıkararak yeni bir tip oluşturur.

  • showColors adında bir fonksiyon tanımlanıyor:
function showColors(color: RealColors) {
  console.log(color);
}

Bu fonksiyon, sadece RealColors tipinde bir parametre kabul eder.

  • Yorum satırında gösterildiği gibi, "BLACK" rengini bu fonksiyona parametre olarak geçmek hata oluşturacaktır:
// showColors("BLACK"); // Error

Çünkü "BLACK", RealColors tipinde değil.

  • Son olarak, fonksiyon "RED" rengiyle çağrılıyor:
showColors("RED");

Bu geçerli bir çağrıdır, çünkü "RED" RealColors tipindedir.

Exclude utility type'ı, bir tipten belirli değerleri çıkararak yeni bir tip oluşturmak istediğinizde kullanışlıdır. Bu örnekte, temel renklerden siyah ve beyazı çıkararak yeni bir renk tipi oluşturulmuştur.

Popular Tag
TypeScript Utility
Share:

Yorum yap