TypeScript-objekter gjort enkle for nybegynnere

Objekter er en grunnleggende del av JavaScript og TypeScript. De lar deg gruppere relaterte data og funksjoner sammen, og gir en måte å modellere virkelige enheter i koden din. TypeScript forbedrer JavaScript-objekter med typesikkerhet, noe som gjør koden din mer forutsigbar og enklere å vedlikeholde. Denne veiledningen vil forenkle konseptet med TypeScript-objekter for nybegynnere.

Hva er et objekt i TypeScript?

Et objekt er en samling nøkkelverdi-par, der nøkler er strenger (eller symboler) og verdier kan være av hvilken som helst type. I TypeScript kan du definere formen til et objekt ved å bruke typer eller grensesnitt, og sikre at objektet følger en bestemt struktur.

Definere enkle objekter i TypeScript

La oss starte med å definere et enkelt objekt i TypeScript. Dette ligner på hvordan du definerer objekter i JavaScript, men med den ekstra fordelen av typesikkerhet.

Grunnleggende objekteksempel

Slik definerer du et enkelt objekt i TypeScript:

const person: { name: string; age: number } = {
  name: "Alice",
  age: 25
};

console.log(person.name); // Output: Alice
console.log(person.age);  // Output: 25

I dette eksemplet har person-objektet to egenskaper: navn (av typen streng) og age (av typen nummer ). TypeScript vil sikre at objektet overholder denne strukturen.

Bruke grensesnitt for å definere objektstruktur

Et grensesnitt er en kraftig funksjon i TypeScript som definerer formen til et objekt. Grensesnitt gir en måte å definere kontrakter i koden din, og sikrer at objekter overholder en bestemt struktur.

Definere et grensesnitt

Slik bruker du et grensesnitt til å definere strukturen til et objekt:

interface Person {
  name: string;
  age: number;
}

const person: Person = {
  name: "Bob",
  age: 30
};

console.log(person.name); // Output: Bob
console.log(person.age);  // Output: 30

I dette eksemplet definerer Person-grensesnittet strukturen til et personobjekt. Variabelen person må følge denne strukturen, ellers vil TypeScript gi en feil.

Valgfrie egenskaper i objekter

TypeScript lar deg definere valgfrie egenskaper i objekter ved å bruke ?-symbolet. Valgfrie egenskaper kan utelates når du oppretter objekter, noe som gir fleksibilitet i hvordan du definerer objektstrukturer.

Eksempel med valgfrie egenskaper

Her er et eksempel der egenskapen phoneNumber er valgfri:

interface Employee {
  name: string;
  age: number;
  phoneNumber?: string; // Optional property
}

const employee1: Employee = {
  name: "John",
  age: 28
};

const employee2: Employee = {
  name: "Doe",
  age: 32,
  phoneNumber: "123-456-7890"
};

console.log(employee1.phoneNumber); // Output: undefined
console.log(employee2.phoneNumber); // Output: 123-456-7890

I dette eksemplet har ikke employee1 en phoneNumber-egenskap, mens employee2 har det. Begge er gyldige i henhold til Employee-grensesnittet.

Skrivebeskyttede egenskaper i objekter

TypeScript lar deg lage egenskaper skrivebeskyttet, og forhindrer dem i å bli endret etter at objektet er opprettet. Dette er nyttig for å lage uforanderlige objekter.

Eksempel med skrivebeskyttede egenskaper

Slik definerer du skrivebeskyttede egenskaper:

interface Car {
  readonly brand: string;
  model: string;
}

const car: Car = {
  brand: "Toyota",
  model: "Camry"
};

// car.brand = "Honda"; // Error: Cannot assign to 'brand' because it is a read-only property

car.model = "Corolla"; // Valid
console.log(car.model); // Output: Corolla

I dette eksemplet er egenskapen brand merket som readonly. Ethvert forsøk på å endre det vil resultere i en kompileringsfeil.

Nestede objekter i TypeScript

TypeScript-objekter kan nestes, noe som betyr at et objekt kan inneholde et annet objekt som en egenskap. Dette er vanlig i komplekse datastrukturer.

Eksempel på nestede objekter

Her er et eksempel på et nestet objekt:

interface Address {
  street: string;
  city: string;
  zipCode: string;
}

interface User {
  name: string;
  age: number;
  address: Address; // Nested object
}

const user: User = {
  name: "Emily",
  age: 27,
  address: {
    street: "123 Main St",
    city: "New York",
    zipCode: "10001"
  }
};

console.log(user.address.city); // Output: New York

I dette eksemplet har Bruker-grensesnittet et nestet Address-objekt. user-objektet følger denne strukturen, og gir tilgang til nestede egenskaper.

Konklusjon

Objekter i TypeScript er kraftigere og mer fleksible enn vanlige JavaScript-objekter på grunn av typedefinisjoner, valgfrie egenskaper, skrivebeskyttede egenskaper og nestede strukturer. Ved å definere objekter ved hjelp av grensesnitt kan du lage mer robust og feilfri kode. Begynn å bruke TypeScript-objekter i prosjektene dine for å utnytte den fulle kraften i typesikkerhet og strukturerte data.