JavaScript
TypeScript
フロントエンド

TypeScriptで型付けをしてみる


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"}]
}


さいごに

まだまだたくさんの型があるのでどんどん紹介していきます!

型付けって楽しいかも!


参考