I am having trouble with a property that I believe should be recognized but is not

Question

I am having trouble with a property that I believe should be recognized but is not

Here is the vocabulary I am working with:

type MyHeaders = {
  Authorization: string;
  Accept: "application/json";
};
type MyGetOptions = {
  url: string;
  json: true;
};
type MyOptionsWithHeaders = {
  headers: MyHeaders;
};
type MyPostOptions<T> = MyGetOptions | {
  body: T;
};
type MyPostOptionsWithHeaders<T> = MyPostOptions<T> | MyOptionsWithHeaders;
type MyBodyType = {};
type APICallOptions = MyPostOptionsWithHeaders<MyBodyType>;

An error is occurring in the following code under the "url" in "temp.url": "Property 'url' does not exist on type 'BatchSubmissionOptions'. Property 'url' does not exist on type 'OptionsWithHeaders'.ts(2339)"

const temp: APICallOptions = {
  url: "url",
  headers: {
    Authorization: "Bearer token",
    Accept: "application/json",
    },
  body: {
    some: "stuff",
    more_stuff: []
  }
}
temp.url = "Hello"

I am attempting to create a vocabulary that allows me to specify arguments like "BatchSubmissionOptions" for a specific query to an internal server API. I want to define options as Post, Post with authentication headers, Get, or Get with authentication headers. The issue arises when trying to set properties after initialization.

Could there be a mistake in my definitions that I am overlooking?

EDIT: Following the recommendation of CodeQuiver, I have adjusted the code with more standardized separators based on the referenced article. Although sound advice, it did not fix the problem at hand.

Side note: While simplifying this problem for the question, I noticed that it doesn't flag an error when the value of "body" doesn't match MyBodyType, allowing different values. It only validates correctly when defining properties in MyBodyType; perhaps this is due to defining an object as {}?

typescript

Answer 1

Answer №1

If you have a variable declared with a union type, for example:

let temp: A | B;

You can only access properties that are common to both types when using that variable. This limitation is in place to prevent accessing non-existent properties (which could potentially lead to program crashes) since the compiler cannot determine which specific type the variable will resolve to.

For example:

We have defined two types A and B, each with an overlapping property id:

type A = {
    id: number;
    title: string;
    text: string;
}

type B = {
    id: number;
    flag1: boolean;
    flag2: boolean;
}

The following code snippet will work without any issues:

const id = temp.id;

However, attempting to access a property unique to one of the types will result in an error message:

const text = temp.text;   // <--- Error: "text" does not exist in B

On the other hand, if you assign an object literal, you must include at least one unique property so that the compiler can infer the correct type and warn you about missing properties:

This would throw an error (

Type '{ id: number }' is missing the following properties from type 'B': flag1, flag2

):

let temp: A | B = {
    id: 1
};

To resolve this issue, you need to include additional unique properties so the compiler can determine the appropriate type. For instance, the following declaration specifies type A:

let temp: A | B = {
    id: 1,
    title: "Title"
};

If you don't include the required text property as part of type A, the compiler will raise an error. You can also add properties from type B</code, given that <code>temp is assigned a union type:

let temp: A | B = {
    id: 1,
    title: "Title",
    text: "Text",
    flag1: true
};

Answer 2

If you have a variable declared with a union type, for example:

let temp: A | B;

You can only access properties that are common to both types when using that variable. This limitation is in place to prevent accessing non-existent properties (which could potentially lead to program crashes) since the compiler cannot determine which specific type the variable will resolve to.

For example:

We have defined two types A and B, each with an overlapping property id:

type A = {
    id: number;
    title: string;
    text: string;
}

type B = {
    id: number;
    flag1: boolean;
    flag2: boolean;
}

The following code snippet will work without any issues:

const id = temp.id;

However, attempting to access a property unique to one of the types will result in an error message:

const text = temp.text;   // <--- Error: "text" does not exist in B

On the other hand, if you assign an object literal, you must include at least one unique property so that the compiler can infer the correct type and warn you about missing properties:

This would throw an error (

Type '{ id: number }' is missing the following properties from type 'B': flag1, flag2

):

let temp: A | B = {
    id: 1
};

To resolve this issue, you need to include additional unique properties so the compiler can determine the appropriate type. For instance, the following declaration specifies type A:

let temp: A | B = {
    id: 1,
    title: "Title"
};

If you don't include the required text property as part of type A, the compiler will raise an error. You can also add properties from type B</code, given that <code>temp is assigned a union type:

let temp: A | B = {
    id: 1,
    title: "Title",
    text: "Text",
    flag1: true
};

Answer 3

Answer №2

It seems like the main issue here is a simple typo. The members of your type literal are not separated properly:

type MyGetOptions = {
  url: string
  json: true
}

In Typescript, you need to separate members using either semicolons or commas, like in this example:

type MyHeaders = {
  Authorization: string,
  Accept: "application/json",
}

This could be why the 'url' property is not being recognized initially.

While there may be more complex issues at play, it's best to address the simpler problem first as it might solve everything. Check out this article for more insights: https://medium.com/swlh/typescript-best-practices-delimiters-and-ordering-7feb42e0ca1d (I couldn't find direct reference to this syntax in the Typescript documentation, so I'm referencing Medium instead, which also uses semicolon separators in its examples.)

Answer 4

It seems like the main issue here is a simple typo. The members of your type literal are not separated properly:

type MyGetOptions = {
  url: string
  json: true
}

In Typescript, you need to separate members using either semicolons or commas, like in this example:

type MyHeaders = {
  Authorization: string,
  Accept: "application/json",
}

This could be why the 'url' property is not being recognized initially.

While there may be more complex issues at play, it's best to address the simpler problem first as it might solve everything. Check out this article for more insights: https://medium.com/swlh/typescript-best-practices-delimiters-and-ordering-7feb42e0ca1d (I couldn't find direct reference to this syntax in the Typescript documentation, so I'm referencing Medium instead, which also uses semicolon separators in its examples.)

I am having trouble with a property that I believe should be recognized but is not

Answer №1

Answer №2

Similar questions

What is the method for incorporating opacity into the background color CSS attribute using a Fluent UI color?

The message states that the variable "Chart" has not been defined

Invalid sequencing of Nest.js async onModuleInit causing issues

The value of this.$refs.<refField> in Vue.js with TypeScript is not defined

When deploying my Angular project, I am unable to access my files

Is there a way to run the mediapipe face detection codepen.io demo on my laptop?

Encountering a 'No overload matches this call.' error when using ApexCharts with Typescript and ReactJS

Why is Axios not being successfully registered as a global variable in this particular Vue application?

The fusion of Typescript with Node.js

Challenges with importing and using jspdf and autotable-jspdf in Angular 8

Tips for asynchronously updating a model in TypeScript

The issue encountered is: "Unable to assign property 'id' to a numeric value of '1' in Angular."

Adjust the colors dynamically based on specific data within a loop

Enhancing Application Performance Through Next.js Development

TypeScript interface with an optional parameter that is treated as a required parameter

Here's a method to extract dates from today to the next 15 days and exclude weekends -Saturday and Sunday

What is the proper way to declare an array of arrays with interdependent types?

Leveraging Global Variables and Functions with Webpack and TypeScript

Create a series of actions that do not depend on using only one occurrence of the WriteBatch class

Subtracted TypeScript concept