The basic of readonly property
In Type Script, you can make the object of the properties of an object read-only.
CODE
const person: { readonly name: string } = { name: 'Mike' }
person.name = 21;
// → Cannot assign to 'name' because it is a read-only property.
⚠️① readonly is only at compile-time
In the compiled JavaScript code, the readonly declaration is removed, so it will not be detected as an error at runtime.
⚠️② readonly is not recursive.
CODE
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`
If you want to make it read-only, also you need to put readonly to primarySchool.
CODE
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.
Readonly
When the number of properties increases, adding readonly to each one becomes cumbersome and increases the amount of code.
You can refactor by using Readonly.
CODE
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'
}
Happy Coding☀️
Vollständiger Original-Bericht
Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.
SOCIAL SHARE CARD GENERATOR