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 değildir, ancak bir geliştirici olarak bu değerin aslında ne olduğunu daha iyi bilirsiniz. Tür belirtimleri, 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özdizimi sunar. as sözdizimi daha yaygın yaklaşımdır:

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

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

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

Görev

Kolay

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

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

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

Şunları yapan processUserData adlı bir işlev oluştur:

unknown türünde bir data parametresi alır
data değerini bir string olarak ele almak için tür belirteci kullanır
JSON.parse() kullanarak JSON dizesini ayrıştırır
Ayrıştırılan sonucu userId (number), username (string) ve isActive (boolean) özelliklerine sahip bir nesne olarak ele almak için başka bir tür belirteci kullanır
Biçimlendirilmiş bir dize 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, JSON dizesi {"userId": 15, "username": "bob_admin", "isActive": false} olan bir secondApiResponse oluştur
unknown türünde, JSON dizesi {"userId": 99, "username": "charlie_user", "isActive": true} olan bir thirdApiResponse oluştur

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

processUserData işlevini apiResponse ile çağır ve sonucu yazdır
processUserData işlevini secondApiResponse ile çağır ve sonucu yazdır
processUserData işlevini thirdApiResponse ile çağır ve sonucu yazdır

Kendin dene

// API yanıt değişkenlerini oluştur
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ştur

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