assigning the variable as an instance of the class returned by the function

Question

assigning the variable as an instance of the class returned by the function

Among the various cake classes, I have a function that returns an instance of one of them. My goal is to somehow change the variable to match the actual type of the returned value.

Visit TypeScript Playground

// Classes
class Cake{
    myName: string;
    base: string = "vanilla"
    frosting: string = "empty"
    constructor(myName: string) {
        this.myName = myName
    }
}

class Chocolate extends Cake{
    frosting: string = "chocolate"
    cut() {
        console.log("cut to 8 pieces!")
    }
}

class Strawberry extends Cake {
    frosting:string="strawberry"
    topping:string="coconut"
}

// Functions
function getCake(frosting:string, myName:string):Chocolate|Strawberry {
    const chocolateClass = new Chocolate(myName)
    const strawberryClass = new Strawberry(myName)
    const classes:any = { chocolateClass, strawberryClass }
    let returnedObj: Chocolate|Strawberry;
    Object.keys(classes).forEach((key) => {
        if (classes[key].frosting == frosting) {
            returnedObj = classes[key]
        }
    })
    return returnedObj
}

// Logic
const myCake: Strawberry | Chocolate = getCake("chocolate", "John")
console.log(myCake.frosting)  // able to access
console.log(myCake.myName)  // able to access
myCake.cut() // able to access, but with linting error and intellisense issue

I can access specific properties from the strawberry class,

View Console Result

However, the problem arises with linting and intellisense not recognizing the existing properties and methods. This led me to consider recasting the myCake variable based on the return type of the getCake() function. How can I achieve this?

I want to avoid creating separate functions for each cake type (getStrawberryCake()), especially when dealing with multiple cake classes.

typescript

Answer 1

Answer №1

If you want the compiler to automatically deduce the correct types for you instead of manually "casting" (or type asserting) multiple times in your code, you can achieve this by making some adjustments.

Firstly, the compiler may not grasp that the Chocolate class's frosting property will always be the exact string "chocolate" because you've defined it as type

string</code. To provide the compiler a better understanding of the relationship between <code>frosting

and the cake type, you can mark the properties as readonly and skip the type annotations. This helps the compiler infer that "chocolate" is a string literal type which can be used later to map cake frosting names to class types:

class Chocolate extends Cake {
  readonly frosting = "chocolate"
  cut() {
    console.log("cut into 8 pieces!")
  }
}

The same principle applies to the Strawberry class:

class Strawberry extends Cake {
  readonly frosting = "strawberry"
  topping: string = "coconut"
}

Next, we need to define a structure to map frosting to class types:

type PossibleCakes = Chocolate | Strawberry;
type CakeMap = { [K in PossibleCakes["frosting"]]: Extract<PossibleCakes, { frosting: K }> };
// type CakeMap = { chocolate: Chocolate; strawberry: Strawberry; }

The PossibleCakes type is simply the union you were using, and you can add more members to this union as needed. The CakeMap utilizes a mapped type with properties that utilize the Extract utility type to extract the right member from the PossibleCakes union. This results in the equivalent of

{chocolate: Chocolate; strawberry: Strawberry;}

.

Finally, we define the getCake() function. This should be a generic function so that when called with a specific frosting value, it returns a specific class, not the PossibleCakes union.

Here is the function:

function getCake<K extends keyof CakeMap>(frosting: K, myName: string): CakeMap[K] {
  return { chocolate: new Chocolate(myName), strawberry: new Strawberry(myName) }[frosting];
}

When you call getCake("chocolate", "John"), the return type will be inferred as Chocolate by the compiler. This utilizes the key-based property lookup of CakeMap. If K is "chocolate", then CakeMap[K] is Chocolate.

By employing object lookup in the function implementation, we enable the compiler to verify that the output will be a CakeMap[K]. This is more favorable for compiler inference compared to an iterative approach using Object.keys() and forEach(), which may require type assertions.

Test the function with the following code:

const myCake = getCake("chocolate", "John")
console.log(myCake.frosting)
console.log(myCake.myName)
myCake.cut()

