TypeScript - 使用筆記 (5)

簡介

  • TypeScript 內建的輔助工具類型
  • Utility Types可根據需求，方便的轉換現有的型別，或產生一個新型別
  • 增加程式碼的靈活性和重用性，更精確的定義型別

Partial<Type>

  • 將Type的所有屬性設定成可選

範例 1

interface User {
  id: number
  name: string
}

type PartialUser = Partial<User>
// 等同於
// {
//   id?: number;
//   name?: string;
// }

範例 2

  • 修改產品價格
interface Product {
  title: string
  price: number
}

function updateProduct(product: Product, fieldsToUpdate: Partial<Product>) {
  return { ...product, ...fieldsToUpdate }
}

const product1 = {
  title: 'Iphone66',
  price: 66
}

const product2 = updateProduct(product1, {
  price: 77
})

console.log(product2) //{ title: "Iphone66", price: 77}

Required<Type>

  • 將Type的所有屬性設為必要

範例

interface Props {
  a?: number
  b?: string
}

type RequiredProps = Required<Props>
// 等同於
// {
//   a: number;
//   b: string;
// }

const obj: Props = { a:3 }
const obj2: :Required<Props> = { a:6 } ❌
// Property 'b' is missing in type '{ a: number; }' but required in type 'Required<Props>'.

Readonly<Type>

  • 將Type的所有屬性設定成唯讀

範例

interface Job {
  salary: number
}

const myJob: Readonly<Job> = { salary: 50 }
myJob.salray = 99999 ❌
// Cannot assign to 'salary' because it is a read-only property.

Record<Keys, Type>

  • 建立一個物件型別，屬性鍵來自 Keys，屬性值型別為 Type

範例

  • 屬性值設定為 Role，值只能是 Permission 所定義的內容
type Role = 'Manager' | 'Engineer' | 'HR'
type Permission = 'read-only' | 'read-write' | 'no-access'

type RolePermissions = Record<Role, Permission>

const rolePermissions: RolePermissions = {
  Manager: 'read-write',
  Engineer: 'read-write',
  HR: 'read-only'
}

rolePermissions.HR = 'fired' ❌
// Type '"fired"' is not assignable to type 'Permission'.

Pick<Type, Keys>

  • 從Type中選取一組屬性Keys來建立新型別

範例

  • 在Todo中，選取特定的屬性，來建立新型別：TodoPreview
interface Todo {
  title: string
  description: string
  completed: boolean
}

type TodoPreview = Pick<Todo, 'title' | 'completed'>

const todo: TodoPreview = {
  title: 'Take a walk',
  completed: false
}

Omit<Type, Keys>

  • 從 Type 中移除一組屬性 Keys 來建立新型別

範例

interface Todo {
  title: string
  description: string
  completed: boolean
}

type TodoPreview = Omit<Todo, 'description'>

const todo: TodoPreview = {
  title: 'Take a walk',
  completed: false
}

Exclude<Type, ExcludedUnion>

  • 從Type（通常是Union型別）中移除符合條件的型別

範例

  • 從 Primitive 中移除string型別，value 的值只能是number或boolean
type Primitive = string | number | boolean
const value: Exclude<Primitive, string> = true

Extract<Type, Union>

  • 從Type（通常是Union型別）中，選出符合條件的型別

範例

  • 從 Primitive 中指定string型別，value 的值只能是string
type Primitive = string | number | boolean
const value: Extract<Primitive, string> = 'Only String'

參考資料

# TypeScript