LoginSignup
52
37

More than 3 years have passed since last update.

TypeScriptの組み込み型関数【Partial, Required,ReadOnly,Pick,Record】

Last updated at Posted at 2019-06-10

enumに関しても記事も以下のブログで書いています。
ぜひ一読下さい!

Partial

プロパティを任意化させることができます。

一部のプロパティをPartial化する場合

type Person = {
// ageが任意項目
    age?: number,
    name: string
}

// Partial化している為、必須項目が無くてもコンパイルエラーにならない
const user: Partial<Person> = {age:22}

// Partial化していない為、コンパイルエラーになる
const user2: Person ={age:22}

全てのプロパティをPartial化する場合

type Person = {
 age: number,
 name: string
}

// Partial化している為、コンパイルエラーにならない
const user2: Partial<Person> ={}

Required

プロパティを必須化させることができます。
Partialの真逆です。


type Person {
    name: string,
    age: number
}

const user2: Required<Person> ={age:22,name:"Yamada"}

ReadOnly

プロパティを読み取り専用にし、再代入不可にします。


type Person = {
    name: string,
    age: number
}


const user: Readonly<Person> = {
    name: "Yamada",
    age: 22
}

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

Pick

定義した型から任意のプロパティを抜き出し、新しい型を作成します。

type Person = {
    name: string,
    age: number
}

// Person型から"name"プロパティのみを取り出す。
const user: Pick<Person, "name"> = {
    name: "tanaka"
}

// "name"プロパティのみ取り出している為、コンパイルエラーになる。
// Type '{ name: string; age: number; }' is not assignable to type 'Pick<Person, "name">'. 
const user: Pick<Person,"name"> = {
 name: "Yamda",
 age: 22,
}

Record

プロパティを一気にまとめて型定義をすることができる。

// key名を"Tanaka"と"Yamada"のみ許容する。
type Users = "Tanaka" | "Yamada"

//valueの型付けを行う
type Info = { [key: string]: string }

// keyにUsers,valueにInfoを使用する。
// Infoは配列の為オブジェクトにするとコンパイルエラーになる
const userGroup: Record<Users, Info[]> = {
    Tanaka: [{ city: "Osaka" }, { firstName: "Ichiro" }],
    Yamada:[{city:"Tokyo"}]


// Usersが"Tanaka"|"Yamada"なのでエラーになる。
// "Tanaka"|"Yamada"|"Kato"にすれば使用できる
    Kato:[{city:"Kyoto"}]
}

さいごに

まだまだたくさんの型があるのでどんどん紹介していきます!
型付けって楽しいかも!

参考

52
37
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
52
37