Error thrown due to missing property in type '{}' when using TypeScript arrow function parameter

Question

Error thrown due to missing property in type '{}' when using TypeScript arrow function parameter

As outlined in the documentation for interfaces in TypeScript,

An interface declaration serves as an alternative way to define an object type.

I'm puzzled by the error I encounter in the following code snippet. My attempt is to restrict the object type within the arrow function parameter using an interface.

(Try it out on TypeScript Playground)

interface Person {
  name: string;
}

type ObjToString = (obj: object) => string;

const personToString: ObjToString = (obj: Person) => obj.name;
// This leads to the error                  ^^^^^^

The error message states:

Type '(obj: Person) => string' is not compatible with type 'ObjToString'.
  The parameters 'obj' are of conflicting types.
    Property 'name' is required in type 'Person' but missing in type '{}'.

Interestingly, assigning a variable of type Person to a variable of type object poses no issue:

let obj: object;
const person: Person = { name: "Tom" };
obj = person;  // No problem here

Why does the error appear specifically at the arrow function parameter? What steps can be taken to resolve this issue?

typescript

Answer 1

Answer №1

object type itself does not have any properties. This is causing the issue you are experiencing. The object type is quite restrictive.

If you need to work with any type of object, simply use any.

type ObjToString = (obj: any) => string;

interface Person {
  name: string;
}

const personToString: ObjToString = (obj: Person) => obj.name;

Link

In addition, TypeScript will not flag an error if you pass extra properties to a type that expects fewer properties. However, it will definitely raise an error if the minimum required properties are missing.

For example:

interface Student {
  school : string;
  name : string;
}

interface Human {
name : string;
}

let x : Student = {
  name: 'Test',
  school: 'Test'
};

let y : Human = {
  name : 'test'
};

// x = y;
y = x;

The statement x=y will result in an error, while y=x will not. You can assign a Student to a Human, but not the other way around.

Link

This is what is occurring in your code; TypeScript is flagging an error because Person requires name which is missing in the object ({}). object has no requirements and name is just an additional property being passed to the variable obj.

Answer 2

object type itself does not have any properties. This is causing the issue you are experiencing. The object type is quite restrictive.

If you need to work with any type of object, simply use any.

type ObjToString = (obj: any) => string;

interface Person {
  name: string;
}

const personToString: ObjToString = (obj: Person) => obj.name;

Link

In addition, TypeScript will not flag an error if you pass extra properties to a type that expects fewer properties. However, it will definitely raise an error if the minimum required properties are missing.

For example:

interface Student {
  school : string;
  name : string;
}

interface Human {
name : string;
}

let x : Student = {
  name: 'Test',
  school: 'Test'
};

let y : Human = {
  name : 'test'
};

// x = y;
y = x;

The statement x=y will result in an error, while y=x will not. You can assign a Student to a Human, but not the other way around.

Link

This is what is occurring in your code; TypeScript is flagging an error because Person requires name which is missing in the object ({}). object has no requirements and name is just an additional property being passed to the variable obj.

Answer 3

Answer №2

You are attempting to assign a function that specifically requires a Person object to a function that is designed to accept any type of object. This means you would then be able to utilize the personToString function like this:

personToString({ whatever: "hello" });

Naturally, this will not work as intended, resulting in an error message from the compiler.

Answer 4

You are attempting to assign a function that specifically requires a Person object to a function that is designed to accept any type of object. This means you would then be able to utilize the personToString function like this:

personToString({ whatever: "hello" });

Naturally, this will not work as intended, resulting in an error message from the compiler.

Answer 5

Answer №3

The definition of the TypeScript object type encompasses values that fall outside of primitive types.

An important consideration arises when attempting to retrieve a property named 'name' from an 'object', represented by {} which lacks a 'name' property.

To assist Typescript in comprehending your intentions, you can employ generics:

    interface Person {
      name: string;
    }
    type ObjToString<T> = (obj: T) => string;
    const personToString: ObjToString<Person> = (obj: Person) => obj.name;

    const aPerson: Person = {name: 'test_name'};
    const aPersonName = personToString(aPerson);
    console.log(aPersonName)

Answer 6

The definition of the TypeScript object type encompasses values that fall outside of primitive types.

An important consideration arises when attempting to retrieve a property named 'name' from an 'object', represented by {} which lacks a 'name' property.

To assist Typescript in comprehending your intentions, you can employ generics:

    interface Person {
      name: string;
    }
    type ObjToString<T> = (obj: T) => string;
    const personToString: ObjToString<Person> = (obj: Person) => obj.name;

    const aPerson: Person = {name: 'test_name'};
    const aPersonName = personToString(aPerson);
    console.log(aPersonName)

Error thrown due to missing property in type '{}' when using TypeScript arrow function parameter

Answer №1

Answer №2

Answer №3

Similar questions

IntelliSense is failing me. I am unable to find information on DOM/CSS types

Exploring the process of retrieving token expiration in TypeScript using the 'jsonwebtoken' library

Typescript constructor that accepts an object as an argument instead of traditional parameters

Issue with subscribing to nested observables, unable to successfully unsubscribe

Tips for inserting an HTML element within an exported constant

Align watermark content to the far left side

Sending data to a React component from regular HTML

Tips for simulating or monitoring an external function without an object using Typescript 2 and Jasmine 2 within an Angular 4 application

Connecting the SelectedItem of a listbox in ngPrime to an Observable Collection in Angular2

Tips for creating a sophisticated state transition diagram using Typescript

Transforming Excel data into JSON format using ReactJS

Choose only the options that are present in both arrays

With TypeScript, you have the flexibility to specify any data type in the generic types when using the axios.get method

Tips for displaying backend error messages on the frontend

Transitioning from Webpack to Vite: Resolving Path Alias and Ensuring Proper Imports

Next.js API routes encountering 404 error

What are some alternatives for integrating React production build files apart from utilizing Express?

Managing state on the login page functions properly, although there is a minor inconvenience of having to click the login button twice after entering the username and password

Switch up row values in an array and transform them into an object using SheetJS

How to resolve the issue of not being able to access functions from inside the timer target function in TypeScript's