Quartz 🪬

TypeScript - Advanced Concepts

3 min read

Extending and Intersection

Chúng ta có thể mở rộng interface đã có với một thuộc tính nào đó bằng cách sử dụng từ khóa extends.

interface BasicAddress {
  name: string
  street: string
  city: string
  country: string
  postalCode: string
}
 
interface AddressWithUnit extends BasicAddress {
  unit: string
}

Chúng ta có thể kết hợp các interface lại với nhau sử dụng toán tử &:

interface Colorful {
  color: string
}
interface Circle {
  radius: number
}
 
type ColorfulCircle = Colorful & Circle

Type Guards

Type guard là một kỹ thuật giúp ta biết thông tin về kiểu của biến, thường được dùng trong các khối lệnh điều kiện.

Các cách sử dụng type guard:

The typeof Keyword

Cung cấp thông tin về kiểu của biến.

Ví dụ:

type alphanumeric = string | number
 
function add(a: alphanumeric, b: alphanumeric) {
  if (typeof a === "number" && typeof b === "number") {
    return a + b
  }
 
  if (typeof a === "string" && typeof b === "string") {
    return a.concat(b)
  }
 
  throw new Error("Invalid arguments. Both arguments must be either numbers or strings.")
}
 
console.log(add(1, 2)) // 3
console.log(add("Hello", " World")) // Hello World
console.log(add(1, "Hello")) // Error

The instanceOf Keyword

Dùng để kiểm tra một biến hoặc một giá trị nào đó có thuộc kiểu cho trước hay không.

Ví dụ:

class Customer {
  isCreditAllowed(): boolean {
    // ...
    return true
  }
}
 
class Supplier {
  isInShortList(): boolean {
    // ...
    return true
  }
}
 
type BusinessPartner = Customer | Supplier
 
function signContract(partner: BusinessPartner): string {
  let message: string
  if (partner instanceof Customer) {
    message = partner.isCreditAllowed() ? "Sign a new contract with the customer" : "Credit issue"
  } else {
    // must be Supplier
    message = partner.isInShortList()
      ? "Sign a new contract with the supplier"
      : "Need to evaluate further"
  }
  return message
}
 
console.log(signContract(new Customer())) // Sign a new contract with the customer
console.log(signContract(new Supplier())) // Sign a new contract with the supplier

The in Keyword

Kiểm tra xem một thuộc tính nào đó có tồn tại trong một đối tượng cho trước hay không.

Ví dụ:

function signContract(partner: BusinessPartner): string {
  let message: string
  if ("isCreditAllowed" in partner) {
    message = partner.isCreditAllowed() ? "Sign a new contract with the customer" : "Credit issue"
  } else {
    // must be Supplier
    message = partner.isInShortList()
      ? "Sign a new contract with the supplier "
      : "Need to evaluate further"
  }
  return message
}

User-defined Type Guards

Cho phép định nghĩa một type guard hoặc giúp TS suy ra kiểu dữ liệu khi sử dụng function.

Về bản chất, một user-defined type guard là một hàm mà kiểu trả về của nó có dạng arg is someType. Ví dụ:

function isCustomer(partner: any): partner is Customer {
  return partner instanceof Customer
}

Sử dụng type guard này như sau:

function signContract(partner: BusinessPartner): string {
  let message: string
  if (isCustomer(partner)) {
    message = partner.isCreditAllowed() ? "Sign a new contract with the customer" : "Credit issue"
  } else {
    message = partner.isInShortList()
      ? "Sign a new contract with the supplier"
      : "Need to evaluate further"
  }
 
  return message
}

Resources

Backlinks