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

React component showing historical highchart data when navigating through previous and next periods

Utilizing Typescript and sinon to mock the functionalities of jsonwebtoken

Tips for adding a border to a table cell without disrupting the overall structure of the table

Angular's AsyncValidatorFn is triggered by the onblur event and does not work with keypress events

The field '_id' is not present in the type Pick

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

React-table fails to show newly updated data

Ways to change a value into int8, int16, int32, uint8, uint16, or uint32

Is there a way to remove a dynamically rendered component from a list?

What is the best way to create TypeScript declarations for both commonjs modules and global variables?

Exploring table iteration in Angular 7

What could be causing the lack of updates for my service on the app component?

Automatically adjust padding in nested lists with ReactJS and MaterialUI v1

The main module's postinstall process is initiated before the sub-module's postinstall process

The SetInterval function will continue to run within a web component even after the corresponding element has been removed from the

Hold on until the page is reloaded: React

An error occurred while defining props due to a parsing issue with the prop type. The unexpected token was encountered. Perhaps you meant to use `{`}` or `}`?

Angular 6 combined with Firebase is experiencing difficulties with routing after a successful login

Utilizing Session storage throughout an Angular 2 application

Get a list of images by incorporating NextJs and Strapi to create a dynamic slider feature