Property ref does not exist on type

The error message “property ref does not exist on type” is typically encountered in TypeScript or JavaScript development. It means that you are trying to access the property “ref” on a variable or object that does not have that property defined.

To provide a detailed explanation with examples, let’s consider a scenario where this error can occur:

Example 1:

    interface Person {
      name: string;
      age: number;
    }

    function displayPersonDetails(person: Person) {
      console.log(person.ref); // Error: property 'ref' does not exist on type 'Person'
    }

    const john: Person = {
      name: "John",
      age: 25
    };

    displayPersonDetails(john);
  

In the above example, we have an interface named “Person” which defines two properties: “name” of type string and “age” of type number. The function “displayPersonDetails” takes a person object as a parameter and tries to access its “ref” property. However, the “ref” property is not defined in the “Person” interface, hence the error occurs.

To resolve this error, you have a few possible options:

Option 1: Define the “ref” property in the “Person” interface if it is required for your application:

    interface Person {
      name: string;
      age: number;
      ref: string; // Add the 'ref' property
    }

    function displayPersonDetails(person: Person) {
      console.log(person.ref); // No error now
    }

    const john: Person = {
      name: "John",
      age: 25,
      ref: "ABC123"
    };

    displayPersonDetails(john); // Output: "ABC123"
  

Option 2: Remove the code that tries to access the “ref” property if it is not needed in your application:

    interface Person {
      name: string;
      age: number;
    }

    function displayPersonDetails(person: Person) {
      // Code removed: console.log(person.ref);
    }

    const john: Person = {
      name: "John",
      age: 25
    };

    displayPersonDetails(john);
  

Option 3: If you are receiving a variable from an external source (e.g., API response), make sure to check its structure and properties before accessing them:

    interface Person {
      name: string;
      age: number;
      ref?: string; // Make the 'ref' property optional
    }

    function displayPersonDetails(person: Person) {
      if (person.ref) {
        console.log(person.ref); // Only access 'ref' if it exists
      }
    }

    const john: Person = {
      name: "John",
      age: 25
    };

    displayPersonDetails(john); // No error, 'ref' property is not accessed
  

By following one of these options, you can resolve the error “property ref does not exist on type” based on your application requirements and the nature of the variable or object you are working with.