0Pricing
Frontend Academy · Lekcja

Typy narzędziowe: Partial, Required, Pick, Omit

Proszę przekształcać istniejące typy za pomocą wbudowanych typów narzędziowych, aby tworzyć warianty bez powielania kodu.

Typy narzędziowe: Partial, Required, Pick, Omit to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Wbudowane typy narzędziowe

TypeScript zawiera zestaw generycznych typów narzędziowych, które przekształcają inne typy. Dzięki nim nie trzeba ręcznie przepisywać podobnych wariantów interfejsów.

Partial<T>

Sprawia, że wszystkie właściwości T stają się opcjonalne. Doskonale nadaje się do danych aktualizacji lub patchowania, gdy nie trzeba podawać wszystkich pól.

interface User { name: string; email: string; age: number; }

function updateUser(id: string, changes: Partial<User>) {
  // changes.name is string | undefined
  // changes.email is string | undefined
}

updateUser('1', { name: 'Bob' }); // only update name

Required<T>

Przeciwieństwo Partial — sprawia, że wszystkie właściwości stają się wymagane, usuwając modyfikatory opcjonalności (?).

interface Config {
  host?: string;
  port?: number;
  debug?: boolean;
}

function validate(config: Required<Config>) {
  // All three are now required
  console.log(config.host, config.port, config.debug);
}

Pick<T, K>

Tworzy typ zawierający tylko określone właściwości T. Przydatne do ograniczania dużych obiektów do potrzebnych pól.

interface User { id: number; name: string; email: string; password: string; }

type PublicUser = Pick<User, 'id' | 'name' | 'email'>;
// { id: number; name: string; email: string }
// password is excluded — safe to send to client

Omit<T, K>

Tworzy typ z usuniętymi określonymi właściwościami. Jest odwrotnością Pick.

type UserWithoutPassword = Omit<User, 'password'>;
// { id: number; name: string; email: string }

type CreateUserDto = Omit<User, 'id'>; // new users don't have an id yet

Readonly<T>

Sprawia, że wszystkie właściwości są tylko do odczytu — zapobiega ponownemu przypisywaniu. Przydatne w przypadku obiektów konfiguracji i niezmiennych danych.

const config: Readonly<Config> = {
  host: 'localhost',
  port: 3000,
};
config.port = 8080; // Error: cannot assign to 'port' because it is read-only

Record<K, V>

Tworzy typ obiektu z kluczami typu K i wartościami typu V. Jest przejrzystszą alternatywą dla surowej sygnatury indeksu, gdy klucze są znaną unią.

type Role = 'admin' | 'editor' | 'viewer';
type Permissions = Record<Role, { canEdit: boolean; canDelete: boolean }>;

const perms: Permissions = {
  admin:  { canEdit: true,  canDelete: true  },
  editor: { canEdit: true,  canDelete: false },
  viewer: { canEdit: false, canDelete: false },
};

ReturnType<T> i Parameters<T>

Wyodrębniają typ zwracany i typy parametrów typu funkcji. Są przydatne, gdy nie można zaimportować typu, ale trzeba dopasować sygnaturę funkcji.

function fetchUser(id: number) {
  return { id, name: 'Alice' };
}

type UserResult = ReturnType<typeof fetchUser>; // { id: number; name: string }
type FetchParams = Parameters<typeof fetchUser>; // [id: number]

Awaited<T>

Rozpakowuje typ Promise do typu jego rozstrzygniętej wartości. Przydatne podczas pracy z funkcjami asynchronicznymi.

type UserResponse = Awaited<ReturnType<typeof fetchUser>>;
// Resolves both the function return and the Promise

async function load() { return { user: { name: 'Alice' } }; }
type Loaded = Awaited<ReturnType<typeof load>>; // { user: { name: string } }

Extract<T, U> i Exclude<T, U>

Extract<T, U> zachowuje tylko te typy w T, które można przypisać do U. Exclude<T, U> je usuwa.

type A = 'a' | 'b' | 'c' | 'd';
type BC = Extract<A, 'b' | 'c' | 'e'>; // 'b' | 'c'
type AD = Exclude<A, 'b' | 'c'>;       // 'a' | 'd'

// NonNullable removes null and undefined:
type T = string | null | undefined;
type NonNull = NonNullable<T>; // string

Łączenie typów narzędziowych

Typy narzędziowe można łączyć, aby tworzyć precyzyjne typy.

type UpdatePayload<T> = Partial<Omit<T, 'id' | 'createdAt'>>;
// Use for PATCH endpoints — omit immutable fields, make rest optional

function patch(id: string, data: UpdatePayload<User>) {
  // data can have any subset of mutable user fields
}

Szybki test

Który typ narzędziowy usuwa określone klucze z interfejsu?

Podsumowanie: typy narzędziowe

Partial sprawia, że wszystkie pola są opcjonalne. Required usuwa modyfikatory opcjonalności. Pick zachowuje wybrane klucze. Omit usuwa wybrane klucze. Readonly zapobiega modyfikacjom. Record mapuje klucze unii na typy wartości. ReturnType i Parameters wyodrębniają typy funkcji. Typy narzędziowe można łączyć, aby tworzyć precyzyjne typy DTO.

Często zadawane pytania

Czy lekcja „Typy narzędziowe: Partial, Required, Pick, Omit” jest bezpłatna?

Tak — pełny tekst „Typy narzędziowe: Partial, Required, Pick, Omit” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Typy narzędziowe: Partial, Required, Pick, Omit”?

Proszę przekształcać istniejące typy za pomocą wbudowanych typów narzędziowych, aby tworzyć warianty bez powielania kodu. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Typy narzędziowe: Partial, Required, Pick, Omit”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?

Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Generics: T, extends i ograniczenia
  2. Typy narzędziowe: Partial, Required, Pick, Omit
  3. Typy mapowane i warunkowe
  4. Zawężanie: typeof, instanceof, unie dyskryminowane
← Powrót do Frontend Academy