Combining Interfaces in Typescript: Utilizing Union Types with a Base and Extended Interface

Question

Combining Interfaces in Typescript: Utilizing Union Types with a Base and Extended Interface

I'm facing an issue with the following code snippet

interface BaseA {
  a: number;
}

interface SpecialA extends BaseA {
  b: number;
}

type A = BaseA | SpecialA

const a = {
    a: 5, b: 5
} as A

console.log(a.b)

Even though I thought the code was correct, I encountered the error message

Property 'b' does not exist on type 'A'.
  Property 'b' does not exist on type 'BaseA'

It appears that the actual definition of type A is not what I intended it to be. I was expecting it to match the definition below:

interface A {
  a: number;
  b?: number;
}

This leaves me with the following questions:

What caused the discrepancy between the defined type A and the expected type A?
Is there a way to define the expected type A without manually defining it?

Note: I am required to use the type SpecialA unchanged in certain parts of my code, so directly defining the expected A type is not feasible.

typescript

Answer 1

Answer №1

Given that A is a union, it is important to narrow down/discriminate your type in order to access members that are not shared.

interface BaseA {
  a: number;
}

interface SpecialA extends BaseA {
  b: number;
}

type A = BaseA | SpecialA

const a = {
  a: 5, b: 5
} as A

if ("b" in a) { // performing narrowing at this point
  console.log(a.b)
}

Playground

Answer 2

Given that A is a union, it is important to narrow down/discriminate your type in order to access members that are not shared.

interface BaseA {
  a: number;
}

interface SpecialA extends BaseA {
  b: number;
}

type A = BaseA | SpecialA

const a = {
  a: 5, b: 5
} as A

if ("b" in a) { // performing narrowing at this point
  console.log(a.b)
}

Playground

Answer 3

Answer №2

When you use as A, you are essentially stating that "The variable a could potentially hold a BaseA or a SpecialA." However, if you later attempt to access a.b without any type check, it becomes a type error because TypeScript cannot guarantee that a is specifically a SpecialA which contains the b property.

To address this issue, you should perform a check first:

if ("b" in a) {
    console.log(a.b);
}

Within the if block, TypeScript understands that a points to an instance of SpecialA.

It's worth noting that even though a is declared as a constant, the object it refers to can still be altered to remove the b property:

delete (a as any).b; // not recommended

If you do not intend to delete the b property, it's advisable to directly specify the type as SpecialA:

const a: SpecialA = {
    a: 5,
    b: 5,
};

Alternatively, you can use as const to indicate to TypeScript that the object will remain unaltered:

const a = {
    a: 5,
    b: 5,
} as const;

If you choose to go with as const, there is no need for a separate type annotation. TypeScript conducts structural type checking rather than nominal type checking, but adding a type like A can enhance clarity for other developers:

const a: A = {
//     ^^^
    a: 5,
    b: 5,
} as const;

Answer 4

When you use as A, you are essentially stating that "The variable a could potentially hold a BaseA or a SpecialA." However, if you later attempt to access a.b without any type check, it becomes a type error because TypeScript cannot guarantee that a is specifically a SpecialA which contains the b property.

To address this issue, you should perform a check first:

if ("b" in a) {
    console.log(a.b);
}

Within the if block, TypeScript understands that a points to an instance of SpecialA.

It's worth noting that even though a is declared as a constant, the object it refers to can still be altered to remove the b property:

delete (a as any).b; // not recommended

If you do not intend to delete the b property, it's advisable to directly specify the type as SpecialA:

const a: SpecialA = {
    a: 5,
    b: 5,
};

Alternatively, you can use as const to indicate to TypeScript that the object will remain unaltered:

const a = {
    a: 5,
    b: 5,
} as const;

If you choose to go with as const, there is no need for a separate type annotation. TypeScript conducts structural type checking rather than nominal type checking, but adding a type like A can enhance clarity for other developers:

const a: A = {
//     ^^^
    a: 5,
    b: 5,
} as const;

Combining Interfaces in Typescript: Utilizing Union Types with a Base and Extended Interface

Answer №1

Answer №2

Similar questions

Is it possible for a typed function to access object properties recursively?

In TypeScript, encountering an unanticipated intersection

Extract a string value from a TypeScript enum

Using TypeScript to Import Modules without Default Exports (CommonJS)

Error message: WebStorm shows that the argument type {providedIn: "root"} cannot be assigned to the parameter type {providedIn: Type<any> | "root" | null} and InjectableProvider

Utilizing useLocation for Defining Text Styles

Error encountered when attempting to assign a value of the original data type within the Array.reduce function

The program encountered an unexpected symbol. It was expecting a constructor, method, accessor, or property. Additionally, there is a possibility that the object is 'undefined'

Exploring Angular 2: Incorporating multiple HTML pages into a single component

Can you identify the type of component being passed in a Higher Order Component?

Canceling a promise in a Vuex action

Angular 2 Unit test issue: Unable to resolve parameters for 'RequestOptions' class

A guide on how to identify the return type of a callback function in TypeScript

Is it time to refresh the sibling element when it's selected, or is there

What is the reason behind Flow's reluctance to infer the function type from its return value?

Filtering arrays of objects dynamically using Typescript

Storing a Vue/JS element reference in a constant using Typescript

Incorporating interactive buttons within Leaflet popups

How to conditionally apply a directive to the same tag in Angular 4

The type definition file for '@types' is not present in Ionic's code base