Update with-mobx-keystone-typescript example

examples/with-mobx-keystone-typescript/components/Clock.tsx

@@ -16,9 +16,7 @@ const Clock: FC<Props> = props => {
     font: '50px menlo, monaco, monospace',
     padding: '15px',
   }
-  return (
-    <div style={divStyle}>{format(new Date(props.lastUpdate as number))}</div>
-  )
+  return <div style={divStyle}>{format(props.lastUpdate)}</div>
 }
 
 export { Clock }

examples/with-mobx-keystone-typescript/package.json

@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "mobx": "^5.15.1",
-    "mobx-keystone": "^0.30.0",
+    "mobx-keystone": "^0.41.0",
     "mobx-react-lite": "^1.5.2",
     "next": "latest",
     "react": "^16.12.0",

examples/with-mobx-keystone-typescript/store/root.ts

@@ -1,16 +1,19 @@
-import { Model, model, prop, modelAction, timestampAsDate } from 'mobx-keystone'
+import {
+  Model,
+  model,
+  prop,
+  modelAction,
+  prop_dateTimestamp,
+} from 'mobx-keystone'
 
 @model('store/root')
 class RootStore extends Model({
   foo: prop<number | null>(0),
-  lastUpdate: prop<number | null>(new Date().getTime()),
+  lastUpdate: prop_dateTimestamp(() => new Date()),
   light: prop(false),
 }) {
   timer!: ReturnType<typeof setInterval>
 
-  @timestampAsDate('lastUpdate')
-  lastUpdateDate!: Date
-
   @modelAction
   start() {
     this.timer = setInterval(() => {
@@ -19,7 +22,7 @@ class RootStore extends Model({
   }
   @modelAction
   update() {
-    this.lastUpdate = Date.now()
+    this.lastUpdate = new Date()
     this.light = true
   }