TypeScript-objekter gjort enkle for begyndere

Objekter er en grundlæggende del af JavaScript og TypeScript. De giver dig mulighed for at gruppere relaterede data og funktioner sammen, hvilket giver en måde at modellere virkelige enheder i din kode. TypeScript forbedrer JavaScript-objekter med typesikkerhed, hvilket gør din kode mere forudsigelig og nemmere at vedligeholde. Denne vejledning vil forenkle konceptet med TypeScript-objekter for begyndere.

Hvad er et objekt i TypeScript?

Et objekt er en samling af nøgle-værdi-par, hvor nøgler er strenge (eller symboler), og værdier kan være af enhver type. I TypeScript kan du definere formen på et objekt ved hjælp af typer eller grænseflader, hvilket sikrer, at objektet følger en bestemt struktur.

Definering af simple objekter i TypeScript

Lad os starte med at definere et simpelt objekt i TypeScript. Dette svarer til, hvordan du definerer objekter i JavaScript, men med den ekstra fordel af typesikkerhed.

Grundlæggende objekteksempel

Sådan definerer du et simpelt 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 eksempel har person-objektet to egenskaber: navn (af typen streng) og age (af typen nummer ). TypeScript vil sikre, at objektet overholder denne struktur.

Brug af grænseflader til at definere objektstruktur

En interface er en kraftfuld funktion i TypeScript, der definerer formen på et objekt. Grænseflader giver en måde at definere kontrakter i din kode på, hvilket sikrer, at objekter overholder en bestemt struktur.

Definering af en grænseflade

Sådan bruger du en grænseflade til at definere strukturen af ​​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 eksempel definerer Person-grænsefladen strukturen af ​​et personobjekt. Variablen person skal overholde denne struktur, ellers vil TypeScript give en fejl.

Valgfri egenskaber i objekter

TypeScript giver dig mulighed for at definere valgfri egenskaber i objekter ved hjælp af ? symbolet. Valgfri egenskaber kan udelades, når du opretter objekter, hvilket giver fleksibilitet i, hvordan du definerer objektstrukturer.

Eksempel med valgfri egenskaber

Her er et eksempel, hvor egenskaben 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 eksempel har employee1 ikke en phoneNumber egenskab, mens employee2 har. Begge er gyldige i henhold til Employee-grænsefladen.

Skrivebeskyttede egenskaber i objekter

TypeScript giver dig mulighed for at lave egenskaber skrivebeskyttet, hvilket forhindrer dem i at blive ændret, efter at objektet er oprettet. Dette er nyttigt til at skabe uforanderlige objekter.

Eksempel med skrivebeskyttede egenskaber

Sådan definerer du skrivebeskyttede egenskaber:

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 eksempel er egenskaben brand markeret som readonly. Ethvert forsøg på at ændre det vil resultere i en kompileringsfejl.

Indlejrede objekter i TypeScript

TypeScript-objekter kan indlejres, hvilket betyder, at et objekt kan indeholde et andet objekt som egenskab. Dette er almindeligt i komplekse datastrukturer.

Eksempel på indlejrede objekter

Her er et eksempel på et indlejret 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 eksempel har Bruger-grænsefladen et indlejret Address-objekt. user-objektet følger denne struktur, hvilket giver adgang til indlejrede egenskaber.

Konklusion

Objekter i TypeScript er mere kraftfulde og fleksible end almindelige JavaScript-objekter på grund af typedefinitioner, valgfri egenskaber, skrivebeskyttede egenskaber og indlejrede strukturer. Ved at definere objekter ved hjælp af grænseflader kan du skabe mere robust og fejlfri kode. Begynd at bruge TypeScript-objekter i dine projekter for at udnytte den fulde kraft af typesikkerhed og strukturerede data.