tamakipedia

フロントエンドエンジニア。Typescriptもう特訓中です。一日の振り返りや学んだことをちょっとずつ吐いています。

【Typescript】Partial<T> ついて

今日はUtility Typesについて学んだので、その学習メモ。
さまざまなユーティリティーがあるが、その一つを例にとってみると少し理解が深まりました。
今回はPartialについて。

Utilty Types とは

Typescriptが提供する型の関数のようなもの。
元のインターフェースを利用し、新しい型を作成することができる。

Partial

それぞれのプロパティをoptionalにしたいときに利用する。

//インターフェースがあります
interface Todo {
    title: string;
    description: string;
}

//インターフェースTodoをもつtodo1
const todo1: Todo = {
    title: "orgnize desk",
    description: "clear clutter",
}

//アップデートするための関数
function updateTodo(todo: Todo, fieldsTodUpdate: Partial<Todo>){
    return {...todo, ...fieldsTodUpdate};
}

//updateTodoを利用し第一引数にコピーしたいオブジェクト、第二引数に追加したいオブジェクトを追加
const todo2 = updateTodo(todo1, {description: "throw out trash",})

この時、updateTodoの第二引数の型を

Partial<Todo>

にすることで、「Todoのプロパティーのうちどれか」を実現することができます。

終わり

こんな感じで、ユーティリティーを使うと元々のインターフェースを加工した型を表現することが可能です。
他にも特定のインターフェースを減らしたり、増やしたり、レコードを作成したり、色々できるみたいなので
現場のコードと照らし合わせつつ勉強していこうと思います。

参考

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

【TypeScript】Utility Typesをまとめて理解する - Qiita