TypeScriptTypy narzędziowe
Partial<Type>
Tworzy typ, w którym wszystkie właściwości są opcjonalne.
Przykład
#TypeScript
interface User {
id: number
name: string
email: string
}
function updateUser(user: User, changes: Partial<User>): User {
return { ...user, ...changes }
}
const ania: User = { id: 1, name: 'Ania', email: 'ania@example.com' }
const updated = updateUser(ania, { email: 'ania@codeworlds.pl' })
console.log(updated)Wynik
{ id: 1, name: 'Ania', email: 'ania@codeworlds.pl' }Definicja i zastosowanie
#Partial<Type> bierze istniejący typ obiektu i zwraca jego kopię, w której każda właściwość ma znak zapytania, czyli jest opcjonalna. Nie musisz powtarzać definicji tylko po to, żeby dopuścić niepełne dane.
Najczęściej przydaje się przy aktualizacjach: funkcja updateUser przyjmuje tylko te pola, które się zmieniają, a reszta zostaje bez zmian. Podobnie przy formularzach wypełnianych krok po kroku albo przy domyślnych ustawieniach nadpisywanych przez użytkownika.
Partial działa płytko. Zagnieżdżone obiekty pozostają takie, jak w oryginale, więc ich pola nadal są wymagane.
Składnia
#Składnia
type Nowy = Partial<Typ>Parametry typu
#Type
typ obiektowy
Typ, którego właściwości mają stać się opcjonalne.
Więcej przykładów
#TypeScript
type UserDraft = Partial<User>
// type UserDraft = {
// id?: number
// name?: string
// email?: string
// }
const draft: UserDraft = { name: 'Kuba' } // poprawne
const empty: UserDraft = {} // też poprawneTypeScript
interface Settings {
theme: 'dark' | 'light'
fontSize: number
sounds: boolean
}
const defaults: Settings = { theme: 'dark', fontSize: 16, sounds: true }
function createSettings(overrides: Partial<Settings>): Settings {
return { ...defaults, ...overrides }
}
console.log(createSettings({ sounds: false }))Wynik
{ theme: 'dark', fontSize: 16, sounds: false }Dobre praktyki
#- Gdy potrzebujesz odwrotności, czyli wymusić wszystkie pola, użyj
Required<Type>. - Jeśli tylko niektóre pola mają być opcjonalne, połącz typy:
Omit<User, "email"> & Partial<Pick<User, "email">>.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.