Utilizing generic type and union types effectively in TypeScript

Question

Utilizing generic type and union types effectively in TypeScript

When initializing my class, I often pass in either a value or an object containing information about the value. For instance:

new Field<string>('test')
new Field<string>({value: 'test', inactive: 'preview'})

However, I encounter an error with state.value: "Property 'value' does not exist on type 'FieldState'. Property 'value' does not exist on type 'T'.ts(2339)"

interface BoxedValue<T> {
  value: T 
  inactive: 'disabled'| 'preview'| 'hidden'
}

type FieldState<T> = BoxedValue<T> | T

class Field<T> {
  value: T
  _pendingValue: T

  constructor(state: FieldState<T>) {
    if(typeof state === 'object') {
      this.value = this._pendingValue = state.value
    } else {
      this.value = this._pendingValue = state
    }
  }
}

I appreciate your solution in adjusting the code, but now I have encountered a new issue.

class Field<T> {
  value: T
  _pendingValue: T

  constructor(state: FieldState<T>) {
    if(this._isBoxedValue(state)) {
      this.value = this._pendingValue = state.value // Property 'value' does not exist on type 'FieldState<T>'.Property 'value' does not exist on type 'T'.
    } else {
      this.value = this._pendingValue = state
    }
  }
  _isBoxedValue(state: FieldState<T>): boolean{
    return typeof state === 'object' && state !== null &&
      Object.keys(state).length === 2 && 'value' in state && 'inactive' in state;
  }
}

I wonder why putting the conditional check in the _isBoxedValue function instead of the constructor led to errors. Can you help me understand?

typescript

Answer 1

Answer №1

To ensure that your 'state' object has a 'value' property, it is recommended to use the in operator instead of relying solely on typeof state === 'object'. While the latter can confirm that 'state' is an object type (including when its value is null), it cannot guarantee the presence of the 'value' property.

The 'in' operator also serves as a narrowing expression for types.

interface BoxedValue<T> {
  value: T 
  inactive: 'disabled'| 'preview'| 'hidden'
}

type FieldState<T> = BoxedValue<T> | T

class Field<T> {
  value: T
  _pendingValue: T

  constructor(state: FieldState<T>) {
    if ('value' in state) {
      this.value = this._pendingValue = state.value;
    } else {
      this.value = this._pendingValue = state;
    }
  }
}

Updated:

For better type checking, consider using User-Defined Type Guards with the _isBoxedValue method. The type predicate state is BoxedValue<T> should be returned instead of a boolean value.

Example implementation:

interface BoxedValue<T> {
  value: T 
  inactive: 'disabled'| 'preview'| 'hidden'
}

type FieldState<T> = BoxedValue<T> | T

class Field<T> {
  value: T
  _pendingValue: T

  constructor(state: FieldState<T>) {
    if (this._isBoxedValue(state)) {
      this.value = this._pendingValue = state.value;
    } else {
      this.value = this._pendingValue = state;
    }
  }

  _isBoxedValue(state: FieldState<T>): state is BoxedValue<T>{
    return typeof state === 'object' && state !== null &&
      Object.keys(state).length === 2 && 'value' in state && 'inactive' in state;
  }
}

Answer 2

To ensure that your 'state' object has a 'value' property, it is recommended to use the in operator instead of relying solely on typeof state === 'object'. While the latter can confirm that 'state' is an object type (including when its value is null), it cannot guarantee the presence of the 'value' property.

The 'in' operator also serves as a narrowing expression for types.

interface BoxedValue<T> {
  value: T 
  inactive: 'disabled'| 'preview'| 'hidden'
}

type FieldState<T> = BoxedValue<T> | T

class Field<T> {
  value: T
  _pendingValue: T

  constructor(state: FieldState<T>) {
    if ('value' in state) {
      this.value = this._pendingValue = state.value;
    } else {
      this.value = this._pendingValue = state;
    }
  }
}

Updated:

For better type checking, consider using User-Defined Type Guards with the _isBoxedValue method. The type predicate state is BoxedValue<T> should be returned instead of a boolean value.

Example implementation:

interface BoxedValue<T> {
  value: T 
  inactive: 'disabled'| 'preview'| 'hidden'
}

type FieldState<T> = BoxedValue<T> | T

class Field<T> {
  value: T
  _pendingValue: T

