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

Develop a novel object framework by merging correlated data with identical keys

What is the best way to load a component every time the function is called?

What could be causing the issue of CSS Styles not being applied to an Angular 2 component with Vaadin elements?

There is no way to convert a strongly typed object into an observable object using MobX

Component coding in Angular 2 allows for seamless integration and customization of Material

The compatibility issue arises when using Material UI Portal with TypeScript, specifically with the 'children' property types

Developing a user interface that filters out a specific key while allowing all other variable keys to be of the identical type

Error: The npm-link library encountered an invalid hook call

Error encountered in Angular 7.2.0: Attempting to assign a value of type 'string' to a variable of type 'RunGuardsAndResolvers' is not allowed

Reactive forms in Angular now support changing focus when the Enter key is pressed

The function type '(state: State, action: AuthActionsUnion) => State' cannot be assigned to the argument

What is the best method to create a TypeScript dictionary from an object using a keyboard?

The upcoming construction of 'pages/404' page will not permit the use of getInitialProps or getServerSideProps, however, these methods are not already implemented in my code

Is there a method to automatically eliminate all unnecessary properties in an Angular project?

What causes images to unexpectedly expand to fill the entire screen upon switching routes in Next.js?

Issues arise when Typescript fails to convert an image URL into a base64 encoded string

Is there a way for me to loop through an object without prior knowledge of its keys?

In an Electron-React-Typescript-Webpack application, it is important to note that the target is not a DOM

There is no universal best common type that can cover all return expressions

Tips for passing TouchableOpacity props to parent component in React Native