Vorsichtsmaßnahmen bei der Verwendung von readonly in TypeScript

Die Grundlage der schreibgeschützten Eigenschaft

In Type Script können Sie die Eigenschaften eines Objekts schreibgeschützt machen.

const person: { readonly name: string  } = { name: 'Mike' }

person.name = 21;
// → Cannot assign to 'name' because it is a read-only property.

---

⚠️① schreibgeschützt ist nur zur Kompilierungszeit

Im kompilierten JavaScript-Code wird die schreibgeschützte Deklaration entfernt, sodass sie zur Laufzeit nicht als Fehler erkannt wird.

⚠️② readonly ist nicht rekursiv.

const person: {
  readonly name: string;
  readonly academicBackground: {
    primarySchool: string
  }
} = {
  name: 'Mike',
  academicBackground: {
    primarySchool: 'School A'
  }
}

person.academicBackground.primarySchool = 'School B'
// You can change `person.academicBackground.primarySchool`

Wenn Sie es schreibgeschützt machen möchten, müssen Sie auch „readonly“ für PrimarySchool festlegen.

const person: {
  readonly name: string;
  readonly academicBackground: {
    readonly primarySchool: string
  }
} = {
  name: 'Mike',
  academicBackground: {
    primarySchool: 'School A'
  }
}

person.academicBackground.primarySchool = 'School B'
// → Cannot assign to 'primarySchool' because it is a read-only property.

---

Schreibgeschützt

Wenn die Anzahl der Eigenschaften zunimmt, wird das Hinzufügen von schreibgeschützten Eigenschaften zu jeder einzelnen umständlich und erhöht die Codemenge.
Sie können das Refactoring mithilfe von Readonly durchführen.

const obj: {
  readonly a : string;
  readonly b: string;
  readonly c: string;
  readonly d: string;
} = {
  a: 'a',
  b: 'b',
  c: 'c',
  d: 'd'
}

// ↓

const obj: Readonly<{
  a : string;
  b: string;
  c: string;
  d: string;
}> = {
  a: 'a',
  b: 'b',
  c: 'c',
  d: 'd'
}

Viel Spaß beim Programmieren☀️

Das obige ist der detaillierte Inhalt vonVorsichtsmaßnahmen bei der Verwendung von readonly in TypeScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!