Utility Types

Search…
Utility Types
ขอทิ้งท้ายคอร์ส TypeScript 101 ด้วย Utility Types หรือ Type ตัวช่วยต่างๆ ที่ TypeScript มีให้ใช้งาน
Partial<Type>
Partial<T> จะรับ Object Type และเปลี่ยน Property ทั้งหมดให้เป็น Optional เพื่อที่เราจะได้ใช้เฉพาะบาง Property ได้
1
interface Post {
2
  title: string
3
  body: string
4
  imageUrl: string
5
}
6
​
7
type PostFields = Partial<Post>
8
​
9
// เหมีอนกันกับ
10
interface PostFields {
11
  title?: string
12
  body?: string
13
  imageUrl?: string
14
}
15
​
16
function updatePost(post: Post, fields: PostFields) {
17
  ...
18
}
19
​
20
const post = { title: "...", body: "...", imageUrl: "..." }
21
​
22
// Update เฉพาะ Body ของ Post
23
const updatedPost = updatePost(post, { body: "..." }) 
Copied!
ตัวอย่างนี้ใช้ประโยชน์จาก Partial<Post> เพื่อให้เวลาที่เราอัพเดตตัว Post โดยไม่ต้องใช้ Field ทั้งหมดก็ได้
Pick<Type,Keys>
ใช้เพื่อ Pick (เลือก) เฉพาะ Key ของ Property มาเป็น Object Type ใหม่
1
// "เลือก" เฉพาะ Property title และ body
2
type PostTitleAndBody = Pick<Post, "title" | "body">
3
​
4
// เหมือนกันกับ
5
interface PostTitleAndBody {
6
  title: string
7
  body: string
8
}
9
​
10
function updatePost(post: Post, fields: PostTitleAndBody) { ... }
11
​
12
updatePost(post, { title: "...", body: "..." })
Copied!
Omit<Type,Keys>
ตรงข้ามกับ Pick คือจะยกเว้น Keys ที่ระบุไว้
1
// ใช้ทุก Properties ของ Post "ยกเว้น" title
2
type PostDetails = Omit<Post, "title">
3
​
4
// เหมือนกันกับ
5
interface PostDetails {
6
  body: string
7
  imageUrl: string
8
}
Copied!
Record<Keys,Type>
สร้าง Object Type ด้วย Property ที่เป็น Keys และมี Value เป็นประเภทตาม Type
1
type CodeName = "alpha" | "beta" | "charlie"
2
type Color = "red" | "green" | "blue" | "white" | "black"
3
​
4
// List ต้องเป็น Object ที่มีชี่อ Property เป็น CodeName 
5
// และ Value เป็น Object { color: Color }
6
type CodeWithColor = Record<CodeName, { color: Color }>
7
​
8
const codes: CodeWithColor = {
9
  alpha: { color: "blue" }
10
  beta: { color: "red" }
11
}
Copied!
Parameters<FunctionType>
ดึง Type ของ Parameters ออกมาจาก Function ออกมาเป็น Tuple (Array)
1
// (a: number, b: number) => number
2
function sum(a: number, b: number) { return a + b }
3
​
4
type SumParams = Parameters<sum> // ❌ ต้องใช้ Type ไม่ใช่ใส่ function เข้าไปโดยตรง
5
type SumParams = Parameters<typeof sum> // ✅ ใช้ typeof เพื่อดึง Type จาก function
6
​
7
// เหมือนกันกับ
8
type SumParams = [a: number, b: number] // Tuple ที่มี 2 ตัว
Copied!
ReturnType<FunctionType>
ดึง Type ของค่า Return จาก Function
1
// (a: number, b: number) => number
2
function sum(a: number, b: number) { return a + b }
3
​
4
type SumReturn = ReturnType<typeof sum> // number
5
​
6
// (msg: string) => void
7
function log(msg) { console.log(`LOG : ${msg}`) }
8
​
9
type LogReturn = ReturnType<typeof log> // void
Copied!
Utility Types ยังมีอีกหลายตัว ดูทั้งหมดได้จาก Official Docs ซึ่งจะช่วยให้เราใช้ประโยชน์จาก Type ที่มีอยู่แล้ว หรือ Import มาจาก Library ต่างๆ ได้โดยไม่ต้องกำหนด Generic Type ที่ซับซ้อนเองทั้งหมด
ลองเขียนเว็บง่าย ๆ ด้วย TypeScript
Next - คอร์ส
Ruby ฉบับคนหัดโค้ด
Last modified 1yr ago
Copy link
Contents
Parameters<FunctionType>
ReturnType<FunctionType>
`Partial<Type>`

`Pick<Type,Keys>`

`Omit<Type,Keys>`

`Record<Keys,Type>`

`Parameters<FunctionType>`

`ReturnType<FunctionType>`
