# Issue with abstract methods in ts?

**URL:** <https://forum.makecode.com/t/issue-with-abstract-methods-in-ts/22413>\
**Category:** Arcade\
**Created:** [September 11, 2023, 7:56pm UTC](https://forum.makecode.com/t/issue-with-abstract-methods-in-ts/22413 "2023-09-11T19:56:41Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![neintoes](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/neintoes/32/8315_2.png) [@neintoes](https://forum.makecode.com/u/neintoes)\
**Post date:** [September 11, 2023, 7:56pm UTC](https://forum.makecode.com/t/issue-with-abstract-methods-in-ts/22413/1 "2023-09-11T19:56:41Z")

</div>

I’m having an issue where the moment I attempt to use an abstract method the compiler acts out. It likely won’t run, it will stop registering errors and/ or fixes to code, and generally goes haywire until the abstract methods are removed am I doing something wrong here or is this a known issue with abstract methods?

For example, here’s a simple project with a Car class:

> **[Test (without abstract methods)](https://arcade.makecode.com/S94184-11402-55050-99375)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

Here is the same project with the Car class extending an abstract Vehicle class with abstract ‘startPosition’ and ‘go’ methods (when editing lines in Car.ts the compiler unusually non-responsive to changes and errors):

> **[Test (with abstract methods)](https://arcade.makecode.com/S20911-15716-25965-86464)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

---

<div class="post-metadata">

**Author:** ![AlexK](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/alexk/32/33339_2.png) [@AlexK](https://forum.makecode.com/u/AlexK)\
**Post date:** [September 13, 2023, 9:34pm UTC](https://forum.makecode.com/t/issue-with-abstract-methods-in-ts/22413/2 "2023-09-13T21:34:52Z")

</div>

The JavaScript editor in MakeCode is usually really good about flagging features of the TypeScript language that are unsupported, but it is not perfect. Whenever I’m trying to diagnose something like this, I always refer to the MakeCode documentation on its TypeScript implementation.

> **[MakeCode Languages: Blocks, Static TypeScript and Static Python](https://makecode.com/language)**
>
> MakeCode programs can be authored in Blocks, Static TypeScript or Static Python.

Interestingly, abstract classes are neither supported nor unsupported. 😄 I’ll leave it to the devs to chime in on the status of that specific structure, but I usually stay away from TypeScript features that are not specifically listed as being supported in the MakeCode documentation. Without digging into the code, my own experiments indicate that the `abstract` keyword is not yet implemented. The console shows that the code is failing to compile regardless of how I tinker with it.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/1/1110d30e38b303b4e55d328ef21881aa446f506e.png)

---

<div class="post-metadata">

**Author:** ![AlexK](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/alexk/32/33339_2.png) [@AlexK](https://forum.makecode.com/u/AlexK)\
**Post date:** [September 15, 2023, 7:00pm UTC](https://forum.makecode.com/t/issue-with-abstract-methods-in-ts/22413/3 "2023-09-15T19:00:44Z")

</div>

I can follow up on this a little further after jumping back into my current project. 😄

I _do_ use an abstract class in my newest project. It appears that the compiler can interpret abstract classes correctly, in that you cannot create objects directly from an abstract class. Abstract _methods_, however, cannot be created. Instead, I created empty methods in my abstract class and wrote overrides in my derived classes. While not perfect from an implementation standpoint, it happens to work for what I need.

Here’s an example. I have a series of classes that display menus to the player, and the player selects one of those options by pressing a button on their controller. It’s a perfect scenario for inherited classes. I’ve called them “action menus” in my code. The parent class is missing part of its implementation, so I’ve marked it as `abstract`. Notice the method calls in `handleButton()`: The method call will invoke the methods defined in the derived class if they exist. Otherwise, the empty methods in the parent class, `ActionMenu`, will be called … and nothing will happen, presumably because an option for that button is not presented to the player.

```typescript
abstract class ActionMenu {
    public static readonly PLAYER_SPRITE_X: number = 10
    public static readonly PLAYER_SPRITE_Y: number = 40
    
    protected message: string
    protected pId: number
    protected player: Player

    constructor() {
        this.message = ''
        this.pId = g_state.CurrPlayer
        this.player = g_state.getCurrPlayer()
    }

    public handleButton(button: ControllerButton): void {
        switch (button) {
            case ControllerButton.A:
                this.actionA()
                break

            case ControllerButton.B:
                this.actionB()
                break

            case ControllerButton.Down:
                this.actionDown()
                break

            // Remaining removed for brevity.
        }
    }

    public hide(): void {
        sprites.allOfKind(SpriteKind.ActionMenu).forEach((value: Sprite, index: number) =>
            value.destroy())
    }

    public show(): void {
        // Prints the message in a textSprite; not very interesting.
    }

    public actionA(): void { }
    public actionB(): void { }
    public actionDown(): void { }
    public actionLeft(): void { }
    public actionRight(): void { }
    public actionUp(): void { }

    protected showAction(button: ControllerButton, msg: string) {
        let msgSprite: TextSprite = textsprite.create(msg, Color.Transparent, Color.Yellow)
        // Format msgSprite.
        let left: number = 0
        let y: number = 0
        // Determine where the sprite go based on the button.
        buttonSprite.left = left
        buttonSprite.y = y
        msgSprite.left = left + 8
        msgSprite.y = y
    }
}

```

So, a fairly standard abstract class. Basic implementation for common methods with placeholders for methods that are meant to be overridden. Here’s my test class which I used to demonstrate that the implementation works correctly.

```typescript
class TestActionMenu extends ActionMenu {
    public show(): void {
        this.message = 'Test action menu!'
        super.show()
        this.showAction(ControllerButton.A, 'Button A')
        this.showAction(ControllerButton.B, 'Button B')
        this.showAction(ControllerButton.Down, 'Down Button')
        this.showAction(ControllerButton.Left, 'Left Button')
        this.showAction(ControllerButton.Right, 'Right Button')
        this.showAction(ControllerButton.Up, 'Up Button')
    }

    public actionA(): void {
        game.splashForPlayer(this.pId, 'You pressed A!')
    }

    public actionB(): void {
        game.splashForPlayer(this.pId, 'You pressed B!')
    }

    public actionDown(): void {
        game.splashForPlayer(this.pId, 'You pressed Down!')
    }

    public actionLeft(): void {
        game.splashForPlayer(this.pId, 'You pressed Left!')
    }

    public actionRight(): void {
        game.splashForPlayer(this.pId, 'You pressed Right!')
    }

    public actionUp(): void {
        game.splashForPlayer(this.pId, 'You pressed Up!')
    }
}

```

And, here’s a portion of an implementation of a “real” menu. I’m writing an interpretation of _Monopoly_, so I have a menu that displays when a player starts their turn in jail.

```typescript
class InJailActionMenu extends ActionMenu {
    protected canPay: boolean
    protected hasJailCard: boolean

    public show(): void {
        if (this.player.JailTurns < 3) {
            this.message = Strings.MENU_IN_JAIL_TITLE
                .replace('%NAME%', this.player.Name)
                .replace('%TURN%', (this.player.JailTurns + 1).toString())
        } else {
            this.message = Strings.ACTION_IN_JAIL_MUST_PAY
        }
        super.show()
        if (this.player.JailTurns < 3) {
            this.showAction(ControllerButton.A, Strings.MENU_ROLL)
        }
        if (this.player.Bank >= GameSettings.JAIL_FEE) {
            this.canPay = true
            let msg: string = Strings.ACTION_PAY + ' ' + GameSettings.JAIL_FEE
            this.showAction(ControllerButton.B, msg)
        }
        this.hasJailCard = false
        // Determine if current player holds a "get out of jail" card.
        if (this.hasJailCard) {
            this.showAction(ControllerButton.Down, Strings.ACTION_USE_JAIL_CARD)
        }
    }

    public actionA(): void {
        if (this.player.JailTurns < 3) {
            g_state.actionStartRollInJail()
        }
    }

    public actionB(): void {
        if (this.player.Bank >= GameSettings.JAIL_FEE) {
            g_state.actionPayJailFee()
        }
    }

    public actionDown(): void {
        if (this.hasJailCard) {
            g_state.actionUseJailCard()
        }
    }
}

```

To recap, abstract classes aren’t perfect in MakeCode, in that you cannot mark a method as abstract and force an implementation in a child class (not yet, anyway). If you keep that in mind, though, I find that they’re quite useful.

---

<div class="post-metadata">

**Author:** ![ChimbroDaPro](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/chimbrodapro/32/15852_2.png) [@ChimbroDaPro](https://forum.makecode.com/u/ChimbroDaPro)\
**Post date:** [September 18, 2023, 5:34pm UTC](https://forum.makecode.com/t/issue-with-abstract-methods-in-ts/22413/4 "2023-09-18T17:34:15Z")

</div>

Wow. You are all speaking a whole other language.