Ways to set a default value for a function that returns an unknown type in TypeScript

Question

Ways to set a default value for a function that returns an unknown type in TypeScript

In my code, I have a customizedHook that returns a value of type typeXYZ || unknown. However, when I try to destructure the returned value, I encounter an error

TS2339: Property 'xyz' does not exist on type 'unknown'

, even though the data actually returns as xyz: {} and abc: ['string1', 'string2']. How can I resolve this issue?

export function useAPICall(): typeXYZ || unknown {
  const {data} = useQuery(['apiCallData'], async () => {
    const value: typeABC = (await cbFunction()) as typeABC;
    return value?.defaultValue;
  });

  return {data};
//console.log(data)
//{xyz: {abc: 'asdasda', cde: 'xzczxc'}, abc: ['aaaa','bbbb','cccc']}
}

const {xyz: {}, abc: string[]} = useAPICall()

typescript typescript-typings

Answer 1

Answer №1

Using a union type like TypeXYZ | unknown (with a single pipe) actually makes the type restrictions stricter than those of the individual types in the union, which may not be what you expect.

For instance, consider the following code snippet:

const a = get_value() as number | string;
const b = parseInt(a, 10);

An error will occur here because parseInt does not accept arguments of type number. This means that any code involving the union type must be valid for all types within it. Since unknown is the most restrictive type and usually requires casting to be used, it essentially overrides XYZ completely.

On the other hand, if you were to use any, the least restrictive type, there would be little point in having TypeXYZ at all since any allows unrestricted manipulation of the object.

If you are destructuring an object xyz, you should ideally confirm beforehand that the object is indeed of type TypeXYZ and then cast it using as TypeXYZ.

It's important to remember that Typescript has no knowledge of your runtime types, so if an API returns unexpected data, Typescript cannot assist you with that. In such cases where the API response may vary, some form of runtime type-checking is necessary, like the example below:

const res = useApiCall();
if (res.xyz) {
  const { xyz } = res as TypeXYZ;
}

Answer 2

Using a union type like TypeXYZ | unknown (with a single pipe) actually makes the type restrictions stricter than those of the individual types in the union, which may not be what you expect.

For instance, consider the following code snippet:

const a = get_value() as number | string;
const b = parseInt(a, 10);

An error will occur here because parseInt does not accept arguments of type number. This means that any code involving the union type must be valid for all types within it. Since unknown is the most restrictive type and usually requires casting to be used, it essentially overrides XYZ completely.

On the other hand, if you were to use any, the least restrictive type, there would be little point in having TypeXYZ at all since any allows unrestricted manipulation of the object.

If you are destructuring an object xyz, you should ideally confirm beforehand that the object is indeed of type TypeXYZ and then cast it using as TypeXYZ.

It's important to remember that Typescript has no knowledge of your runtime types, so if an API returns unexpected data, Typescript cannot assist you with that. In such cases where the API response may vary, some form of runtime type-checking is necessary, like the example below:

const res = useApiCall();
if (res.xyz) {
  const { xyz } = res as TypeXYZ;
}

Answer 3

Answer №2

If you want to assign default values to an unspecified type, you can achieve it through the following method:

const defaults: { xyz: string, pqr: number} = { xyz: "defaultvalue", pqr: 456 }
const someUnknownType: unknown = { xyz: "xyz123" }

const finalResult: { xyz: string, pqr: number} = { ...defaults, ...someUnknownType }
// finalResult will be { xyz: "xyz123", pqr: 456 }

Answer 4

If you want to assign default values to an unspecified type, you can achieve it through the following method:

const defaults: { xyz: string, pqr: number} = { xyz: "defaultvalue", pqr: 456 }
const someUnknownType: unknown = { xyz: "xyz123" }

const finalResult: { xyz: string, pqr: number} = { ...defaults, ...someUnknownType }
// finalResult will be { xyz: "xyz123", pqr: 456 }

Ways to set a default value for a function that returns an unknown type in TypeScript

Answer №1

Answer №2

Similar questions

Bringing in personalized data types using unique import aliases

Palantir Forge: Enhancing Column Values with Typescript Functions

Looking for a solution to the error message: "X is not able to be assigned to the type 'IntrinsicAttributes & Props'"

strictNullChecks and the dissemination of null values

Typescript is issuing warnings when displaying errors for the RTK query

Avoid making API calls in every ngOnInit() function

What is the method for exporting all functions from a TypeScript file with a default export included?

What are the steps to resolve TypeScript errors in OpenLayers version 6.6.1?

Define the data type for the toObject function's return value

How can I apply concatMap in Angular?

Transferring an event to a component nested two levels deep

Automatic browser refresh with the `bun dev` command

Using Firebase with Angular 4 to fetch data from the database and show it in the browser

typescript encounters issues with union type while trying to access object properties

Create Angular file structures effortlessly using a tool similar to Rails scaffold

Different varieties of TypeScript's keyof when working with objects

React-Bootstrap columns are not displaying in a side by side manner and are instead appearing on separate lines

Maintain Angular Dropdown Menu Open Across Page Refresh

Create an interface that inherits from a class

Is it feasible to customize Angular Material Constants within select.ts?