Error in Typescript: The property 'a' is not defined in the type 'A'

Here is an example of the different types I am working with:

type Place = {
   address: string
}

type Location = {
   latLng: string
}

type User = {
  name: string
} & (Place | Location)

When attempting to parse the data using this structure, I encounter a TypeScript error:

const { name, address, latLng } = user;

The error message states 'Property 'address' does not exist on type 'User'.

I understand that either 'address' or 'latLng' will be present but not both, and my logic will validate this when parsing the data. How can I inform TypeScript about this to remove the error?

Answer №1

Utilizing the never keyword in this scenario is a smart way to establish two distinct "configurations" for the User entity - one with a Place attribute and another with a Loc attribute. The Place type mandates an unspecified latLng property, whereas the Loc type requires an undefined address property. A User can be described as ({name: string} & Place) | ({name: string} & Loc), meaning that while all three fields exist in both Place and Loc types within the union, either address or latLng will remain undefined based on the presence of the other.

type Place = {
  address: string;
  latLng?: never;
};

type Loc = {
  latLng: string;
  address?: never;
};

type User = {
  name: string;
} & (Place | Loc);

function test1() {
  // Valid, latLng is undefined
  const user: User = { name: "User", address: "1234 Somewhere St" };
  const { address, latLng, name } = user;
}

function test2() {
  // Valid, address is undefined
  const user: User = { name: "User", latLng: "123,456" };
  const { address, latLng, name } = user;
}

function test3() {
  // Invalid, both address and latLng are present
  const user: User = {
    name: "User",
    latLng: "123,456",
    address: "1234 Somewhere St",
  };
  const { address, latLng, name } = user;
}

(Playground link)

This approach defines a type where either address or latLng can be specified but not both. By deconstructing the values from the user object, you can access both properties, with one always being undefined.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error encountered when extending Typography variant in TypeScript with Material UI v5: "No overload matches this call"

Currently, I am in the process of setting up a base for an application using Material UI v5 and TypeScript. My goal is to enhance the Material UI theme by adding some custom properties alongside the default ones already available. The configuration in my ...

Having trouble with Next.js 13 GitHub OAuth integration - it keeps redirecting me to Discord instead of signing me in

There's a perplexing issue troubling my application... The implementation of OAuth 2 with GitHub, Discord, and Google is causing some trouble. While Google and Discord authentication works smoothly, attempting to sign in via GitHub redirects me to Di ...

Ensure all promises are resolved inside of for loops before moving on to the next

Within my angular 11 component, I have a process that iterates through elements on a page and converts them from HTML to canvas to images, which are then appended to a form. The problem I am encountering is that the promise always resolves after the ' ...

What is the best way to terminate a Node.js app using a scheduler?

I've been attempting to halt my cron task and shut down the entire nodeapp after 5 executions, but despite trying various methods, all attempts have failed. The message "time to quit" continues to appear in the log every minute. What would be the mos ...

The spread operator seems to be malfunctioning whenever I incorporate tailwindcss into my code

Hi there! I hope you're doing well! I've come across a strange issue in Tailwindcss. When I close the scope of a component and try to use props like ...rest, the className doesn't function as expected. Here's an example: import { Butto ...

When working with Typescript and React, you may encounter an issue where an element implicitly has an 'any' type because the type 'State' has no index signature. This can lead to

In my current mini project, I am using Typescript and React. As someone new to Typescript, I am currently in the process of learning it. Within the project, I have a state defined as follows: type State = { field1: string, field2: string, field3: n ...

Unable to access property 'create' which is undefined

On my Ionic3 page, I am trying to trigger a modal open from within a click event function. export class HomePage { .... .... .... loadPos() { var randomLocations = Microsoft.Maps.TestDataGenerator.getLocations(5, this.map.getBounds()); ...

The TypeScript error ts2322 occurs when using a generic constraint that involves keyof T and a

Trying to create a generic class that holds a pair of special pointers to keys of a generic type. Check out an example in this playground demo. const _idKey = Symbol('_idKey') const _sortKey = Symbol('_sortKey') export interface BaseSt ...

There seems to be an issue with the authorization function in nextauthjs utilizing TypeScript

In my NextJS application utilizing nextAuth with TypeScript, I am encountering difficulties implementing the credentials provider. Below is a snippet from my api\auth\[...nextauth]\route.ts file: CredentialsProvider({ name: 'cre ...

Is the array index a string or a number?

Why is it that when looping over the indexes of an array they appear as strings, even though using a string to index an array is not allowed? Isn't this inconsistency puzzling? for (const i in ["a", "b", "c"]) { console.log(typeof i + " " + i + " " ...

I'm unable to import correctly using the --compiler option

Having an issue here. I'm trying to bring in the typescript compiler. I used this command: bit import bit.envs/compilers/typescript --compiler Unfortunately, it didn't work. This is the error message: bit import [ids...] import components in ...

Guide on creating a style instance in a component class using Material-UI and Typescript

After transitioning my function component to a class component, I encountered an error with makeStyle() from Material-UI as it violates the Rule of Hooks for React. The documentation for Material-UI seems to focus mainly on examples and information related ...

Guidelines for Managing Test Cases for a Promise-Returning Function with Resolve and Reject in Angular 6

I need to write a test case for a function that returns a Promise with resolve and reject. Here's the function definition: isAuthSuccess(): Promise<any> { const promise = new Promise((resolve, reject) => { if (this.userInfo) { ...

Creating a Build-Free Workflow in a TypeScript Monorepo

Imagine having this monorepo structure: /apps /apps/app1 /apps/app1/src (includes index.ts and various other files and subdirectories) /apps/app1/tsconfig.json /apps/app1/package.json /apps/app2 /apps/app2/src (contains index.ts and many other files an ...

Switch up the styling of a component by updating its properties with a switch statement

Although there is a similar question, my query has a unique requirement. I have defined the common styles for my button and implemented a function using a switch statement with different properties for various buttons across different pages. However, for ...

Tips for refreshing the modified toggle in angular2

I currently have a newsletter subscription that is initially set based on the newsletter I receive when the user logs in. However, when I toggle the newsletter option, I receive a "successfully updated" message but the newsletter remains set to false even ...

Developing a Data Generic State Management System in Angular using TypeScript

Implementing a Generic StateManagierService that can handle any type, allowing users to receive new state and data upon state change. However, something seems to be missing. export class StateManagierService<T> { private _state$: BehaviorSubject< ...

React / NextJS: Repeating Audiowave Component

I am currently developing a chat application in NextJS that includes text-to-speech functionality. To visualize the audio playback waveform, I have integrated a third-party library called wavesurfer.js Though the audio implementation is functioning proper ...

Error TS2339: Property does not exist on type 'object' - Typescript arrow function issue

In my experience with Angular, I have noticed that I encounter typescript compile errors quite often when using fat arrow functions within an rxjs stream. Despite being able to run the app and having it transpile successfully, I am curious about how to re ...

Ways to incorporate the use of the useAsync hook within a submit function

After importing useAsync(hook from 'react-async') and attempting to utilize it post form submission for a POST request, a "can't use hooks inside functions" error is encountered due to the rules of hooks. How can this issue be resolved in o ...