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 developer mengetahui lebih banyak tentang nilai tersebut. Type assertion memungkinkan kamu memberi tahu TypeScript, "Percayalah, aku tahu nilai ini memiliki tipe khusus ini."

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

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

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

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

Tantangan

Mudah

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

Buat variabel apiResponse bertipe unknown dan tetapkan string JSON berikut padanya:

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

Buat fungsi bernama processUserData yang:

Menerima parameter data bertipe unknown
Menggunakan type assertion untuk memperlakukan data sebagai string
Mem-parsing string JSON menggunakan JSON.parse()
Menggunakan type assertion lain untuk memperlakukan hasil parsing sebagai object dengan property userId (number), username (string), dan isActive (boolean)
Mengembalikan string berformat: "User [userId]: [username] (Active: [isActive])"
Memiliki tipe pengembalian eksplisit string

Buat data pengujian 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 fungsi kamu 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