What is the reason this union-based type does not result in an error?

In my TypeScript project, I encountered a situation that could be simplified as follows:

Let's take a look at the type Type:

type Type = {
  a: number;
} | {
  a: number;
  b: number;
} | {
  a: number;
  b: number;
  c: number;
};

I proceed to define the constant t based on the Type type:

const t: Type = {
  a: 1,
  c: 3
};

Surprisingly, this does not throw any error! Despite the restrictions set by the Type definition, I was able to create an object with properties a and c. How is this possible?

Furthermore, when trying to access the c property:

console.log(t.c);

A transpilation error occurs stating:

Property 'c' does not exist on type 'Type'. Property 'c' does not exist on type '{ a: number; }'.

This has left me puzzled and confused. What could be causing this unexpected behavior?

typescripttypescript-typings

Answer №1

Typescript implements structural typing.

  1. Issue: Excess property check: The interesting aspect of excess property checks is that in unions, it allows any property from any union constituent to be included in the assigned object literal.

const t: Type = { a: 1, c: 3 }; is acceptable because it matches the first segment of your union { a: number; }.

This scenario doesn't occur if the types do not match, for example:

type Type = {
    a: number;
    b: number
} | {
    a: string;
    b: string;
    c: number;
};

let t: Type = {  // Not valid
    a: 1,
    c: 3
};

More information on this topic can be found here: Excess Property check

2. console.log(t.c);, TypeScript will notify you that the key c does not exist in every part of your union, hence the error message you receive.

You can address this by using narrowing, specifically with the in operator:

if('c' in t) {
   console.log(t.c) // Fine
}

Playground

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

How can I specifically activate the keydown event for alphanumeric and special characters in Angular7?

I am looking to create a keydown event that will be triggered by alphanumeric or special characters like #$@. <input type="text" style="width: 70%;" [(ngModel)]= "textMessage" (keydown) ="sendTypingEvent()" > However, I want to prevent the event ...

javascriptangulartypescript

The function in Angular 5/Typescript disappears when attempting to call it from within another function

After importing D3 into my component, I encounter an issue when trying to assign a layout to the D3.layout property. Strangely, although the layout property is present in the console output of my D3 object, it seems to be unknown when I attempt to call i ...

angulartypescriptd3.js

Encountering a JavaScript/TypeScript issue that reads "Unable to access property 'Items' as it is undefined"

I encountered an issue with Javascript where I'm receiving an error message stating "Cannot read property 'Items' of undefined". The this keyword is consistently showing as undefined in the Base class. How can this problem be resolved? Coul ...

javascriptexpresstypescriptecmascript-6

Asynchronous NestJs HTTP service request

Is there a way to implement Async/Await on the HttpService in NestJs? The code snippet below does not seem to be functioning as expected: async create(data) { return await this.httpService.post(url, data); } ...

javascriptnode.jstypescriptnestjs

How can I resolve the problem of transferring retrieved data to a POST form?

When it comes to the form, its purpose is to send data fetched from another API along with an additional note. The fetched data was successfully received, as I confirmed by logging it to the console. It seems that the form is able to send both the fetche ...

typescriptexpressnext.js

Tips for bypassing arrow functions when sending prop values to another component?

