TypeScript Error (TS2345) argument of type Person | undefined is not assignable to paramater of type Person

Question

I'm new to typescript and not sure what i'm doing wrong here

interface Person{
  id:number;
  name:string
}

 export async function getPersonInfo(person: Person): Promise<Person>{
 //some code here
 return response.data.person
 }

const someFunc = () => {
const [person, setPerson] = useState<Person>();

  useEffect(() => {
     getPersonInfo(person).then((data) => {
     setPerson(data);
     });
  }, [person]);

passing the instance of interface with null or undefined values in getPersonInfo seems to be the problem. But it works if i pass an array of interface Person using useState as below

export async function getPersonInfo(person: Person[]): Promise<Person[]>{
//some code here
return response.data.person
}

const [persom, setPerson] = useState<Person[]>([])

useEffect(() => {
getPersonInfo(person: Person[]).then((data) => {
setPerson(data);
});

why does it work for an array but not for a single object?

Answer 1

Your issue here is with

const [person, setPerson] = useState<Person>();
vs
const [persom, setPerson] = useState<Person[]>([])

In your first one (where it's erroring), the initial value of person is undefined so the compiler understands this to mean that person can be a Person or undefined. In your second one, you're initializing person as an empty array so the compiler understands this to mean it's an array of Person , but there's just no Person objects in it.

And the real problem ends up surfacing here:

export async function getPersonInfo(person: Person): Promise<Person>{
   //some code here
   return response.data.person
}

because getPersonInfo takes in a Person. So you either need to first make sure there's a person, or (not likely ideal) have getPersonInfo take in a Person | undefined Person | undefined .

useEffect(() => {
  if (person) {
    getPersonInfo(person).then((data) => {
      setPerson(data);
    });
  }
}, [person]);

Answer 2

Because your initial value for person is undefined.

So person is undefined until you receive the person from the api call and set it.

As an array you are setting the initial value to an empty array - it is an array, just empty. But it's not undefined. So Person[] is a valid type.

Answer 3

The problem is the call of useState() . Since you don't pass the initial value, the variable person will be undefined at first. In your second code, you pass an empty array to the function so that the variable will be an empty array which matches the type Person[] .

To solve the problem, you need to do either initialize the state with the Person object or accept undefined as the argument of the function.

export async function getPersonInfo(person?: Person): Promise<Person>{
  //some code here
  return response.data.person
}