refactor: using script lang ts all over in project

Author: technikhil314

components/Toast.vue

@@ -28,12 +28,13 @@
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({
   computed: {
     toastState() {
       return this.$store.state.toast
     },
   },
-}
+})
 </script>

components/buttons/copyLink.vue

@@ -47,8 +47,9 @@
     </button>
   </div>
 </template>
-<script>
-export default {
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({
   props: {
     clickHandler: {
       type: Function,
@@ -59,5 +60,5 @@ export default {
       default: false,
     },
   },
-}
+})
 </script>

components/buttons/nextDiff.vue

@@ -25,14 +25,15 @@
     </button>
   </div>
   </template>
-  <script>
-    export default {
+  <script lang="ts">
+    import Vue from 'vue'
+    export default Vue.extend({
       props: {
         clickHandler: {
           type: Function,
           required: true,
         },
       },
-    }
+    })
   </script>
 </template>

components/buttons/prevDiff.vue

@@ -26,12 +26,13 @@
   </div>
 </template>
 <script>
-export default {
+import Vue from 'vue'
+export default Vue.extend({
   props: {
     clickHandler: {
       type: Function,
       required: true,
     },
   },
-}
+})
 </script>

components/buttons/skipToNav.vue

@@ -6,14 +6,15 @@
     Skip to main content
   </button>
 </template>
-<script>
-export default {
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({
   methods: {
     focusOnMain() {
       document.getElementsByTagName('main')[0].focus()
     },
   },
-}
+})
 </script>
 
 <style scoped lang="scss">

components/buttons/stickyCopy.vue

@@ -43,8 +43,9 @@
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({
   props: {
     clickHandler: {
       type: Function,
@@ -69,5 +70,5 @@ export default {
       }, 5000)
     },
   },
-}
+})
 </script>

components/buttons/toggleInSync.vue

@@ -15,13 +15,14 @@
     />
   </div>
 </template>
-<script>
-export default {
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({
   props: {
     clickHandler: {
       type: Function,
       required: true,
     },
   },
-}
+})
 </script>

components/diffActionBar.vue

@@ -30,13 +30,14 @@
   </section>
 </template>
 
-<script>
+<script lang="ts">
+import Vue from 'vue'
 import PrevDiff from './buttons/prevDiff.vue'
 import ToggleInSync from './buttons/toggleInSync.vue'
 import NextDiff from './buttons/nextDiff.vue'
 import CopyLink from './buttons/copyLink.vue'
 import { putToClipboard } from '~/helpers/utils'
-export default {
+export default Vue.extend({
   components: { PrevDiff, NextDiff, ToggleInSync, CopyLink },
   data() {
     return {
@@ -140,7 +141,7 @@ export default {
       })
     },
   },
-}
+})
 </script>
 <style lang="scss">
 .copy-uri-button:hover svg {

components/navbar.vue

@@ -157,8 +157,9 @@
 </template>
 
 <script lang="ts">
+import Vue from 'vue'
 let darkMode: Boolean | null = null
-export default {
+export default Vue.extend({
   props: {
     showBackButton: {
       type: Boolean,
@@ -187,5 +188,5 @@ export default {
       document.cookie = `darkMode=${darkMode}; Secure; max-age=31536000; path=/;`
     },
   },
-}
+})
 </script>

components/singleDiff.vue

@@ -28,10 +28,11 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import Vue from 'vue'
 import StickyCopy from './buttons/stickyCopy.vue'
 import { putToClipboard } from '~/helpers/utils'
-export default {
+export default Vue.extend({
   components: { StickyCopy },
   props: {
     diff: {
@@ -67,7 +68,7 @@ export default {
       )
     },
   },
-}
+})
 </script>
 
 <style lang="scss" scoped>