No errors should appear. The compiler recognizes that myCake is of type Chocolate, which means the cut() method is accessible. Hope this explanation helps, good luck!

Playground link to code

Answer 2

If you want the compiler to automatically deduce the correct types for you instead of manually "casting" (or type asserting) multiple times in your code, you can achieve this by making some adjustments.

Firstly, the compiler may not grasp that the Chocolate class's frosting property will always be the exact string "chocolate" because you've defined it as type

string</code. To provide the compiler a better understanding of the relationship between <code>frosting

and the cake type, you can mark the properties as readonly and skip the type annotations. This helps the compiler infer that "chocolate" is a string literal type which can be used later to map cake frosting names to class types:

class Chocolate extends Cake {
  readonly frosting = "chocolate"
  cut() {
    console.log("cut into 8 pieces!")
  }
}

The same principle applies to the Strawberry class:

class Strawberry extends Cake {
  readonly frosting = "strawberry"
  topping: string = "coconut"
}

Next, we need to define a structure to map frosting to class types:

type PossibleCakes = Chocolate | Strawberry;
type CakeMap = { [K in PossibleCakes["frosting"]]: Extract<PossibleCakes, { frosting: K }> };
// type CakeMap = { chocolate: Chocolate; strawberry: Strawberry; }

The PossibleCakes type is simply the union you were using, and you can add more members to this union as needed. The CakeMap utilizes a mapped type with properties that utilize the Extract utility type to extract the right member from the PossibleCakes union. This results in the equivalent of

{chocolate: Chocolate; strawberry: Strawberry;}

.

Finally, we define the getCake() function. This should be a generic function so that when called with a specific frosting value, it returns a specific class, not the PossibleCakes union.

Here is the function:

function getCake<K extends keyof CakeMap>(frosting: K, myName: string): CakeMap[K] {
  return { chocolate: new Chocolate(myName), strawberry: new Strawberry(myName) }[frosting];
}

When you call getCake("chocolate", "John"), the return type will be inferred as Chocolate by the compiler. This utilizes the key-based property lookup of CakeMap. If K is "chocolate", then CakeMap[K] is Chocolate.

By employing object lookup in the function implementation, we enable the compiler to verify that the output will be a CakeMap[K]. This is more favorable for compiler inference compared to an iterative approach using Object.keys() and forEach(), which may require type assertions.

Test the function with the following code:

const myCake = getCake("chocolate", "John")
console.log(myCake.frosting)
console.log(myCake.myName)
myCake.cut()

No errors should appear. The compiler recognizes that myCake is of type Chocolate, which means the cut() method is accessible. Hope this explanation helps, good luck!

Playground link to code

assigning the variable as an instance of the class returned by the function

Answer №1

Similar questions

Ionic: Fixed button located at the bottom of a specific ion-slide

Fixing the "Cannot find name" error by targeting ES6 in the tsconfig.json file

Can the inclusion of additional parameters compromise the type safety in TypeScript?

Using NavParams within a service component,

Get rid of the TypeScript error in the specified function

Removing fields when extending an interface in TypeScript

Angular app - static List mysteriously clears out upon refresh

Leveraging bespoke components for data within Ionic 2

Tips for utilizing ion-img within an Ionic 3 application?

Tips for creating a TypeScript function that is based on another function, but with certain template parameters fixed

Error message: Issue with AWS Serverless Lambda and Angular - TypeError: express function not defined

Why does WebStorm fail to recognize bigint type when using TSC 3.4.x?

Creating a Typescript project that compiles to UMD format, however, encountering the challenge of

Typescript error: The property "Authorization" is not found in the type HeadersInit

Sending an object between two components without a direct parent-child connection

mobx: invoking a class method upon data alteration

Mocking multiple services and their constructors in an Angular 2 TypeScript Jasmine test component

updating firebase data using Angular

Guide to implement editable columns in Angular 4 with a click functionality

Informing typescript that an argument is specifically an array when accepting both a single string and an array of strings