Author: John Au-Yeung

To fix the ‘TypeScript: Spread types may only be created from object types’ error, we can cast our variable into an object.

For instance, we write

const foo = <T extends object>(t: T): T => {
  return { ...(t as object) } as T;
};

to cast t into an object with as so that the TypeScript compiler knows that t is an object.

Then we can use the spread operator on t without TypeScript compiler errors.

Conclusion

To fix the ‘TypeScript: Spread types may only be created from object types’ error, we can cast our variable into an object.

Sometimes, we want to find an array item with TypeScript.

In this article, we’ll look at how to find an array item with TypeScript.

How to find an array item with TypeScript?

To find an array item with TypeScript, we can use the array find method.

For instance, we write

const array = [
  { id: 1, value: "itemname" },
  { id: 2, value: "itemname" },
];

const item1 = array.find((i) => i.id === 1);

to get the item with id 1 from array and return it with

array.find((i) => i.id === 1)

We call find with a callback that returns the condition of the item we’re looking for in array.

Conclusion

To find an array item with TypeScript, we can use the array find method.

Sometimes, we want to cast arrays with TypeScript.

In this article, we’ll look at how to cast arrays with TypeScript.

How to cast arrays with TypeScript?

To cast arrays with TypeScript, we can use the as keyword or add the variable name before the array expression.

For instance, we write

const a = x as number[];

or

const a = x as Array<number>;

to cast x to a number array with as.

Also, we can write

const a = <number[]>x;

or

const a = <Array<number>>x;

to cast x to a number array by putting the type in brackets before x.

Conclusion

To cast arrays with TypeScript, we can use the as keyword or add the variable name before the array expression.

Sometimes, we want to combine members of multiple types in a TypeScript annotation.

In this article, we’ll look at how to combine members of multiple types in a TypeScript annotation.

How to combine members of multiple types in a TypeScript annotation?

To combine members of multiple types in a TypeScript annotation, we can create union types.

For instance, we write

interface ClientRequest {
  userId: number;
  sessionKey: string;
}

interface Coords {
  lat: number;
  long: number;
}

type Combined = ClientRequest | Coords;

to create the Combined type which is an union of the ClientRequest and Coords interfaces.

This means the members of any object with the Combined type should be either from the ClientRequest or the Coords interfaces.

Conclusion

To combine members of multiple types in a TypeScript annotation, we can create union types.

Sometimes, we want to get a function’s return value type with TypeScript.

In this article, we’ll look at how to get a function’s return value type with TypeScript.

How to get a function’s return value type with TypeScript?

To get a function’s return value type with TypeScript, we can use the ReturnType type.

For instance, we write

const createPerson = () => ({
  firstName: "John",
  lastName: "Doe",
});

type Person = ReturnType<typeof createPerson>;

to get the type of the createPerson function with typeof createPerson.

Then we can get the return type of the function with ReturnType<typeof createPerson> and assign the type to the Person alias.

Conclusion

To get a function’s return value type with TypeScript, we can use the ReturnType type.