Quartz 🪬

TypeScript - Structural Type System

2 min read

Nếu hai object có cùng shape thì chúng được xem như là có cùng type. Đây là tính năng shape-matching của TS.

Trong ví dụ bên dưới, đối tượng point có cùng shape với kiểu dữ liệu Point nên hàm logPoint có thể được thực thi với đối số là point.

interface Point {
  x: number
  y: number
}
 
function logPoint(p: Point) {
  console.log(`${p.x}, ${p.y}`)
}
 
const point = { x: 12, y: 26 }
logPoint(point) // output: "12, 26"

Tính năng shape-matching này chỉ yêu cầu match một subset các thuộc tính của đối tượng, ví dụ:

const point3D = { x: 12, y: 26, z: 89 }
logPoint(point3D) // output: "12, 26"
 
const rect = { x: 33, y: 3, width: 30, height: 80 }
logPoint(rect) // output: "33, 3"
 
const color = { hex: "#187ABF" }
logPoint(color) // error: Argument of type '{ hex: string; }' is not assignable to parameter of type 'Point'. Type '{ hex: string; }' is missing the following properties from type 'Point': x, y

Hoặc thậm chí là có thể áp dụng đối với instance của class:

class VirtualPoint {
  x: number
  y: number
 
  constructor(x: number, y: number) {
    this.x = x
    this.y = y
  }
}
 
const newVPoint = new VirtualPoint(13, 56)
logPoint(newVPoint) // output: "13, 56"

Resources

Backlinks