Prevent TypeScript from generalizing string literals as types

Question

Prevent TypeScript from generalizing string literals as types

I have a constant Object called STUDY_TAGS with specific properties

const STUDY_TAGS ={
  InstanceAvailability: { tag: "00080056", type: "optional", vr: "string" },
  ModalitiesinStudy: { tag: "00080061", type: "required", vr: "string" },
  ReferringPhysiciansName: { tag: "00080090", type: "required", vr: "string" },
  NumberofStudyRelatedSeries: {
    tag: "00201206",
    type: "required",
    vr: "number",
  }
};

I want to determine the return type of each object based on its 'vr' value. However, when I check the typeof STUDY_TAGS, all key-value pairs appear the same:

 InstanceAvailability: {
        tag: string;
        type: string;
        vr: string;
    };

Is there a way to make TypeScript keep the string literals instead of generalizing them to just 'string'?

I initially tried defining the Object with the type Record<string, {tag: string, type: string, vr: "string" | "number"}>, but it didn't solve the issue as typeof STUDY_TAGS showed:

Record<string, {
    tag: string;
    type: string;
    vr: "string" | "number";
}

I am stuck and unsure how to tackle this problem. There must be a way to infer the return type based on an object having one of two string values, right? Ultimately, my goal is to create a function that takes in the object and determines the returned type based on the 'vr' value.

function doSomething<Type extends "number" | "string">({tag, type, vr} : {tag : string, type : string, vr: Type}) : Type extends "number" ? number : string
{
 if(vr === "string") return "test";
 return 0;
}

javascript typescript types

Answer 1

Answer №1

Utilizing function overloading and narrowing could be beneficial in your situation. Below is a simplified illustration:

function doSomething(vr: 'string'): string
function doSomething(vr: 'number'): number
function doSomething(vr: string): string | number {
  if(vr === 'string) return 'Test!';
  return 0;
}

By defining the behavior of doSomething for different input types, TypeScript's typing system can automatically determine the return type based on the provided argument.

const foo = doSomething('string'); // The return value will be inferred as a string
const bar = doSomething(2); // The return value will be inferred as a number

For a more comprehensive example tailored to your specific scenario, check out this link to TypeScript's playground.

Answer 2

Utilizing function overloading and narrowing could be beneficial in your situation. Below is a simplified illustration:

function doSomething(vr: 'string'): string
function doSomething(vr: 'number'): number
function doSomething(vr: string): string | number {
  if(vr === 'string) return 'Test!';
  return 0;
}

By defining the behavior of doSomething for different input types, TypeScript's typing system can automatically determine the return type based on the provided argument.

const foo = doSomething('string'); // The return value will be inferred as a string
const bar = doSomething(2); // The return value will be inferred as a number

For a more comprehensive example tailored to your specific scenario, check out this link to TypeScript's playground.

Answer 3

Answer №2

It is important to note that you have the ability to specify types using 'as const'

const STUDY_TAGS ={
  InstanceAvailability: { tag: "00080056", type: "optional" as const, vr: "string" },
  ModalitiesinStudy: { tag: "00080061", type: "required" as const, vr: "string" },
  ReferringPhysiciansName: { tag: "00080090", type: "required" as const, vr: "string" },
  NumberofStudyRelatedSeries: {
    tag: "00201206",
    type: "required" as const,
    vr: "number",
  }
};

In the code snippet above, I have included the 'as const' for the type property for demonstration purposes. This allows you to explicitly define the values of each property rather than relying on their primitive form.

Answer 4

It is important to note that you have the ability to specify types using 'as const'

const STUDY_TAGS ={
  InstanceAvailability: { tag: "00080056", type: "optional" as const, vr: "string" },
  ModalitiesinStudy: { tag: "00080061", type: "required" as const, vr: "string" },
  ReferringPhysiciansName: { tag: "00080090", type: "required" as const, vr: "string" },
  NumberofStudyRelatedSeries: {
    tag: "00201206",
    type: "required" as const,
    vr: "number",
  }
};

In the code snippet above, I have included the 'as const' for the type property for demonstration purposes. This allows you to explicitly define the values of each property rather than relying on their primitive form.

Answer 5

Answer №3

One issue I encountered was the inability to extract type information from the object, as it resulted in my string constants being generalized into the "string" type despite using Object.freeze(). To address this, I revised the object declaration as follows:

const data = {x: {value: "hello"}} as const;

Answer 6

One issue I encountered was the inability to extract type information from the object, as it resulted in my string constants being generalized into the "string" type despite using Object.freeze(). To address this, I revised the object declaration as follows:

const data = {x: {value: "hello"}} as const;

Prevent TypeScript from generalizing string literals as types

Answer №1

Answer №2

Answer №3

Similar questions

Creating custom components that encapsulate the functionality of Angular Material tabs component

The error message "Property does not exist on type Object from subscribe" indicates that

struggling with managing an array of Vue3 refs

Custom Mui table sizes - personalized theme

Preserve router animations using :key attribute, while ensuring that parent views do not reload

Setting line chart data for Chart.js

Which is better for toggling between images/icons: a switch statement or a ternary operator?

Session-based Authorization

Replacing multiple attributes within a complex HTML opening tag using Node.js regular expressions

Nested v-for problem confusion

"Revamp the appearance of the div element upon clicking elsewhere on the

Tips for configuring <link> in NextJs to only activate on a single click

Limiting the number of checkboxes selected in a Checkbox Group based on

Replacing a div with another div can be achieved in a single swap

Postpone the processing of a message in the Service Bus Queue until a specific time using NodeJS

What's the best way to implement two AJAX field validations to prevent button redirection on a website?

What are some effective replacements for SoundManager2 worth considering?

Open the HTML document and access the file contents

Determine if a radio button is selected using Jquery

Is there a way to automatically insert page numbers into every internal link on an HTML page?