  constructor(state: FieldState<T>) {
    if (this._isBoxedValue(state)) {
      this.value = this._pendingValue = state.value;
    } else {
      this.value = this._pendingValue = state;
    }
  }

  _isBoxedValue(state: FieldState<T>): state is BoxedValue<T>{
    return typeof state === 'object' && state !== null &&
      Object.keys(state).length === 2 && 'value' in state && 'inactive' in state;
  }
}

Answer 3

Answer №2

Issue

Greetings, the dilemma at hand is a common one that affects many individuals. The statement

typeof state === "object"

checks for BoxedValue, however, there seems to be a slight error: T may also represent an object.

Resolution 1

include an additional condition

interface BoxedValue<T> {
    value: T;
    inactive: 'disabled' | 'preview' | 'hidden';
}

type FieldState<T> = BoxedValue<T> | T;

class Field<T> {
    value: T;
    _pendingValue: T;

    constructor(state: FieldState<T>) {
        if (typeof state === 'object' && "value" in state) {
            this.value = this._pendingValue = state.value;
        } else {
            this.value = this._pendingValue = state;
        }
    }
}

Resolution 2

specify the data type of T

interface BoxedValue<T> {
    value: T;
    inactive: 'disabled' | 'preview' | 'hidden';
}

type FieldState<T> = BoxedValue<T> | T;

class Field<T extends (string | number /* or your type */)> {
    value: T;
    _pendingValue: T;

    constructor(state: FieldState<T>) {
        if (typeof state === 'object') {
            this.value = this._pendingValue = state.value;
        } else {
            this.value = this._pendingValue = state;
        }
    }
}

Answer 4

Issue

Greetings, the dilemma at hand is a common one that affects many individuals. The statement

typeof state === "object"

checks for BoxedValue, however, there seems to be a slight error: T may also represent an object.

Resolution 1

include an additional condition

interface BoxedValue<T> {
    value: T;
    inactive: 'disabled' | 'preview' | 'hidden';
}

type FieldState<T> = BoxedValue<T> | T;

class Field<T> {
    value: T;
    _pendingValue: T;

    constructor(state: FieldState<T>) {
        if (typeof state === 'object' && "value" in state) {
            this.value = this._pendingValue = state.value;
        } else {
            this.value = this._pendingValue = state;
        }
    }
}

Resolution 2

specify the data type of T

interface BoxedValue<T> {
    value: T;
    inactive: 'disabled' | 'preview' | 'hidden';
}

type FieldState<T> = BoxedValue<T> | T;

class Field<T extends (string | number /* or your type */)> {
    value: T;
    _pendingValue: T;

    constructor(state: FieldState<T>) {
        if (typeof state === 'object') {
            this.value = this._pendingValue = state.value;
        } else {
            this.value = this._pendingValue = state;
        }
    }
}

Utilizing generic type and union types effectively in TypeScript

Answer №1

Answer №2

Issue

Resolution 1

Resolution 2

Similar questions

Sort by label using the pipe operator in RxJS with Angular

Exploring the process of importing and exporting modules in TypeScript with the help of systemjs

The function of TypeScript map is not working properly

Issue with binding nested ViewModels/components in Knockoutjs using TypeScript does not resolve

Passing variable values in Angular 6

Strange Typescript Issue: Dependency Imports Not Recognized as Top-Level Module

Passing an array of items as a property to a child component in React with Typescript is not possible

Unexpectedly, optimization causing issues on Angular site without explanation

How to declare and initialize a variable in Angular 2 using TypeScript

Error: The OOP class value for translateX in the Web Animation API is returning as undefined

Execute the function right away and then at regular intervals of X seconds

Implement conditional props for a React component by linking them to existing props

What methods can I use to make sure the right side of my React form is properly aligned for a polished appearance?

Utilizing a conditional ngIf statement in HTML or incorporating a variable within typescript for logical operations

The correct way to add to a string array that has been passed as props to a functional component

Unable to import necessary modules within my React TypeScript project

Are there any restrictions on the amount of data that can be included in a Sankey diagram created from an Excel sheet? I would

What are the steps to troubleshoot server-side TypeScript code in NextJS with WebStorm?

Encountering an error when attempting to store a value in an array of custom types: "Unable to assign properties to undefined (setting 'id')"

I built a custom Angular application integrated with Firebase, and I'm looking for a way to allow every user to have their individual table for managing tasks