Add typescript support to project

client/build/webpack.base.conf.js

@@ -44,23 +44,13 @@ module.exports = {
     }
   },
   resolve: {
-    extensions: ['.js', '.vue', '.json', '.gql', '.graphql', '.scss'],
+    extensions: ['.js', '.ts', '.vue', '.json', '.gql', '.graphql', '.scss'],
     alias: {
       '@': resolve('src'),
       styles: resolve('src/styles'),
       gql: resolve('src/graphql/gql'),
       // vue: '@vue/compat',
     },
-    // we probably don't need this anymore
-    // fallback: {
-    //   // used to be in node: {setImmediate: false,...}
-    //   setImmediate: false,
-    //   dgram: false,
-    //   fs: false,
-    //   net: false,
-    //   tls: false,
-    //   child_process: false,
-    // },
   },
   module: {
     rules: [

client/src/components/content-block-form/ContentBlockForm.vue

@@ -118,21 +118,23 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
-  import Toggle from '@/components/ui/Toggle';
+  import Vue from 'vue';
-  import ContentFormSection from '@/components/content-block-form/ContentFormSection';
+  import Toggle from '@/components/ui/Toggle.vue';
-  import InputWithLabel from '@/components/ui/InputWithLabel';
+  import ContentFormSection from '@/components/content-block-form/ContentFormSection.vue';
-  import AddContentLink from '@/components/content-block-form/AddContentLink';
+  import InputWithLabel from '@/components/ui/InputWithLabel.vue';
+  import AddContentLink from '@/components/content-block-form/AddContentLink.vue';
 
-  import ContentElement from '@/components/content-block-form/ContentElement';
+  import ContentElement from '@/components/content-block-form/ContentElement.vue';
-  import {moveToIndex, removeAtIndex, replaceAtIndex, swapElements} from '@/graphql/immutable-operations';
+  import {moveToIndex, removeAtIndex, replaceAtIndex, swapElements} from '@/graphql/immutable-operations.js';
 
-  import {CHOOSER, transformInnerContents} from '@/components/content-block-form/helpers';
+  import {CHOOSER, transformInnerContents} from '@/components/content-block-form/helpers.js';
-  import ContentElementActions from '@/components/content-block-form/ContentElementActions';
+  import ContentElementActions from '@/components/content-block-form/ContentElementActions.vue';
+  import {ContentBlock, numberOrUndefined} from "@/types";
 
   // TODO: refactor this file, it's huuuuuge!
 
-  export default {
+  export default Vue.extend({
     props: {
       title: {
         type: String,
@@ -163,12 +165,12 @@
       };
     },
     computed: {
-      isValid() {
+      isValid(): boolean {
         return this.localContentBlock.title > '';
       },
     },
     methods: {
-      update(index, element, parent) {
+      update(index: number, element: any, parent: numberOrUndefined = undefined) {
         if (parent === undefined) {
           // element is top level
           this.localContentBlock.contents = [
@@ -193,7 +195,7 @@
           ];
         }
       },
-      addBlock(afterOuterIndex, innerIndex) {
+      addBlock(afterOuterIndex: number, innerIndex: numberOrUndefined = undefined) {
         if (innerIndex !== undefined) {
           const block = this.localContentBlock.contents[afterOuterIndex];
           this.localContentBlock.contents = [
@@ -223,7 +225,7 @@
           ];
         }
       },
-      remove(outer, inner, askForConfirmation = true) {
+      remove(outer: number, inner: numberOrUndefined = undefined, askForConfirmation = true) {
         if(askForConfirmation) {
           this.$modal.open('confirm')
             .then(() => {
@@ -236,7 +238,7 @@
           this.executeRemoval(outer, inner);
         }
       },
-      shift(outer, inner, distance) {
+      shift(outer: number, inner: numberOrUndefined = undefined, distance: number) {
         if (inner === undefined) {
           this.localContentBlock.contents = swapElements(this.localContentBlock.contents, outer, outer + distance);
         } else {
@@ -249,7 +251,7 @@
           this.localContentBlock.contents = replaceAtIndex(contents, outer, newOuterElement);
         }
       },
-      top(outer, inner) {
+      top(outer: number, inner: numberOrUndefined = undefined) {
         if (inner === undefined) {
           this.localContentBlock.contents = moveToIndex(this.localContentBlock.contents, outer, 0);
         } else {
@@ -262,13 +264,13 @@
           this.localContentBlock.contents = replaceAtIndex(contents, outer, newOuterElement);
         }
       },
-      up(outer, inner) {
+      up(outer: number, inner: numberOrUndefined = undefined) {
         this.shift(outer, inner, -1);
       },
-      down(outer, inner) {
+      down(outer: number, inner: numberOrUndefined = undefined) {
         this.shift(outer, inner, 1);
       },
-      bottom(outer, inner) {
+      bottom(outer: number, inner: numberOrUndefined = undefined) {
         if (inner === undefined) {
           const maxIndex = this.localContentBlock.contents.length - 1;
           this.localContentBlock.contents = moveToIndex(this.localContentBlock.contents, outer, maxIndex);
@@ -283,7 +285,7 @@
           this.localContentBlock.contents = replaceAtIndex(contents, outer, newOuterElement);
         }
       },
-      executeRemoval(outer, inner) {
+      executeRemoval(outer: number, inner: numberOrUndefined = undefined) {
         if (inner === undefined) {
           // not a list item container, just remove the element from the outer array
           this.localContentBlock.contents = removeAtIndex(this.localContentBlock.contents, outer);
@@ -307,12 +309,12 @@
           }
         }
       },
-      save(contentBlock) {
+      save(contentBlock: ContentBlock) {
         this.$emit('save', contentBlock);
       },
     },
 
-  };
+  });
 </script>
 
 <style lang="scss">

client/src/plugins/modal.d.ts

@@ -0,0 +1,13 @@
+import Vue from 'vue';
+
+interface Modal {
+  confirm: (res: any)  => void,
+  open: (component: string, payload?: any) => Promise<(resolve: () => any, reject: () => any) => void>,
+  cancel: () => void
+}
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    $modal: Modal
+  }
+}

client/src/shims-vue.d.ts

@@ -0,0 +1,13 @@
+// from https://stackoverflow.com/questions/64213461/vuejs-typescript-cannot-find-module-components-navigation-or-its-correspon
+declare module "*.vue" {
+  import Vue from 'vue';
+  export default Vue;
+}
+
+// for Vue 3
+// declare module '*.vue' {
+//   import type { DefineComponent } from 'vue'
+//   const component: DefineComponent<{}, {}, any>
+//   export default component
+// }
+//

client/src/types/index.ts

@@ -0,0 +1,8 @@
+export type numberOrUndefined = number | undefined;
+
+export interface ContentBlock {
+  title: string;
+  contents: any[];
+  id: string | undefined;
+  isAssignment: boolean;
+}