TypeScript'te İsteğe Bağlı Zincirleme

Bu makalede, TypeScript'te İsteğe Bağlı Zincirleme hakkında bilgi veriyoruz.

YouTube Video

TypeScript'te İsteğe Bağlı Zincirleme

TypeScript'te isteğe bağlı zincirleme, derinlemesine iç içe geçmiş nesnelerin veya dizilerin özelliklerine erişmek için kullanışlı bir özelliktir. Bu özellik, var olmayan özelliklere erişirken hataları önler ve daha özlü ve okunabilir bir kod yazmanızı sağlar.

İsteğe Bağlı Zincirleme Nedir?

İsteğe bağlı zincirleme operatörü (?.), var olmayan bir nesne özelliğine veya metoduna erişirken undefined döndürür. Bu, özellik mevcut değilse bir hata oluşmadan kodun çalışmaya devam etmesine olanak tanır.

Örneğin, aşağıda gösterildiği gibi iç içe geçmiş bir nesnenin özelliklerine erişirken, özelliğin mevcut olmaması durumunda geleneksel yöntemle hata oluşur.

Örnek

 1interface User {
 2    name?: string;
 3    address?: {
 4        city?: string;
 5        postalCode?: string;
 6    };
 7}
 8
 9const user: User = {
10    name: 'Alice'
11};
12
13// Normal access
14console.log(user.address.postalCode); // Error: Cannot read property 'postalCode' of undefined

• Bu durumda, address mevcut değilse bir hata oluşacaktır. Bu durumu önlemek için isteğe bağlı zincirleme kullanılabilir.

İsteğe bağlı zincirleme kullanım örneği

 1interface User {
 2    name?: string;
 3    address?: {
 4        city?: string;
 5        postalCode?: string;
 6    };
 7}
 8
 9const user: User = {
10    name: 'Alice'
11};
12
13console.log(user.address?.postalCode); // undefined

• İsteğe bağlı zincirleme kullanımı, hataları önler ve özellikler mevcut olmadığında bunun yerine undefined döndürür.

İsteğe Bağlı Zincirleme Nasıl Kullanılır

İsteğe bağlı zincirleme, özellik erişimi, fonksiyon çağrıları ve dizi erişimi gibi çeşitli senaryolarda kullanılabilir. Bunların her birini nasıl kullanacağınızı açıklayacağız.

Özelliklere Erişim

Nesnelerin iç içe geçmiş özelliklerine güvenli bir şekilde erişebilirsiniz.

 1interface Company {
 2    name: string;
 3    location?: {
 4        city?: string;
 5        country?: string;
 6    };
 7}
 8
 9const company: Company = {
10    name: 'Tech Corp',
11    location: {
12        city: 'New York'
13    }
14};
15
16console.log(company.location?.city); // 'New York'
17console.log(company.location?.country); // undefined

Bu kod, company nesnesinde location özelliği mevcutsa, yalnızca o zaman city ve country özelliklerine erişmek için isteğe bağlı zincirlemeyi kullanır.

Fonksiyon Çağrıları

İsteğe bağlı zincirleme, bir fonksiyonu çağırmadan önce onun varlığını kontrol etmek için de kullanılabilir.

 1interface User {
 2    name?: string;
 3    greet?: () => void;
 4}
 5
 6const user: User = {
 7    name: 'Bob',
 8    // greet is undefined
 9};
10
11// Check if the function exists before calling it
12user.greet?.(); // The call is not made, and no error occurs

greet fonksiyonu mevcutsa güvenli bir şekilde çağırmak için bu kod isteğe bağlı zincirlemeyi kullanır. Fonksiyon tanımsız (undefined) olsa bile herhangi bir hata oluşmaz.

Dizi Erişimi

İsteğe bağlı zincirleme, dizilerde elemanların var olup olmadığını kontrol etmek için uygulanabilir.

 1interface Team {
 2    members?: string[];
 3}
 4
 5const team: Team = {
 6    members: ['Alice', 'Bob', 'Charlie']
 7};
 8
 9console.log(team.members?.[0]); // 'Alice'
10console.log(team.members?.[5]); // undefined

Bu kod, yalnızca team.members mevcutsa dizi elemanlarına erişir; mevcut indeksler için değeri, mevcut olmayanlar için ise undefined döndürür.

İsteğe Bağlı Zincirleme ve Nullish Coalescing Operatörü

İsteğe bağlı zincirleme undefined döndürür, ancak bazen bu yeterli olmayabilir. Bu durumda, TypeScript 3.7 ile tanıtılan nullish coalescing operatörü (??), null veya undefined için varsayılan değerler sağlamak amacıyla kullanılabilir.

 1interface User {
 2    name?: string;
 3    address?: {
 4        city?: string;
 5        postalCode?: string;
 6    };
 7}
 8
 9const user: User = {
10    name: 'Carol'
11};
12
13// Use 'Unknown' as the default value if name does not exist
14const userName = user.name ?? 'Unknown';
15
16console.log(userName); // 'Carol'

Opsiyonel zincirleme ile birleştirildiğinde, daha esnek kodlar yazabilirsiniz.

1console.log(user.address?.postalCode ?? 'Not provided'); // 'Not provided'

Opsiyonel Zincirleme Kullanırken Dikkat Edilmesi Gerekenler

İsteğe bağlı zincirleme kullanırken aşağıdaki noktalara dikkat etmek önemlidir:.

• İsteğe Bağlı Zincirlemenin Gereksiz Kullanımı

  • Var olduğu garanti edilen özellikler veya yöntemler üzerinde isteğe bağlı zincirleme kullanmak, kodunuzu gereksiz yere uzun ve karmaşık hale getirebilir. Erişilen hedefin varlığı belirsiz olduğunda kullanılması en iyisidir.

• Yazım Hataları

  • İsteğe bağlı zincirlemenin aşırı kullanımı, yanlışlıkla erişilen istenmeyen özelliklere sebep olan yazım hatalarını fark etmeyi zorlaştırabilir. Doğru tür kontrolleri yapın ve dikkatli bir şekilde kullanın.

Kod özeti

 1interface User {
 2    name?: string;
 3    address?: {
 4        city?: string;
 5        postalCode?: string;
 6    };
 7}
 8
 9const user: User = {
10    name: 'Alice',
11    address: {
12        city: 'Tokyo'
13    }
14};
15
16// Example of optional chaining
17console.log(user.address?.city); // 'Tokyo'
18console.log(user.address?.postalCode); // undefined
19
20// Using optional chaining combined with nullish coalescing
21console.log(user.address?.postalCode ?? 'Not provided'); // 'Not provided'

Özet

TypeScript'teki opsiyonel zincirleme, derinlemesine iç içe geçmiş nesnelere veya dizilere erişirken hataları önlerken özlü bir kod sağlar. Ayrıca, nullish coalescing operatörü ile birleştirildiğinde, varsayılan değerler belirlemenizi ve daha esnek bir mantık oluşturmanızı sağlar. Uygun şekilde kullanıldığında, kod güvenliğini ve okunabilirliğini önemli ölçüde artırabilir.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video