Tür Atamaları

Coddy'nin JavaScript Journey'sinin TypeScript'e Giriş bölümünün bir parçası. Ders 68 / 73.

Bazen TypeScript bir değerin tam türünü belirlemek için yeterli bilgiye sahip olmaz, ancak geliştirici olarak siz o değerin gerçekte ne olduğunu daha iyi bilirsiniz. Tür onaylamaları, TypeScript’e "bana güven, bu değerin bu belirli türde olduğunu biliyorum" demenizi sağlar.

TypeScript, tür iddiaları için iki söz dizimi sunar. as söz dizimi daha yaygın yaklaşımdır:

let data: unknown = '{"name": "John", "age": 30}';
let user = data as string;

Açılı ayraç söz dizimini de kullanabilirsin, ancak bu söz dizimi modern TypeScript'te daha az yaygındır:

let data: unknown = '{"name": "John", "age": 30}';
let user = <string>data;

Aynısı nesneler için de geçerlidir. Bir değer unknown olarak geldiğinde, beklediğin yapıyı tür iddiasıyla belirtebilir ve ardından özelliklerini okuyabilirsin:

let payload: unknown = { name: "John", age: 30 };
let user = payload as { name: string; age: number };
console.log(user.name);

Bir tür iddiası, yalnızca TypeScript’in değer hakkında ne düşündüğünü değiştirir. Çalışma zamanında hiçbir şeyi dönüştürmez; bu nedenle bir değerin gerçekten o şekle sahip olduğunu biliyorsan yalnızca o zaman tür iddiasında bulun.

Görev

Kolay

Harici bir API simülasyonundan gelen verileri işleyen bir fonksiyon oluştur. unknown türündeki değerlerle çalışacak ve özelliklerine güvenli bir şekilde erişmek için tür iddialarını kullanacaksın.

unknown türünde bir apiResponse değişkeni oluştur ve ona aşağıdaki JSON dizgesini ata:

{"userId": 42, "username": "alice_dev", "isActive": true}

processUserData adlı bir fonksiyon oluştur. Bu fonksiyon:

unknown türünde bir data parametresi alır
data değerini string olarak ele almak için bir tür iddiası kullanır
JSON dizgesini JSON.parse() kullanarak ayrıştırır
Ayrıştırılmış sonucu userId (number), username (string) ve isActive (boolean) özelliklerine sahip bir nesne olarak ele almak için başka bir tür iddiası kullanır
Biçimlendirilmiş bir dizge döndürür: "User [userId]: [username] (Active: [isActive])"
Açık bir string dönüş türüne sahiptir

Ek test verileri oluştur:

unknown türünde bir secondApiResponse oluştur ve şu JSON dizgesini ata: {"userId": 15, "username": "bob_admin", "isActive": false}
unknown türünde bir thirdApiResponse oluştur ve şu JSON dizgesini ata: {"userId": 99, "username": "charlie_user", "isActive": true}

Fonksiyonunu test et ve aşağıdaki çıktıları yazdır:

processUserData fonksiyonunu apiResponse ile çağır ve sonucu yazdır
processUserData fonksiyonunu secondApiResponse ile çağır ve sonucu yazdır
processUserData fonksiyonunu thirdApiResponse ile çağır ve sonucu yazdır

Kendin dene

// API yanıtı değişkenlerini oluşturun
const apiResponse: unknown = '{"userId": 42, "username": "alice_dev", "isActive": true}';
const secondApiResponse: unknown = '{"userId": 15, "username": "bob_admin", "isActive": false}';
const thirdApiResponse: unknown = '{"userId": 99, "username": "charlie_user", "isActive": true}';

// TODO: processUserData fonksiyonunu burada oluşturun

// Fonksiyonu test edin ve sonuçları yazdırın
console.log(processUserData(apiResponse));
console.log(processUserData(secondApiResponse));
console.log(processUserData(thirdApiResponse));