TypeScript-objekt som är enkla för nybörjare

Objekt är en grundläggande del av JavaScript och TypeScript. De låter dig gruppera relaterade data och funktioner tillsammans, vilket ger ett sätt att modellera verkliga enheter i din kod. TypeScript förbättrar JavaScript-objekt med typsäkerhet, vilket gör din kod mer förutsägbar och lättare att underhålla. Den här guiden kommer att förenkla konceptet med TypeScript-objekt för nybörjare.

Vad är ett objekt i TypeScript?

Ett objekt är en samling nyckel-värdepar, där nycklar är strängar (eller symboler) och värden kan vara av vilken typ som helst. I TypeScript kan du definiera formen på ett objekt med hjälp av typer eller gränssnitt, vilket säkerställer att objektet följer en specifik struktur.

Definiera enkla objekt i TypeScript

Låt oss börja med att definiera ett enkelt objekt i TypeScript. Detta liknar hur du definierar objekt i JavaScript men med den extra fördelen av typsäkerhet.

Exempel på grundläggande objekt

Så här definierar du ett 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 det här exemplet har person-objektet två egenskaper: name (av typen string) och age (av typen number) ). TypeScript kommer att säkerställa att objektet följer denna struktur.

Använda gränssnitt för att definiera objektstruktur

Ett gränssnitt är en kraftfull funktion i TypeScript som definierar formen på ett objekt. Gränssnitt ger ett sätt att definiera kontrakt i din kod, vilket säkerställer att objekt följer en specifik struktur.

Definiera ett gränssnitt

Så här använder du ett gränssnitt för att definiera strukturen för ett 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 det här exemplet definierar Person-gränssnittet strukturen för ett personobjekt. Variabeln person måste följa denna struktur, annars kommer TypeScript att ge ett fel.

Valfria egenskaper i objekt

TypeScript låter dig definiera valfria egenskaper i objekt med hjälp av symbolen ?. Valfria egenskaper kan utelämnas när du skapar objekt, vilket ger flexibilitet i hur du definierar objektstrukturer.

Exempel med valfria egenskaper

Här är ett exempel där egenskapen phoneNumber är valfri:

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 det här exemplet har employee1 inte egenskapen phoneNumber, medan employee2 har det. Båda är giltiga enligt Employee-gränssnittet.

Skrivskyddade egenskaper i objekt

TypeScript låter dig göra egenskaper skrivskyddad, vilket förhindrar att de ändras efter att objektet har skapats. Detta är användbart för att skapa oföränderliga objekt.

Exempel med skrivskyddade egenskaper

Så här definierar du skrivskyddade 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 det här exemplet är egenskapen brand markerad som readonly. Varje försök att ändra det kommer att resultera i ett kompileringsfel.

Kapslade objekt i TypeScript

TypeScript-objekt kan kapslas, vilket innebär att ett objekt kan innehålla ett annat objekt som en egenskap. Detta är vanligt i komplexa datastrukturer.

Exempel på kapslade objekt

Här är ett exempel på ett kapslat 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 det här exemplet har User-gränssnittet ett kapslat Address-objekt. Objektet user följer denna struktur, vilket ger tillgång till kapslade egenskaper.

Slutsats

Objekt i TypeScript är mer kraftfulla och flexibla än vanliga JavaScript-objekt på grund av typdefinitioner, valfria egenskaper, skrivskyddade egenskaper och kapslade strukturer. Genom att definiera objekt med hjälp av gränssnitt kan du skapa mer robust och felfri kod. Börja använda TypeScript-objekt i dina projekt för att utnyttja den fulla kraften av typsäkerhet och strukturerad data.