1. 程式人生 > 其它 >TypeScript Partial 使用的一個小技巧

TypeScript Partial 使用的一個小技巧

TypeScript 提供了一些工具性質的型別定義來方便開發人員進行一些通用的型別定義。Partial 是其中之一。

看個例子:

interface Todo {
    title: string;
    description: string;
}

const todo1 = {
    title: 'organize desk',
    description: 'clear clutter',
};

我們將如何編寫一個方法來獲取我們的 Todo 例項並使用來自另一個 Todo 的值更新它?

下面是一種實現方法:

function updateTodo(originalTodo: Todo, fieldsToUpdateTodo: any) {
    return { ...originalTodo, ...fieldsToUpdateTodo };
}

const todo2 = updateTodo(todo1, {
    description: 'throw out trash',
});

這種方式不是很好,因為如果我們只想更新 description 屬性,就不能夠將 fieldsToUpdateTodo 的型別定義成 Todo,否則我們還得為第二個引數指定 title 屬性。因此我們將 updateTodo 的第二個引數型別指定成 any,這樣就失去了型別檢查。

同樣的,如果我們把 interface Todo 的屬性設定成 optional,則第二個引數的型別可以定義成 Todo,但是 optional 屬性同樣失去了型別檢查。

使用 Partial 可以完美解決這個問題。

function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) {
    return { ...todo, ...fieldsToUpdate }; 
}

在 Partial 中包裝一個物件會將該物件上的所有屬性標記為可選。

然後我們可以像這樣呼叫我們的 updateTodo...

const todo2 = updateTodo(todo1, {
    description: 'throw out trash',
});

我們不會被迫從 Todo 介面設定每個屬性。我們的 UpdateTodo 方法然後可以愉快地使用擴充套件運算子來合併兩個 Todo。