nor1c / ts

Re-learning/Deep-diving Typescript

Important and Useful

> typeof

Untuk mendapatkan tipe dari sebuah nilai atau ekspresi

Contoh 1:

const x = 10
type XType = typeof x // number

Contoh 2:

type Person = {
  name: string
  age: number
}

// tidak dapat langsung `typeof Person['age']` akan menyebabkan error 'Person' only refers to a type, but is being used as a value here.

// harus diassign ke variable terlebih dahulu
const person: Person = {
  name: 'A. Fauzi',
  age: 26
}

const TypeOFPersonAge = typeof person['age'] // number

> instanceof

Untuk memeriksa apakah sebuah objek adalah instance dari suatu tipe tertentu

Contoh:

const person = {
  name: 'John'
}

person instanceof Object // true
person instanceof Array // false
person instanceof Date // false

> keyof

Untuk mendapatkan key dari suatu objek

Contoh:

type Person = {
  name: string,
  age: number
}

type PersonKey = keyof Person // "name", "age"

> in

Digunakan konstruksi mapped types untuk menghasilkan type baru berdasarkan semua properti yang ada dalam referensi

Contoh:

type MappedTypes<T> = {
  [P in keyof T]: T[P] | null
}

> extends

Pembuatan Generic type untuk memberikan constraint pada tipe parameter generic. Memungkinkan kita untuk membatasi tipe yang diterima oleh parameter generik.

Contoh 1:

type MyType<T extends string> = {
  value: T
}

const contohValid: MyType<"hello"> = { value: "hello" }
const contohInvalid: MyType<123> = { value: 123 }

Contoh 2:

interface Printable {
  print(): void
}

function printObjek<T extends Printable>(obj: T) {
  obj.print() // <- notice kita bisa menggunakan .print() pada obj, karena T extends dari interface Printable
}

> keyof typeof

Mendapatkan tipe union dari keys dari tipe hasil dari ekspresi yang dievaluasi pada saat runtime

Contoh 1:

type TUser = {
    name: string
    age: number
}

type User = keyof typeof TUser // string | number | symbol

const user: User = 'true' // ok
const user: User = true // false
const user: User = 123 // ok

Contoh 2:

const myUser = {
  name: 'Jack',
  age: 26
}

type KTUser = keyof typeof myUser // "name" | "age"

const ktuser: KTUser = "name" // can only accept "name" or "age"

---

Learning Resources

• TypeScript Official Documentation: https://www.typescriptlang.org/docs/
• TypeScript Clean Code Principles: https://github.com/labs42io/clean-code-typescript
• TypeScript Deep Dive by Basarat: https://basarat.gitbook.io/typescript/
• TypeScript Challenges: https://tsch.js.org/