Part 4 - Allow vue components to be written in Typescript

To have vue components working with Typescript, we just need to use the vue-property-decorator library.
In this commit I have also added a few features to demonstrate how to properly use Typescript with vue.

At this point, we have the entire front-end written in Typescript. In the next commit, we'll set up jest to test our Vue components.

Author: FRFlor

package.json

@@ -23,6 +23,7 @@
         "ts-loader": "^5.4.3",
         "typescript": "^3.4.5",
         "vue": "^2.5.17",
+        "vue-property-decorator": "^8.1.0",
         "vue-template-compiler": "^2.6.10"
     }
 }

resources/js/components/ExampleComponent.vue

@@ -6,18 +6,37 @@
                     <div class="card-header">Example Component</div>
 
                     <div class="card-body">
-                        I'm an example component.
+                        Hello {{userName}}, your name backwards is "{{backwardsUserName}}".
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </template>
 
-<script>
-    export default {
-        mounted() {
-            console.log('Component mounted.')
+<script lang="ts">
+    import {Component, Prop, Vue, Watch} from 'vue-property-decorator';
+
+    @Component
+    export default class ExampleComponent extends Vue {
+        // Props are defined using the Prop decorator
+        @Prop({default: 'Unknown'}) protected userName!: string;
+
+        // Life cycle methods are declared just like regular methods
+        private mounted(): void {
+            console.log('Component mounted.');
+        }
+
+        // Computed properties are written as getters
+        protected get backwardsUserName(): string {
+            return this.userName.split('').reverse().join('');
+        }
+
+        // Watchers become much cleaner with Typescript decorators, just place the decorator above
+        // the function that will run.
+        @Watch('userName')
+        private onNameChanged(newName: string): void {
+            alert(`I see that you changed your name! ${newName} it is then.`);
         }
     }
 </script>

yarn.lock

@@ -6265,6 +6265,11 @@ [email protected]:
   dependencies:
     indexof "0.0.1"
 
+vue-class-component@^7.0.1:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-7.0.2.tgz#c5f35a91c0e9341532392b84d606a84911fb13bc"
+  integrity sha512-8xw/wkZI2tgHcwvkSRC1ax7GeP1CG27wKhedvOAdjdASm05VU4RijGsCYti6s6CzBioBL5BQUmntQQTCsp1wnQ==
+
 vue-hot-reload-api@^2.3.0:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz#2756f46cb3258054c5f4723de8ae7e87302a1ccf"
@@ -6281,6 +6286,13 @@ vue-loader@^15.4.2:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-property-decorator@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/vue-property-decorator/-/vue-property-decorator-8.1.0.tgz#66493a5350e7f643e852e7698ec2c883554daa79"
+  integrity sha512-TUWpbadApSW/sx9hlbrUq092ULm4E3RkL5X4fFhkiJ88/Y99lVubjh3bd3VbFQ8JRlKaTeqMOKaFHQRzWBCFPg==
+  dependencies:
+    vue-class-component "^7.0.1"
+
 vue-style-loader@^4.1.0:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"