Use babel-decorators

babel.config.json

@@ -0,0 +1,10 @@
+{
+    "plugins": [
+        [
+            "@babel/plugin-proposal-decorators",
+            {
+                "version": "2023-05"
+            }
+        ]
+    ]
+}

package.json

@@ -7,6 +7,7 @@
     "build": "parcel build public/index.html"
   },
   "dependencies": {
+    "@babel/plugin-proposal-decorators": "^7.23.2",
     "immer": "^7.0.8",
     "mobx": "6.11.0-pre",
     "mobx-react-lite": "3.0.0-beta.1",

src/orders.ts → src/orders.js

@@ -1,8 +1,6 @@
 import { uuidv4 } from "./utils"
 import { observable, makeAutoObservable, action, computed } from "mobx"
 
-type Currencies = { [key: string]: number }
-
 export function getInitialCurrencies() {
   return observable({
     eur: 1.12,
@@ -42,17 +40,17 @@ function getInitialOrders() {
   ]
 }
 class Order {
-  readonly id: string
-  @observable accessor title: string = "";
-  @observable accessor price: number = 0;
-  @observable accessor currency: string;
-  readonly currencies: Currencies;
+  id
+  @observable accessor title = "";
+  @observable accessor price = 0;
+  @observable accessor currency;
+  currencies;
 
-  constructor(id: string,
-    title: string,
-    price: number,
-    currency: string,
-    currencies: Currencies) {
+  constructor(id,
+    title,
+    price,
+    currency,
+    currencies) {
     this.id = id
     this.title = title;
     this.price = price;