webroad.online
  1. 1Web
  2. 2HTML
  3. 3CSS
  4. 4JavaScript
  5. 5TypeScript
  6. 6Git
  7. 7Unelte
  8. 8React
  9. 9State management
  10. 10Next.js
  11. 11Formulare
  12. 12Date și backend
  13. 13SEO
  14. 14Tailwind CSS
  15. 15Animații
  16. 16Testare
  17. 17Arhitectură
TypeScript · Lecția 2 din 6

Obiecte: type și interface

Forma obiectelor, câmpuri opționale și readonly, Record, type vs interface.

Actualizat

Ce înseamnă să tipezi un obiect

Descrii forma obiectului: ce chei are și ce tip are fiecare valoare. TS verifică apoi că fiecare obiect folosit respectă forma.

type Product = {
  id: number
  name: string
  price: number
  tags?: string[]          // opțional — poate lipsi
  readonly sku: string     // nu poate fi modificat după creare
}

const p: Product = { id: 1, name: 'Laptop', price: 4000, sku: 'LP-1' }
p.sku = 'X'                // ✗ readonly
p.color                    // ✗ nu există în Product

type vs interface — diferențe și când

Ambele descriu forma unui obiect. În 90% din cazuri sunt interschimbabile.

type interface
Obiecte ✓ ✓
Union, tuple, primitive, funcții ('a' | 'b') ✓ ✗
Extindere type B = A & { x: number } interface B extends A { x: number }
Declaration merging (două declarații cu același nume se combină) ✗ ✓
Mesaje de eroare uneori mai lungi uneori mai clare

Recomandare practică: type implicit (merge pentru orice), interface când scrii o librărie pe care alții o extind sau când echipa preferă așa. Important e să fii consecvent.

Proprietăți opționale și readonly

type User = {
  id: number
  email: string
  nickname?: string            // string | undefined
  readonly createdAt: Date
}

function displayName(user: User) {
  return user.nickname ?? user.email   // TS te obligă să tratezi lipsa
}

Dicționare: index signature și Record

Când cheile nu sunt cunoscute dinainte:

type Prices = { [productId: string]: number }
type Prices2 = Record<string, number>            // echivalent, mai citeț

const stock: Record<'ro' | 'md', number> = { ro: 10, md: 2 }   // chei fixe dintr-un union

Tipuri imbricate și compuse

type Address = { city: string; zip: string }
type Customer = { name: string; address: Address }

type Timestamps = { createdAt: Date; updatedAt: Date }
type Post = { title: string } & Timestamps      // intersecție: are tot din ambele

Structural typing

TS compară obiectele după formă, nu după nume: orice obiect care are câmpurile cerute e acceptat.

type Point = { x: number; y: number }
const p3 = { x: 1, y: 2, z: 3 }
const p: Point = p3          // ✓ are x și y — câmpul în plus nu deranjează

(Excepție: un obiect literal scris direct cu câmpuri în plus dă eroare — „excess property check” — ca să prindă typo-uri.)

Pe scurt

  • Tipezi forma obiectului; ? opțional, readonly nemodificabil.
  • type implicit; interface pentru extindere / librării.
  • Record<K, V> pentru dicționare; & pentru combinare.

Surse oficiale

Exerciții

Ți-a fost utilă pagina?

Un click — fără cont.