Is it feasible to determine the precise class of an object while utilizing a variable that possesses a union type in Typescript?

Question

Is it feasible to determine the precise class of an object while utilizing a variable that possesses a union type in Typescript?

Currently delving into Typescript and running tests. Upon using console.log, I received an object. Given its typed nature, I anticipated it to accurately determine the type of variable c.

interface Car {
  gears: number
}

interface Bike{
  gears: number,
  model: string
}

let c: Bike | Car;

c = {gears : 2};

console.log(typeof c);

typescript

Answer 1

Answer №1

At compile time, TypeScript retains type information but discards it at runtime.

It's important to note that the typeof method in JavaScript operates as JavaScript, not TypeScript.

You can refer to the return values of typeof here. The TypeScript documentation also confirms this.

If you're interested in "type checking," consider exploring narrowing, as there are various ways to achieve it.

Remember that TypeScript employs structural typing rather than nominal typing, like C# and Java. This means that two objects don't necessarily have to be of the same type; they just need to be compatible enough (usually having overlapping methods/fields).

Answer 2

At compile time, TypeScript retains type information but discards it at runtime.

It's important to note that the typeof method in JavaScript operates as JavaScript, not TypeScript.

You can refer to the return values of typeof here. The TypeScript documentation also confirms this.

If you're interested in "type checking," consider exploring narrowing, as there are various ways to achieve it.

Remember that TypeScript employs structural typing rather than nominal typing, like C# and Java. This means that two objects don't necessarily have to be of the same type; they just need to be compatible enough (usually having overlapping methods/fields).

Answer 3

Answer №2

typeof is a unique JavaScript operator that provides the type of a specific variable during runtime. In contrast, TypeScript allows you to define types only during code writing and compilation. During runtime, JavaScript offers native types such as: Boolean, Null, Undefined, Number, BigInt, String, Symbol, and Object.

With that being said, when differentiating between Car and Bike when utilizing them as a union type, a common approach is to implement a discriminator property. For example:

interface Car {
  gears: number,
  type:"car"
}

interface Bike{
  gears: number,
  model: string,
  type:"bike"
}

// demonstrating a use case
function foo(bar: Car | Bike ) {
  if(bar.type === "bike"){
    // TypeScript permits access to the model property only here 
    console.log(bar.model); 
  }
}

Answer 4

typeof is a unique JavaScript operator that provides the type of a specific variable during runtime. In contrast, TypeScript allows you to define types only during code writing and compilation. During runtime, JavaScript offers native types such as: Boolean, Null, Undefined, Number, BigInt, String, Symbol, and Object.

With that being said, when differentiating between Car and Bike when utilizing them as a union type, a common approach is to implement a discriminator property. For example:

interface Car {
  gears: number,
  type:"car"
}

interface Bike{
  gears: number,
  model: string,
  type:"bike"
}

// demonstrating a use case
function foo(bar: Car | Bike ) {
  if(bar.type === "bike"){
    // TypeScript permits access to the model property only here 
    console.log(bar.model); 
  }
}

Answer 5

Answer №3

Typescript introduces a static type system at compile time. When transpiled to Javascript, the type information is lost, leaving only what JS inherently understands.

Using interface or type in Typescript does not have direct equivalents in Javascript. However, by utilizing classes with prototype chains, such as shown below, you can differentiate types at runtime using instanceof.

class Car {
    constructor(public readonly gears: number) {}
}

class Bike{
    constructor(
        public readonly gears: number, 
        public readonly model: string
    ) {}
}

let c: Bike | Car;

c = new Car(2)

console.log(c instanceof Car)
console.log(c instanceof Bike);

This approach addresses the runtime distinction between types but does not resolve the issue of accessing properties that may vary based on the specific type at compile time.

In cases where we have a union like Bike | Car and attempt to access a property unique to one type while applied to another, a compile-time error would be generated.

console.log(c.model)
    //        ^^^^^ Property 'model' does not exist on type 'Car'

To address this challenge, when utilizing interface, it's essential to provide mechanisms for discerning between various types. This allows Typescript to recognize when a variable's type is narrower than its declaration. If two types share identical shapes, distinguishing them becomes impossible without a discriminant property to provide subtle hints. In the provided example, Bike differs from Car due to its model property, enabling us to create a 'type predicate' for both compile-time and runtime inference.

function isBike(obj: any): obj is Bike {
    return typeof obj === 'object' && typeof obj.model === 'string'
}

We may also define an inverse function:

function isCar(obj: any): obj is Car {
    return typeof obj === 'object' && typeof obj.model !== 'string'
}

Alternatively, we could consider:

function isCar(obj: any): obj is Car {
    return typeof obj === 'object' && typeof obj.model === undefined
}

