Added export typescript functionality to both EditDeleteComponent and ComponentDisplay. Need to add defineComponent to mixin file

Author: Julia Bakerink

src/components/ComponentDisplay.vue

@@ -158,6 +158,7 @@ export default {
       "componentChildrenMultiselectValue",
       "imagePath",
       "activeComponentObj",
+      "exportAsTypescript",
     ]),
     // used in VueDraggableResizeable component
     activeRouteArray() {

src/components/ExportComponentMixin.vue

@@ -161,7 +161,14 @@ export default {
         methods += "  },\n";
       }
       // concat all code within script tags
-      let output = "\n\n<script>\n";
+      // if exportAsTypescript is on, out should be <script lang="ts">
+      console.log("export as typescript:", this.exportAsTypescript);
+      let output;
+      if (this.exportAsTypescript === 'on') {
+        output = "\n\n<script lang='ts'>\n";
+      } else {
+        output = "\n\n<script>\n";
+      }
       output += imports + "\nexport default {\n  name: '" + componentName + "'";
       output += ",\n  components: {\n";
       output += childrenComponentNames + "  },\n";
@@ -170,6 +177,7 @@ export default {
       output += methods;
       // eslint-disable-next-line no-useless-escape
       output += "};\n<\/script>";
+      console.log('output', output);
       return output;
     },
     /**

src/components/home_sidebar_items/ComponentTab/EditDeleteComponents.vue

@@ -186,6 +186,7 @@ export default {
       "activeComponent",
       "activeComponentObj",
       "componentMap",
+      "exportAsTypescript",
     ]),
 
     activeRouteDisplay() {

tsTestProps/Test.vue

@@ -0,0 +1,34 @@
+<template>
+	<div>
+	</div>
+</template>
+
+<script lang='ts'>
+import { mapState, mapActions } from "vuex";
+// need to add import defineComponent
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: 'TestContainer',
+  components: {
+  },
+  data () {
+    return {
+      testProp: "PLACEHOLDER FOR VALUE",
+    }
+  },
+  computed: {
+    ...mapState([
+      "testState",
+    ]),
+  },
+  methods: {
+    ...mapActions([
+      "testAction",
+    ]),
+  },
+});
+</script>
+
+<style scoped>
+</style>

tstest/Test.vue

@@ -0,0 +1,18 @@
+<template>
+	<div>
+	</div>
+</template>
+
+<script lang='ts'>
+import Child from '@/components/Child.vue';
+
+export default {
+  name: 'Test',
+  components: {
+    Child,
+  },
+};
+</script>
+
+<style scoped>
+</style>