**Stateful ApplicatorType Component** class ApplicatorType extends Component { public state = { applicatorTypes: ['Carpenter', 'Painter', 'Plumber'], applicatorTypesSelected: [], } public render() { allotedTypes = ( &l ...

reactjstypescript

Best practice for incorporating the cq-prolyfill third-party JavaScript library into an Angular 5 application

I'm experiencing an issue with the cq-prolyfill library not functioning properly when included through a typescript import statement within an angular module. I have confirmed that it is included in my vendor bundle, but for some reason the initial se ...

angulartypescriptangular5

What is the best way to reduce the size of a Base64/Binary image in Angular6

I utilized the Ngx-Webcam tool to capture images from my camera. My goal is to obtain both high quality and low quality images from the camera. Although this library provides me with Base64 images, it offers an option to reduce the size using imageQuality ...

javascripttypescript

What is the best way to integrate qrcode-generator into an Angular 2 application?

I've been trying to implement the qrcode-generator in my app without success, even though it works in plunker. In my app, I am using angular-cli and angular 2.rc-1. Here are the steps to reproduce: ng new newAppName cd newAppName ng serve It work ...

angularjstypescriptangular-clitypescript-typings

Angular throwing an error message: "ChildrenOutletContexts provider not found!"

I developed a basic testing application and encountered the error message - "No provider for ChildrenOutletContexts!" I have searched through various related posts but to no avail. Here is my project structure: The App Module contains the App Routing Modu ...

angulartypescriptroutesangular-ui-routerangular2-routing

Vuejs fails to properly transmit data

When I change the image in an image field, the new image data appears correctly before sending it to the back-end. However, after sending the data, the values are empty! Code Commented save_changes() { /* eslint-disable */ if (!this.validateForm) ...

javascripttypescriptvue.js

Learn how to use sanitizer.bypassSecurityTrustStyle to apply styling to Pseudo Elements before and after in a template

Currently, I am attempting to add style to a pseudo element :after <a class="overflow">{{item?.eco}}</a> My goal is to modify the background color of a:after, and I believe this adjustment needs to be made in HTML. I've been thinking ...

typescriptangular5angular-dom-sanitizer

Encountering an error with the Next Auth adapter in TypeScript when attempting to modify the default User interface

This is my first time using TypeScript and I am attempting to customize the default User interface for next-auth. I have experimented with the following code: next-auth.d.ts import { User } from "next-auth" import { JWT } from "next-auth/j ...

reactjstypescriptnext-auth

"Dealing with cross-origin resource sharing issue in a Node.js project using TypeScript with Apollo server

I am encountering issues with CORS in my application. Could it be a misconfiguration on my server side? I am attempting to create a user in my PostgreSQL database through the frontend. I have set up a tsx component that serves as a form. However, when I tr ...

node.jstypescriptgraphqlcorsapollo

Is it necessary to verify the apiKey or does the authentication of the user suffice for an HTTPS callable function?

I'm interested in creating a cloud function that can be executed from both the client and the backend. After exploring the documentation, I learned that an HTTPS callable function will automatically include user authentication data, accessible through ...

typescriptfirebasegoogle-cloud-platformgoogle-cloud-firestoregoogle-cloud-functions

Struggling to find a solution for directing to the featured homes page without the content overlapping with my navbar and search component. Any assistance would be greatly

Looking for assistance with routing to the featured homes page without the content overlapping my navbar and search component. I simply want it to direct to a new URL without importing the components unless specifically needed. Check out this link I suspe ...

htmlcssangulartypescript

Leveraging a returned value from a function in Typescript within a React component

I am currently facing a challenge where I need to extract values from a Typescript function and use them to dynamically render a React page. Specifically, the two values I am working with are the outputs of getIcon() and getSpaces(). This is how I attempt ...

reactjstypescript

Is anyone able to assist with resolving the problem of `tsc` constantly monitoring `node_modules`?

Using the Expo platform has been a great experience for me. Here is a snippet from my tsconfig.json: { "compilerOptions": { "paths": { "@/*": [ "./src/*" ], ...

typescriptreact-nativeexpotscreact-native-gifted-charts

Angular project service file experiencing issues with TypeScript string interpolation functionality

Here is the code snippet for a service in an Angular project: @Injectable() export class FetchDataService { fetch(link){ console.log('This is a ${link}'); } } In my component, I am invoking this method with a string parameter. Upon che ...

angulartypescriptstring-interpolation

Guide to locating the recursive function in Node.js runtime

As a beginner in the world of node and angular development, I have encountered a major issue - "FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory". Is there anyone who can help me identify the function ...

javascriptnode.jsangulartypescriptheap-memory