const vs readonly

Differences

  1. const is used for variables
    const message = 'Hello';
    
    // Does not work
    message = 'World';
    While readonly is used for properties. The properties can be declared as a member of class
    class Triangle {
        public readonly numberOfVertices = 3;
    }
    
    const triangle = new Triangle();
    
    // Does not work
    triangle.numberOfVertices = 4;
    or type, interface:
    interface Person {
        firstName: string;
        lastName: string;
        readonly fullName: string;
    }
  2. const declarations have to be initialized, and you can't reassign their values. The readonly properties can be reassigned in the constructor function.
    class Square {
        readonly numberOfVertices: number;
    
        constructor() {
            this.numberOfVertices = 4;
        }
    }
    The readonly properties could be changed if we don't pass their class or interface directly but passing an alias.
    Let's take a look at the Person interface above, and assume that we have the following function to update the person information:
    const updatePerson = (person: {
        firstName: string,
        lastName: string,
        fullName: string,
    }) => {
        person.fullName = `${firstName}, ${lastName}`;
    };
    We can update the fullName property because it's an property of person parameter:
    let person: Person = {
        firstName: 'Foo',
        lastName: 'Bar',
        fullName: 'Foo Bar',
    }
    
    updatePerson(person);
    
    person.fullName;    // `Foo, Bar`
    Of course, the compiler will throw an error if we pass the original type Person:
    const updatePerson = (person: Person) => {
        // Error: Cannot assign to 'fullName' because it is a read only property
        person.fullName = `${person.firstName}, ${person.lastName}`;
    }

Good to know

  1. In a given class, if a property has only getter method and doesn't come with setter method, it will be treated as read only.
    class Square {
        side: number = 0;
    
        get area() {
            return this.side * this.side;
        }
    }
    
    const s = new Square();
    Setting s.area = 100 will throw an error because area is a ready only property.
  2. In the React library, we don't change the props and state of a component directly. Because the props are immutable and the state could be updated via setState() method.
    React type definitions wrap the props and state in read only type.
    // P, S represents the props and state respectively
    class Component<P, S> {
        constructor(props: Readonly<P>);
    
        readonly props: Readonly<P> & Readonly<{ children?: ReactNode }>;
        state: Readonly<S>;
    }
Hit the Subscribe button for the latest news on my tools. No spam. Ever!
© 2020 Nguyen Huu Phuoc. All rights reserved