The method of discrimination between types is subjective and depends on the context. It is possible to base the differentiation on property values rather than just their types or presence within the object.

By adopting these type predicates, we safeguard the usage of Bike's properties, promoting type safety during compilation and runtime execution.

if (isBike(c)) {
  console.log(c.model)
}

if (isCar(c)) {
  console.log(c.model)
      //        ^^^^^ Property 'model' does not exist on type 'Car'
}

Discriminated Unions present a similar solution. While type predicates rely on accurate implementation, there is a risk of inconsistencies when codebase modifications are made without updating the predicates accordingly, potentially resulting in misinterpretations. Nonetheless, this method offers flexibility in handling type unions lacking a common discriminator property.

Answer 6

Typescript introduces a static type system at compile time. When transpiled to Javascript, the type information is lost, leaving only what JS inherently understands.

Using interface or type in Typescript does not have direct equivalents in Javascript. However, by utilizing classes with prototype chains, such as shown below, you can differentiate types at runtime using instanceof.

class Car {
    constructor(public readonly gears: number) {}
}

class Bike{
    constructor(
        public readonly gears: number, 
        public readonly model: string
    ) {}
}

let c: Bike | Car;

c = new Car(2)

console.log(c instanceof Car)
console.log(c instanceof Bike);

This approach addresses the runtime distinction between types but does not resolve the issue of accessing properties that may vary based on the specific type at compile time.

In cases where we have a union like Bike | Car and attempt to access a property unique to one type while applied to another, a compile-time error would be generated.

console.log(c.model)
    //        ^^^^^ Property 'model' does not exist on type 'Car'

To address this challenge, when utilizing interface, it's essential to provide mechanisms for discerning between various types. This allows Typescript to recognize when a variable's type is narrower than its declaration. If two types share identical shapes, distinguishing them becomes impossible without a discriminant property to provide subtle hints. In the provided example, Bike differs from Car due to its model property, enabling us to create a 'type predicate' for both compile-time and runtime inference.

function isBike(obj: any): obj is Bike {
    return typeof obj === 'object' && typeof obj.model === 'string'
}

We may also define an inverse function:

function isCar(obj: any): obj is Car {
    return typeof obj === 'object' && typeof obj.model !== 'string'
}

Alternatively, we could consider:

function isCar(obj: any): obj is Car {
    return typeof obj === 'object' && typeof obj.model === undefined
}

The method of discrimination between types is subjective and depends on the context. It is possible to base the differentiation on property values rather than just their types or presence within the object.

By adopting these type predicates, we safeguard the usage of Bike's properties, promoting type safety during compilation and runtime execution.

if (isBike(c)) {
  console.log(c.model)
}

if (isCar(c)) {
  console.log(c.model)
      //        ^^^^^ Property 'model' does not exist on type 'Car'
}

Discriminated Unions present a similar solution. While type predicates rely on accurate implementation, there is a risk of inconsistencies when codebase modifications are made without updating the predicates accordingly, potentially resulting in misinterpretations. Nonetheless, this method offers flexibility in handling type unions lacking a common discriminator property.

Is it feasible to determine the precise class of an object while utilizing a variable that possesses a union type in Typescript?

Answer №1

Answer №2

Answer №3

Similar questions

A single element containing two duplicates of identical services

The compilation fails when using TestUtils findRenderedComponentWithType with a Component<Props> definition

The NodeJS namespace does not include the exported member "Global." It is recommended to replace NodeJS.Global with typeof globalThis

Obtaining an array of objects through the reduction of another array

What is the reason for a high-order generic function to eliminate falsy types from the argument list of the returned function?

Top tips for accessing and modifying an immutable object within a component retrieved from an RXJS/NGRX store in Angular

Vuejs fails to properly transmit data

Manipulating Data in TypeScript: Creating a Mutated Copy of a List of Dictionaries

Guide on transferring the Token from the initial response request to the header of the second request, with the help of Axios in an Ionic React application (Making 2 Post Requests

What is the best way to incorporate an external .css file into my Angular project by referencing its URL?

Instructions for disabling editing for a specific cell within an inline editable row in primeNG

Error: Unexpected top-level property "import/order" in ESLINT configuration

When TypeScript error "ts(18004)" occurs, it is because of the object properties within all Prisma DB

Ways to retrieve data object within an HTMLElement without relying on jQuery

Ways to determine the types of props received by a function when the arguments vary for each scenario?

How to Publish an Angular 8 Application on Github Pages using ngh

Issue: Unable to find 'fs' in JS universal application

Bring in jspm libraries to your project via typescript

Can ng-packagr create scripts that are compatible with running in a web browser like regular JavaScript?

What is the best method for transferring data from a parent to a child component in Angular?