0Pricing
Frontend Academy · Lekcja

Typy prymitywne, unie i aliasy typów

Proszę oznaczać zmienne typami string, number, boolean i tablicami. Proszę tworzyć typy unii za pomocą | oraz nadawać im czytelne nazwy przy użyciu aliasów type.

Typy prymitywne, unie i aliasy typów 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.

Dodawanie adnotacji do zmiennych

Adnotacje typów dodaje się za pomocą dwukropka po nazwie zmiennej. TypeScript wnioskuje typy, gdy jest to możliwe — jawne adnotacje należy dodawać tam, gdzie wnioskowanie jest niejasne lub potrzebna jest dokumentacja.

let score: number = 0;
const greeting: string = 'Hello';
let active: boolean = true;
let data: null = null;
let placeholder: undefined;

// Inferred (no annotation needed):
const pi = 3.14;  // TypeScript knows this is number

Typy prymitywne

Typy prymitywne TypeScript odpowiadają prymitywom JavaScript: string, number (bez rozróżnienia na liczby całkowite i zmiennoprzecinkowe), boolean, null, undefined, symbol, bigint.

function greet(name: string): string {
  return `Hello, ${name}`;
}

function double(n: number): number {
  return n * 2;
}

function toggle(active: boolean): boolean {
  return !active;
}

Tablice

Typ tablicy można zapisać jako Type[] lub za pomocą typu generycznego Array<Type>. Oba zapisy są równoważne.

const names: string[] = ['Alice', 'Bob'];
const scores: number[] = [98, 87, 72];
const flags: boolean[] = [true, false, true];

// Generic syntax:
const items: Array<string> = ['a', 'b'];

Typy unii: |

Typy unii pozwalają zmiennej przechowywać wartość jednego z kilku typów. Należy użyć operatora potoku |. TypeScript zawęża typ wewnątrz instrukcji warunkowych.

function formatId(id: number | string): string {
  if (typeof id === 'number') {
    return `#${id.toString().padStart(6, '0')}`; // id is narrowed to number
  }
  return id.toUpperCase(); // id is narrowed to string
}

Typy literałowe

Jako typów można używać literałów tekstowych, liczbowych lub logicznych. W połączeniu z uniami tworzą one zamknięty zbiór dozwolonych wartości — podobnie jak enum.

type Direction = 'north' | 'south' | 'east' | 'west';
type Status = 'pending' | 'active' | 'cancelled';
type DiceRoll = 1 | 2 | 3 | 4 | 5 | 6;

function move(dir: Direction) { /* ... */ }
move('north'); // OK
move('up');    // Error: Argument not assignable

Aliasy typów: type

Słowo kluczowe type tworzy alias typu — wielokrotnie używaną nazwę dowolnego typu. Aliasy działają w przypadku typów prymitywnych, unii, obiektów, krotek i złożonych typów.

type UserId = string | number;
type RGB = [number, number, number]; // tuple
type Callback = (event: MouseEvent) => void;

const userId: UserId = 42;
const red: RGB = [255, 0, 0];
const handler: Callback = (e) => console.log(e.type);

Typy obiektów za pomocą type

Kształt obiektów można opisywać za pomocą aliasów typów. Właściwości opcjonalne oznacza się symbolem ?, a właściwości tylko do odczytu słowem kluczowym readonly.

type User = {
  id: number;
  name: string;
  email: string;
  role?: 'admin' | 'user'; // optional
  readonly createdAt: Date; // can't reassign
};

const user: User = {
  id: 1,
  name: 'Alice',
  email: 'alice@example.com',
  createdAt: new Date()
};

Typy przecięcia: &

Wiele typów można połączyć za pomocą operatora &. Wynikowy typ zawiera wszystkie właściwości obu typów. Jest to przydatne podczas rozszerzania typów.

type Timestamped = {
  createdAt: Date;
  updatedAt: Date;
};
type UserWithTimestamp = User & Timestamped;
// Has all User properties AND createdAt/updatedAt

Typ any — wyjście awaryjne

any wyłącza sprawdzanie typów dla danej wartości. Jest zaraźliwy — wartości wyprowadzone z any również mają typ any. Należy używać go ostatecznie podczas migracji, nigdy jako rozwiązania długoterminowego.

let data: any = fetch('/api/data'); // no type checking
data.foo.bar.baz; // no error — and no protection

// Better: use 'unknown' and narrow it:
let raw: unknown = getExternalData();
if (typeof raw === 'string') {
  console.log(raw.toUpperCase()); // narrowed
}

Typ unknown — bezpieczna alternatywa dla any

unknown jest bezpiecznym pod względem typów odpowiednikiem any. Nie można użyć wartości unknown bez wcześniejszego zawężenia jej typu. Wymusza to walidowanie danych zewnętrznych.

Krotki — tablice o stałej długości

Krotka to tablica o stałej długości, w której każda pozycja ma znany typ.

type Point = [number, number];
const origin: Point = [0, 0];
const p: Point = [3, 4];

// React useState returns a tuple:
const [count, setCount] = useState<number>(0);

Szybkie sprawdzenie

Jaka funkcja TypeScript pozwala funkcji przyjmować zarówno tekst, jak i liczbę?

Podsumowanie: typy prymitywne, unie i aliasy

Typy prymitywne: string, number, boolean, null, undefined. Tablice: Type[]. Typy unii: A | B. Typy literałowe służą do definiowania zamkniętych zbiorów wartości. Alias type pozwala tworzyć wielokrotnie używane nazwy typów. Właściwości opcjonalne oznacza się symbolem ?. Właściwości niezmienne oznacza się słowem readonly. W przypadku danych zewnętrznych należy preferować unknown zamiast any.

Często zadawane pytania

Czy lekcja „Typy prymitywne, unie i aliasy typów” jest bezpłatna?

Tak — pełny tekst „Typy prymitywne, unie i aliasy typów” 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 prymitywne, unie i aliasy typów”?

Proszę oznaczać zmienne typami string, number, boolean i tablicami. Proszę tworzyć typy unii za pomocą | oraz nadawać im czytelne nazwy przy użyciu aliasów type. Ć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 prymitywne, unie i aliasy typów”?

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. Dlaczego TypeScript: typy wyłapują błędy podczas kompilacji
  2. Typy prymitywne, unie i aliasy typów
  3. Interfejsy i typy obiektów
  4. Kompilowanie TS i tsconfig.json
← Powrót do Frontend Academy