Penegasan Tipe

Termasuk bagian Pengantar TypeScript dalam perjalanan JavaScript di Coddy. Pelajaran 68 dari 73.

Terkadang TypeScript tidak memiliki cukup informasi untuk menentukan tipe yang tepat dari suatu nilai, tetapi kamu sebagai pengembang mengetahui lebih banyak tentang nilai tersebut sebenarnya. Asersi tipe memungkinkanmu memberi tahu TypeScript, "percayalah, saya tahu nilai ini memiliki tipe khusus ini."

TypeScript menyediakan dua sintaks untuk pernyataan tipe. Sintaks as adalah cara yang lebih umum:

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

Kamu juga dapat menggunakan sintaks tanda kurung sudut, meskipun sintaks ini lebih jarang digunakan di TypeScript modern:

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

Hal yang sama juga berlaku untuk object. Saat nilai diterima sebagai unknown, kamu dapat menyatakan bentuk yang diharapkan, lalu membaca propertinya:

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

Assertion hanya mengubah apa yang TypeScript yakini tentang nilai tersebut. Assertion tidak mengubah apa pun saat runtime, jadi nyatakan bentuk nilai hanya jika kamu tahu nilai itu benar-benar memiliki bentuk tersebut.

Tantangan

Mudah

Buat fungsi yang memproses data dari simulasi API eksternal. Kamu akan bekerja dengan nilai bertipe unknown dan menggunakan asersi tipe untuk mengakses propertinya dengan aman.

Buat variabel apiResponse bertipe unknown dan tetapkan string JSON berikut:

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

Buat fungsi bernama processUserData yang:

Menerima parameter data bertipe unknown
Menggunakan asersi tipe untuk memperlakukan data sebagai string
Mengurai string JSON menggunakan JSON.parse()
Menggunakan asersi tipe lain untuk memperlakukan hasil penguraian sebagai object dengan properti userId (number), username (string), dan isActive (boolean)
Mengembalikan string berformat: "User [userId]: [username] (Active: [isActive])"
Memiliki tipe pengembalian eksplisit berupa string

Buat data uji tambahan:

Buat secondApiResponse bertipe unknown dengan string JSON: {"userId": 15, "username": "bob_admin", "isActive": false}
Buat thirdApiResponse bertipe unknown dengan string JSON: {"userId": 99, "username": "charlie_user", "isActive": true}

Uji fungsimu dan cetak output berikut:

Panggil processUserData dengan apiResponse dan cetak hasilnya
Panggil processUserData dengan secondApiResponse dan cetak hasilnya
Panggil processUserData dengan thirdApiResponse dan cetak hasilnya

Coba sendiri

// Buat variabel respons API
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: Buat fungsi processUserData di sini

// Uji fungsi dan cetak hasilnya
console.log(processUserData(apiResponse));
console.log(processUserData(secondApiResponse));
console.log(processUserData(thirdApiResponse));

Uji dirimu

Pelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.

Semua pelajaran di Pengantar TypeScript

Latihan sendiri: Playground TypeScript