阿川私房教材:學程式,拿 offer!

63 個專案實戰,直接上手!
無需補習,按步驟打造你的面試作品。

立即解鎖你的轉職秘笈

TypeScript 的型別系統很強大,大部分專案都在用。此外,在 TypeScript 中,其實有提供一些 Utility Types 來輔助我們進行型別定義與操作。今天與您分享其中五個。

Summary

  • Pick
  • Omit
  • ReadOnly
  • Partial
  • Required

1. Pick(Type, Keys)

Pick utility type 是從現有型別中選取某些屬性來生成新的型別。

基本上,Pick 從指定型別中刪除除指定鍵之外的所有鍵。

type Person = {
  name: string
  lastName: string
  age: number
  hobbies: string
}

type SomePerson = Pick<Person, "name" | "age">

// type SomePerson = {
//  name: string;
//  age: number;
// }

2. Omit(Type, Keys)

Omit utili type 與 Pick 型別相反,Omit 是寫出要省略的屬性,而不是要保留的屬性。

type Person = {
  name: string
  lastName: string
  age: number
  hobbies: string
}

type SomePerson = Omit<Person, "lastName" | "hobbies">

// type SomePerson = {
//  name: string;
//  age: number;
// }

3. Readonly(Type)

Readonly utility type 用於所有屬性都設置成唯讀的型別。無法為屬性分配新值,不然就跳 TypeScript 警告。

type Person = {
  name: string
}

type ReadOnlyPerson = Readonly<Person>

const person: ReadOnlyPerson = {
  name: "Fizz",
}

person.name = "Buzz"
// Cannot assign to 'name' because it is a read-only property.

4. Partial(Type)

Partial utility type 用於所有屬性都設置為選填的型別。

type Person = {
  name: string
  lastName: string
  age: number
  address: string
}

type PartialPerson = Partial<Person>

// type PartialPerson = {
//   name?: string | undefined;
//   lastName?: string | undefined;
//   age?: number | undefined;
//   address?: string | undefined;
// }

5. Required(Type)

Required utility type 與 Partial 相反。要求要定義好所有屬性。可用來避免選填屬性出現在此型別中。

type Person = {
  name?: string
  lastName?: string
  age?: number
  address?: string
}

type RequiredPerson = Required<Person>

// type RequiredPerson = {
//   name: string;
//   lastName: string;
//   age: number;
//   address: string;
// }

以上,簡單舉例五個分享,有很多好用的 utility type,歡迎查看官網了解更多:

https://www.typescriptlang.org/docs/handbook/utility-types.html


共有 0 則留言


精選技術文章翻譯,幫助開發者持續吸收新知。

阿川私房教材:學程式,拿 offer!

63 個專案實戰,直接上手!
無需補習,按步驟打造你的面試作品。

立即解鎖你的轉職秘笈