Quartz 🪬

TypeScript - Composing Types

3 min read

Union

Cho phép chúng ta định nghĩa một danh sách các giá trị có thể có của kiểu dữ liệu. Ví dụ:

type WindowStates = "open" | "closed" | "minimized"
 
type LockStates = "locked" | "unlocked"
 
type PositiveOddNumbersUnderTen = 1 | 3 | 5 | 7 | 9

Hoặc để định nghĩa một danh sách các kiểu dữ liệu có thể có của biến:

function getLength(obj: string | string[]) {
  return obj.length
}

Chúng ta có thể làm cho hàm trả về các giá trị khác nhau tùy thuộc vào kiểu dữ liệu của đối số truyền vào:

function wrapInArray(obj: string | string[]) {
  if (typeof obj === "string") {
    return [obj]
  }
  return obj
}

Generic

Tính năng generic cho phép chúng ta tạo ra các đối tượng có thể làm việc với nhiều loại dữ liệu khác nhau mà không cần phải xác định cụ thể kiểu dữ liệu đó.

Array

Dùng với mảng:

type numberArray = Array<number>
 
type stringArray = Array<string>
 
type objectWithNameArray = Array<{ name: string }>

Đoạn code trên tương đương với:

type numberArray = number[]
 
type stringArray = string[]
 
type objectWithNameArray = { name: string }[]

Interface

Ta cũng có thể dùng generic với interface:

interface Book {
  name: string
  pages: number
}
 
interface Flashlight {
  color: string
  battery: number
}
 
interface Backpack<T> {
  items: T[]
  add: (item: T) => void
  get: (id: number) => Type
}
 
type SchoolBackpack = Backpack<Book>
 
type TravellerBackpack = Backpack<Flashlight>

Function

Có thể xem generic tương tự như C++ Template trong C++. Nói cách khác, generic đóng vai trò như là một placeholder trong trường hợp ta không quan tâm đến kiểu cụ thể của đối tượng.

Xét đoạn code có sử dụng generic bên dưới.

function last<T>(arr: T[]) {
  return arr[arr.length - 1]
}
 
const lastNumber = last([1, 2, 3])
 
const lastCharacter = last(["a", "b", "c"])

Có thể thấy, kiểu dữ liệu của arr là không quan trọng bởi vì logic để lấy phần tử cuối của mảng đối với các kiểu dữ liệu khác nhau là như nhau.

Chúng ta có thể khai báo generic một cách tường minh cho kiểu trả về của hàm và cho lời gọi hàm:

function last<T = number>(arr: T[]): T {
  return arr[arr.length - 1]
}
 
const lastNumber = last([1, 2, 3])
 
const lastCharacter = last<string>(["a", "b", "c"])

Cũng có thể sử dụng nhiều generic cùng một lúc:

function makeArr<X, Y>(x: X, y: Y) {
  return [x, y]
}
 
const mixedArray = makeArr(1, "1")

Kiểu dữ liệu hiện tại của mixedArray là (string | number)[].

Nếu ta muốn hàm makeArr trả về một tuple (chẳng hạn [string, number]), ta nên khai báo kiểu dữ liệu tường minh cho giá trị về như sau:

function makeArr<X, Y>(x: X, y: Y): [X, Y] {
  return [x, y]
}

Trong trường hợp chỉ khai báo generic cho X mà bỏ qua Y, ta cần gán type mặc định cho Y. Cụ thể:

function makeArr<X, Y = string>(x: X, y: Y): [X, Y] {
  return [x, y]
}
 
const mixedArray = makeArr<number>(1, "1")

Resources

Backlinks