Convert About.vue to vue class component with TypeScript

src/about/About.vue

@@ -12,9 +12,9 @@
       </p>
     </div>
     <dl class="version">
-      <template v-for="(name, idx) in versionInfo">
+      <template v-for="(version, i) in versions">
-        <dt :key="'title-'+idx">{{ versionName[name] }}</dt>
+        <dt :key="'name-'+i">{{ version.name }}</dt>
-        <dd :key="'desc-'+idx">{{ name !== "codeName" ? versions[name] : codeName }}</dd>
+        <dd :key="'ver-'+i">{{ version.version }}</dd>
       </template>
     </dl>
     <div id="copyright">
@@ -64,22 +64,51 @@ dl.version {
 }
 </style>
 
-<script>
+<script lang="ts">
-import { remote } from 'electron'
+import { Component, Vue } from 'vue-property-decorator';
+import { ipcRenderer } from 'electron'
 
-export default {
+interface Version {
-  name: 'about',
+  name: string
-  data() {
+  version: string
-    return Object.assign({
+}
-      versionName: {
+
-        codeName: "Code Name",
+@Component
-        internal: "Internal Version",
+export default class About extends Vue {
-        chrome: "Chromium",
+  public productName: string
-        electron: "Electron",
+  public homePage: string
-        node: "Node.js",
+  public copyright: string
+  public versions: Version[]
+
+  constructor() {
+    super()
+    let { productName, homePage, copyright, codeName, versions } = ipcRenderer.sendSync('thedesk-info')
+    console.log(versions)
+    this.productName = productName
+    this.homePage = homePage
+    this.copyright = copyright
+    this.versions = [
+      {
+        name: "Code Name",
+        version: codeName,
       },
-      versionInfo: [ "codeName", "internal", "chrome", "electron", "node" ]
+      {
-    }, JSON.parse(remote.getGlobal('TheDeskInfo')))
+        name: "Internal Version",
+        version: versions.internal,
       },
+      {
+        name: "Chromium",
+        version: versions.chrome,
+      },
+      {
+        name: "Electron",
+        version: versions.electron,
+      },
+      {
+        name: "Node.js",
+        version: versions.node,
+      },
+    ]
+  }
 }
 </script>

vue.config.js

@@ -5,12 +5,12 @@ const { appId, copyright } = require("./info.json")
 module.exports = {
   pages: {
     index: {
-      entry: 'src/index/main.js',
+      entry: 'src/index/main.ts',
       template: 'public/index.html',
       title: productName,
     },
     about: {
-      entry: 'src/about/main.js',
+      entry: 'src/about/main.ts',
       template: 'public/index.html',
       title: `About`,
     },