TypeScript Academy · Lekcja

Wartości domyślne w destrukturyzacji

Bezpiecznie łącz wartości domyślne z adnotacjami typów

Wartości domyślne w destrukturyzacji to bezpłatna lekcja TypeScript Academy na CoddyKit. To lekcja 3 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 TypeScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs TypeScript Academy zawiera 4 lekcji w sumie.

Uzupełnianie braków

Wartości domyślne w destrukturyzacji zapewniają wartość zastępczą, gdy brakuje właściwości lub elementu albo ma on wartość undefined. W połączeniu z wnioskowaniem TypeScriptu sprawiają, że opcjonalna konfiguracja jest wygodna i bezpieczna.

Wartość domyślna w destrukturyzacji obiektu

Po wiązaniu należy zapisać = value, aby nadać mu wartość zastępczą. Jeśli właściwość nie istnieje lub ma wartość undefined, zamiast niej zostanie użyta wartość domyślna.

const opts: { count?: number } = {}
const { count = 0 } = opts
console.log(count) // 0

Wartości domyślne z opcjonalnymi właściwościami

Wartości domyślne naturalnie współpracują z opcjonalnymi właściwościami (?). Wartość domyślna usuwa przypadek undefined, dlatego wynikowa zmienna ma typ nieopcjonalny.

interface Opts { retries?: number }
function connect(opts: Opts) {
  const { retries = 3 } = opts
  // retries is number, not number | undefined
  return retries * 2
}
console.log(connect({}))

Wartości domyślne a wnioskowane typy

Jeśli nie dodano adnotacji, TypeScript wywnioskuje typ zmiennej na podstawie wartości domyślnej. W tym przypadku 0 sprawia, że count ma typ number.

const settings: { count?: number; label?: string } = { label: "hi" }
const { count = 0, label = "none" } = settings
console.log(count, label) // 0 hi

Wartość domyślną wywołuje tylko undefined

Wartości domyślne są używane wyłącznie dla undefined, nigdy dla innych wartości falsy, takich jak 0, "" lub null. Te wartości są przekazywane bez zmian.

const { x = 10 } = { x: 0 }
console.log(x) // 0, not 10 — 0 is not undefined
const { y = 10 } = { y: undefined as number | undefined }
console.log(y) // 10

Wartości domyślne w parametrach funkcji

Wartości domyślne w destrukturyzowanych parametrach ułatwiają obsługę opcjonalnych opcji. Każde pole może mieć własną wartość zastępczą bezpośrednio w sygnaturze.

function draw({ x = 0, y = 0 }: { x?: number; y?: number }) {
  return x + "," + y
}
console.log(draw({ x: 5 })) // 5,0

Wartość domyślna dla całego parametru

Aby wywołujący mógł całkowicie pominąć obiekt argumentów, należy nadać samemu parametrowi wartość domyślną {}. Bez tego wywołanie bez argumentu spowodowałoby błąd.

function draw({ x = 0, y = 0 }: { x?: number; y?: number } = {}) {
  return x + "," + y
}
console.log(draw()) // 0,0

Wartości domyślne ze zmianą nazwy

W jednym wiązaniu można jednocześnie zmienić nazwę i ustawić wartość domyślną: najpierw należy zmienić nazwę, a następnie dodać wartość domyślną po nowej nazwie.

const { count: total = 0 } = { } as { count?: number }
console.log(total) // 0

Obliczane wartości domyślne

Wartością domyślną może być dowolne wyrażenie, nawet takie, które odwołuje się do wcześniejszych wiązań. Jest ono obliczane z opóźnieniem — tylko wtedy, gdy danej wartości rzeczywiście brakuje.

function make({ width = 100, height = width }: { width?: number; height?: number } = {}) {
  return width + "x" + height
}
console.log(make({ width: 50 })) // 50x50

Podsumowanie wartości domyślnych w tablicach

Wartości domyślne działają również w destrukturyzacji tablic i są stosowane osobno dla każdej pozycji, gdy elementu brakuje lub ma wartość undefined.

const [a = 1, b = 2, c = 3] = [10, undefined]
console.log(a, b, c) // 10 2 3

Kiedy wartości domyślne są szczególnie przydatne

Wartości domyślne idealnie sprawdzają się w obiektach opcji: wywołujący podaje tylko to, co jest dla niego istotne, a funkcja uzupełnia resztę rozsądnymi wartościami zastępczymi. Usuwają również undefined z wnioskowanych typów, upraszczając treść funkcji.

interface Config { debug?: boolean; level?: number }
const init = ({ debug = false, level = 1 }: Config = {}) => debug ? level : 0
console.log(init({ debug: true, level: 5 }))

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat wartości domyślnych w destrukturyzacji.

Podsumowanie

Wartości domyślne w destrukturyzacji (= fallback) są używane tylko wtedy, gdy wartości brakuje lub ma ona wartość undefined — nigdy dla innych wartości falsy. Usuwają undefined z typów opcjonalnych właściwości, mogą być wywnioskowane lub określone za pomocą adnotacji, obsługują zmianę nazw i mogą odwoływać się do wcześniejszych wiązań. W przypadku obiektów opcji należy ustawić dla parametru wartość domyślną {}, aby wywołujący mógł całkowicie go pominąć.

Często zadawane pytania

Czy lekcja „Wartości domyślne w destrukturyzacji” jest bezpłatna?

Tak — pełny tekst „Wartości domyślne w destrukturyzacji” 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 TypeScript Academy, przejdź na CoddyKit PRO. Kurs TypeScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Wartości domyślne w destrukturyzacji”?

Bezpiecznie łącz wartości domyślne z adnotacjami typów Ćwiczysz TypeScript 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ąć TypeScript Academy?

Nie wymagamy żadnego doświadczenia. TypeScript 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 3 z 4.

Ile czasu zajmuje lekcja „Wartości domyślne w destrukturyzacji”?

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 TypeScript Academy?

Tak. Każda lekcja TypeScript 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

← Powrót do TypeScript Academy