Mastering the usage of TypeScript union types with distinct internals

Question

Mastering the usage of TypeScript union types with distinct internals

It's frustrating that in the example below, I encounter a typescript error despite the fact that the error is not logically possible to occur in the code. The function receives either Category1 or Category2 and when it returns the ComputedCategory, both the computed and name properties will have the same value. However, TypeScript fails to recognize this and suggests that the values could be from either union type. This leads to an error when trying to set the name property, claiming that

{ computed: 'category1', name: 'category2' }

cannot be assigned to ComputedCategories. Why does TypeScript behave like this and why can't it understand that these values are impossible? Secondly, how should I define the type without resorting to numerous type guards with specific returns, which defeats the purpose of my approach? Is this a bug or am I misunderstanding something?

type Category1 = {
    testName: 'category1';
    name: 'category1'
};
type Category2 = {
    testName: 'category2';
    name: 'category2'
};
type Categories = Category1 | Category2;

type ComputedCategory1 = {
    computed: 'category1'
    name: 'category1'
};
type ComputedCategory2 = {
    computed: 'category2'
    name: 'category2'
};
type ComputedCategories = ComputedCategory1 | ComputedCategory2;


const computeCategory = (category: Categories): ComputedCategories => ({
    computed: category.testName,
    name: category.name
})

// ERROR
Type '{ computed: "category1" | "category2"; name: "category1" | "category2"; }' is not assignable to type 'ComputedCategories'.
  Type '{ computed: "category1" | "category2"; name: "category1" | "category2"; }' is not assignable to type 'ComputedCategory2'.
    Types of property 'computed' are incompatible.
      Type '"category1" | "category2"' is not assignable to type '"category2"'.
        Type '"category1"' is not assignable to type '"category2"'.ts(2322)

typescript types typescript-generics

Answer 1

Answer №1

In my opinion, the ideal solution would be to implement function overloading

function computeCategory(category: Category2): ComputedCategories;
function computeCategory(category: Category1): ComputedCategories;
function computeCategory(category: any ): ComputedCategories{ 
 return {
  computed: category.testName,
  name: category.name
}}

Check out this Playground and refer to the official documentation

Answer 2

In my opinion, the ideal solution would be to implement function overloading

function computeCategory(category: Category2): ComputedCategories;
function computeCategory(category: Category1): ComputedCategories;
function computeCategory(category: any ): ComputedCategories{ 
 return {
  computed: category.testName,
  name: category.name
}}

Check out this Playground and refer to the official documentation

Answer 3

Answer №2

It is unclear what your exact goal is. If you simply want to match types, then in the type section, ensure you specify the correct type such as string rather than a value like this:

  type Category = {
    testName: string;     //incorrect testName:'category1'
    name: string;
  };

  const category: Category = {
    testName: 'category1',
    name: 'category1',
  };

  // No need to provide a type for the function, TypeScript will handle it
  const computeCategory = (obj: Category) => ({
    computed: obj.testName,
    name: obj.testName,
  });

  console.log(computeCategory(category));

If you wish to be specific about the values, consider using enums like this (which restricts usage to values defined within the enum):

  enum Category1 {
    testName = 'category1',
    name = 'category1',
  }

  enum Category2 {
    testName = 'category2',
    name = 'category2',
  }

  type Object = {
    testName: Category1.testName | Category2.testName;
    name: Category1.name | Category2.name;
  };

  const computeCategory = (object: Object) => ({
    computed: object.testName,
    name: object.name,
  });

  console.log(computeCategory(Category2));

Alternatively, you could simplify things like this:

  enum Categories {
    testName1 = 'testName1',
    testName2 = 'testName2',
    testName3 = 'testName3',
    name1 = 'name1',
    name2 = 'name2',
    name3 = 'name3',
  }

  const computeCategory = (category1: Categories, category2: Categories) => ({
    computed: category1,
    name: category2,
  });

  console.log(computeCategory(Categories.testName1, Categories.name1));

Answer 4

It is unclear what your exact goal is. If you simply want to match types, then in the type section, ensure you specify the correct type such as string rather than a value like this:

  type Category = {
    testName: string;     //incorrect testName:'category1'
    name: string;
  };

  const category: Category = {
    testName: 'category1',
    name: 'category1',
  };

  // No need to provide a type for the function, TypeScript will handle it
  const computeCategory = (obj: Category) => ({
    computed: obj.testName,
    name: obj.testName,
  });

  console.log(computeCategory(category));

If you wish to be specific about the values, consider using enums like this (which restricts usage to values defined within the enum):

  enum Category1 {
    testName = 'category1',
    name = 'category1',
  }

  enum Category2 {
    testName = 'category2',
    name = 'category2',
  }

  type Object = {
    testName: Category1.testName | Category2.testName;
    name: Category1.name | Category2.name;
  };

  const computeCategory = (object: Object) => ({
    computed: object.testName,
    name: object.name,
  });

  console.log(computeCategory(Category2));

Alternatively, you could simplify things like this:

  enum Categories {
    testName1 = 'testName1',
    testName2 = 'testName2',
    testName3 = 'testName3',
    name1 = 'name1',
    name2 = 'name2',
    name3 = 'name3',
  }

  const computeCategory = (category1: Categories, category2: Categories) => ({
    computed: category1,
    name: category2,
  });

  console.log(computeCategory(Categories.testName1, Categories.name1));

Mastering the usage of TypeScript union types with distinct internals

Answer №1

Answer №2

Similar questions

Modifying an Angular Component Template following an API Response

The loading spinner isn't appearing while the function is running

Issue with data not being recorded accurately in React app after socket event following API call

How can I enable dragging functionality for components (not elements) in angular?

How to transfer a parameter in Angular 2

Angular 8: Bridging the gap between two players with a shared singleton service

Convert an enum value to a String representation

Tips for configuring TypeScript in a monorepo to successfully compile private packages

Encountering TS2344 error when referring to the Component Ref in Vue.js during typing operations

Passing parameters to an Angular 2 component

The 'cookies' property is not defined in the 'undefined' type

In Angular 11, the error message "Type 'Object' cannot be assigned to type 'NgIterable<any> | null | undefined'" is appearing

How can I access a component variable within a foreach loop in Typescript?

Encountered an error stating "Cannot find module node:fs" while using eslint-typescript-import, eslint-import-resolver-typescript,

An error occurred while trying to set the property 'IS_CHECK' of an object that is undefined

Issue with MathJax rendering within an Angular5 Div that's being observed

Having trouble getting material-ui container to work with custom breakpoints in TypeScript?

Tips for monitoring dispatch in fetch/middleware functions

It appears that tsc is failing to recognize the "exclude" directives specified in the tsconfig.json file

Update the class attributes to a JSON string encoding the new values