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

Determine the accurate data type while iterating through a for loop

Typescript not flagging an error for an object being declared without a type

What is the official name of the key type for the Built-in Object?

Does Typescript fail to recognize the "delete" operator?

What is an improved method for defining a TypeScript type to store API method invocations?

Ensuring type integrity for intersections containing varying numbers of elements

Modifying the value of an object key with Javascript

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 `}`?

EventManager gathering of various subscriptions

Removing an attachment from the attachment object array nestled within a comment object array nested inside another object array

A method for handling specific subsets of an enum in a secure and controlled manner

What is the process for creating a new Object based on an interface in Typescript?

What steps can be taken to resolve the error "Incompatible types: TodoItem undefined cannot be assigned to type TodoItem"?

What is the best way to replicate certain key-value pairs in an array of objects?

Sequelize v5 & Typescript Model Loader

Is there a TypeScript alternative to triggering a click event on a specific class using $(".class").click()?

Error: Unable to retrieve the value of 'secret' as it is undefined when attempting to assign a response cookie in Express framework

Defining the type of the createAction() function in TypeScript within the context of Redux Toolkit

Customizing dropzone color while dragging an image in Angular

What is the best way to retrieve an object within a class?