Automatically identify the appropriate data type using a type hint mechanism

Can data be interpreted differently based on a 'type-field'?

I am currently loading data from the same file with known type definitions. The current approach displays all fields, but I would like to automatically determine which type is applicable without casting the type during runtime. It's not the ideal solution.

I'm unsure if I'm pushing TypeScript too far here and if this logic should instead reside in the loading/parsing process.

Current method

enum MyTypes {
  TypeA = "A",
  TypeB = "B",
}
type IData = {
  type: MyTypes;
  data: IDataAllTypes <---- force the type to be `IDataTypeA` if the type field is `TypeA`
}
type IDataAllTypes = IDataTypeA | IDataTypeB

type IDataTypeA = {
  id: string
  age: number
  foo: string[]
}

type IDataTypeB = {
  id: string
  name: string
  bar: string[]
}

Answer №1

A discriminated union is a type of union where all members share a common field that can be leveraged to define the rest of the type.

To define IData, you can use the following syntax:

type IDataA = {
    type: MyTypes.TypeA,
    data: IDataTypeA
}

type IDataB = {
    type: MyTypes.TypeB,
    data: IDataTypeB
}
type IData = IDataA | IDataB

With this setup, the behavior is as expected:

const testA: IData = { type: MyTypes.TypeA, data: { id: 'qwe', age: 123, foo: ['a'] }}
const testB: IData = { type: MyTypes.TypeB, data: { id: 'qwe', name: 'asd', bar: ['b'] }}

// Type error. Cannot assign type A value with type B properties
const testFail: IData = { type: MyTypes.TypeA, data: { id: 'qwe', name: 'asd', bar: ['b'] }}

Playground

Answer №2

This is the method to achieve it

enum CustomTypes {
  OptionA = "A",
  OptionB = "B",
}

type DataTypeA = {
  id: string
  age: number
  tags: string[]
}

type DataTypeB = {
  id: string
  name: string
  labels: string[]
}

InfoDataA {
  choice: CustomTypes.OptionA,
  information: DataTypeA,
}

InfoDataB {
  choice: CustomTypes.OptionB,
  information: DataTypeB,
}

AllDataTypes = InfoDataA | InfoDataB;

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

Utilizing Material-UI with MobileDialog HOC in TypeScript: A Beginner's Guide

I'm running into an issue while trying to implement withMobileDialog in my TypeScript code. Below is the snippet of my code, inspired by a code example from the official documentation. import withMobileDialog, { InjectedProps } from "@material-ui/co ...

Utilizing Node and Electron to dynamically adjust CSS style properties

Having a dilemma here: I need to access the CSS properties from styles.css within Electron. Trying to use document.getElementsByClassName() won't work because Node doesn't have document. The goal is to change the color of a specific div when the ...

Is there a way to retrieve the object property within the subscribe function in order to display the HTML content?

Is there a way for me to update the HTML using the properties obtained within .subscribe? I am aware that .subscribe is asynchronous and therefore returns an undefined value initially, but how can I ensure it waits until the value is resolved? Currently, I ...

Tips for stopping links in iOS web applications from launching in a new Safari tab

I am in the process of developing an HTML application specifically for iPads. To enhance user experience, I have added the web app to the homescreen using the "favorite" option. However, I encountered an issue where every internal URL opens in a new Safari ...

A guide on retrieving the selected option from a dropdown menu with React Material UI

Utilizing Material UI React, I am constructing a dropdown menu containing various options. My concern is: if I choose two options from different dropdowns within the menu, how can I intercept or store which option was selected? Below is a snippet of my co ...

Adjust the background color of a specific list item when hovering over another list item

My dilemma lies in my inadequate knowledge to solve this issue: I have a dropdown menu embedded within a website. (View screenshot here: [SCREENSHOT]) The desired outcome is for the background color of an icon on the main list to change when I navigate to ...

Exploring Next.js dynamic imports using object destructuring

import { UDFCompatibleDatafeed } from "./datafeeds/udf/src/udf-compatible-datafeed.js"; I'm facing a challenge in converting the above import to a dynamic import in Next.js. My attempt was as follows: const UDFCompatibleDatafeed = dynamic(( ...

What is the best way to extract the essential data from the returned value without any unnecessary additions?

Looking for a way to extract specific data from an api response in the format of x[[seconds:cost[[x? I am using php and javascript. How can I separate out the seconds and cost values only? For example, if the response looks like this: x[[16413:2.60[[x I ...

Managing Import Structure in Turborepo/Typescript Package

I am currently working on creating a range of TypeScript packages as part of a Turborepo project. Here is an example of how the import structure for these packages looks like: import { Test } from "package-name" import { Test } from "package ...

What is the method for selecting the desired month on a primeng calendar with multiple selection enabled?

I am looking for a solution to make my inline primeNg Calendar display the month of a specific date in the model, and when I remove dates from the model, I want it to show the current month. I have tried using defaultDate={{value}} and minDate={{value}}, a ...

Concerns arise with jQuery grid compatibility in Firefox browsers

I have found an interesting tutorial on draggable image boxes grid at this link. Although everything is functioning properly, I am encountering an issue with the drag function specifically on the home page when using Firefox. As a beginner in jQuery, I am ...

My SF2 app is experiencing issues with AngularJS integration

I am currently developing a straightforward API using Symfony2 and now I am experimenting with integrating AngularJS into my bundle to visualize the results of my API calls. How can I effectively implement AngularJS? I initiated a bundle via app/console ...

What is the best way to overload a function based on the shape of the argument object in

If I am looking to verify the length of a string in two different ways (either fixed or within a specific range), I can do so using the following examples: /* Fixed check */ check('abc', {length: 1}); // false check('abc', {length: 3}) ...

The reason behind the successful execution of the final .then in promise chaining

I am new to JavaScript and have encountered an interesting problem with the following code. Even though I haven't returned anything from the .then method, the last .then (blue color) works instead of the first one (red color). Can someone explain why ...

How to create a basic calculator in AngularJS with two textboxes specifically designed for calculating squares?

My code snippet is as follows: <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> </head> <body> <div ng-app="app"> <div ng-controller="Calcu ...

What is the correct way to integrate $.deferred with non-observable functions?

Imagine you have two functions filled with random code and the time they take to complete is unknown, depending on the user's system speed. In this scenario, using setTimeout to fire function2 only after function1 finishes is not practical. How can j ...

Issue encountered while transforming the data buffer into the video within a Node.js environment

I am attempting to create a buffer from the mp4 video, and then convert that buffer back into the video. The buffer is being generated as follows: const buffer = Buffer.from("Cat.mp4"); console.log(buffer); The output I receive is <Buffer 43 61 74 2e ...

The declaration file for the 'react' module could not be located

I was exploring Microsoft's guide on TypeScript combined with React and Redux. After executing the command: npm install -S redux react-redux @types/react-redux I encountered an error when running npm run start: Type error: Could not find a decla ...

Modifying the DOM within a getJSON callback

My current challenge involves fetching data from the YouTube API and displaying it on my website. However, I am facing an issue where the DOM changes made inside the getJSON's callback function are not reflecting on the webpage. Even though I can see ...

Develop a table with dynamic features in Angular according to the number of rows selected from a dropdown menu

I am currently exploring AngularJS 1.6 and tackling the challenge of dynamically populating a table with rows based on the number selected in a dropdown list, ranging from 1 to 12. Here's the code I have up until now: <body ng-controller="myContr ...