import ts

package.json

@@ -19,9 +19,10 @@
     "wangeditor": "^4.7.4"
   },
   "devDependencies": {
-    "vite": "2.3.7",
+    "@types/vue-router": "^2.0.0",
     "@vitejs/plugin-vue": "^1.2.3",
-    "@vue/compiler-sfc": "^3.1.2"
+    "@vue/compiler-sfc": "^3.1.2",
+    "vite": "2.3.7"
   },
   "browserslist": [
     "> 1%",

src/App.vue

@@ -2,8 +2,11 @@
     <router-view />
 </template>
 
-<script>
-export default {};
+<script lang="ts">
+import {defineComponent} from 'vue'
+export default defineComponent({
+    name: 'App'
+});
 </script>
 
 <style>

src/components/Header.vue

@@ -41,7 +41,7 @@
         </div>
     </div>
 </template>
-<script>
+<script lang="ts">
 import { computed, onMounted } from "vue";
 import { useStore } from "vuex";
 import { useRouter } from "vue-router";

src/components/Sidebar.vue

@@ -31,7 +31,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
 import { computed, watch } from "vue";
 import { useStore } from "vuex";
 import { useRoute } from "vue-router";

src/components/Tags.vue

@@ -25,15 +25,17 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
 import { computed } from "vue";
 import { useStore } from "vuex";
-import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
+import { onBeforeRouteUpdate, useRoute, useRouter, } from "vue-router";
+import { tabItem } from "../types/tab";
+
 export default {
     setup() {
         const route = useRoute();
         const router = useRouter();
-        const isActive = (path) => {
+        const isActive = (path: string) => {
             return path === route.fullPath;
         };
 
@@ -42,7 +44,7 @@ export default {
         const showTags = computed(() => tagsList.value.length > 0);
 
         // 关闭单个标签
-        const closeTags = (index) => {
+        const closeTags = (index: number) => {
             const delItem = tagsList.value[index];
             store.commit("delTagsItem", { index });
             const item = tagsList.value[index]
@@ -57,7 +59,7 @@ export default {
 
         // 设置标签
         const setTags = (route) => {
-            const isExist = tagsList.value.some((item) => {
+            const isExist = tagsList.value.some((item: tabItem): boolean => {
                 return item.path === route.fullPath;
             });
             if (!isExist) {
@@ -68,7 +70,7 @@ export default {
                     name: route.name,
                     title: route.meta.title,
                     path: route.fullPath,
-                });
+                } as tabItem);
             }
         };
         setTags(route);
@@ -88,7 +90,7 @@ export default {
             });
             store.commit("closeTagsOther", curItem);
         };
-        const handleTags = (command) => {
+        const handleTags = (command: string) => {
             command === "other" ? closeOther() : closeAll();
         };
 

src/types/tab.ts

@@ -0,0 +1,5 @@
+export interface tabItem {
+    name: string,
+    title: string,
+    path: string
+}

src/views/403.vue

@@ -11,20 +11,21 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
 import { useRouter } from "vue-router";
-export default {
+import {defineComponent} from 'vue'
+export default defineComponent({
     name: "404",
     setup() {
         const router = useRouter();
-        const goBack = () => {
+        const goBack = (): void => {
             router.go(-1);
         };
         return {
             goBack,
         };
     },
-};
+});
 </script>
 
 

src/views/404.vue

@@ -11,7 +11,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
 import { useRouter } from "vue-router";
 export default {
     name: "404",

src/views/BaseCharts.vue

@@ -33,7 +33,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
 import Schart from "vue-schart";
 export default {
     name: "basecharts",

src/views/BaseForm.vue

@@ -69,7 +69,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
 import { reactive, ref } from "vue";
 import { ElMessage } from "element-plus";
 export default {
@@ -132,7 +132,7 @@ export default {
                 { required: true, message: "请输入表单名称", trigger: "blur" },
             ],
         };
-        const formRef = ref(null);
+        const formRef = ref<HTMLFormElement>();
         const form = reactive({
             name: "",
             region: "",
@@ -145,11 +145,10 @@ export default {
             options: [],
         });
         // 提交
-        const onSubmit = () => {
+        const onSubmit = (): void | boolean => {
             // 表单校验
-            formRef.value.validate((valid) => {
+            formRef.value?.validate((valid: boolean) => {
                 if (valid) {
-                    console.log(form);
                     ElMessage.success("提交成功！");
                 } else {
                     return false;
@@ -158,7 +157,7 @@ export default {
         };
         // 重置
         const onReset = () => {
-            formRef.value.resetFields();
+            formRef.value?.resetFields();
         };
 
         return {

src/views/BaseTable.vue

@@ -77,30 +77,54 @@
     </div>
 </template>
 
-<script>
-import { ref, reactive } from "vue";
+<script lang="ts">
+import { ref, reactive, onMounted } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { fetchData } from "../api/index";
+import {AxiosResponse} from 'axios'
+
+interface SearchParam {
+    address: string,
+    name: string,
+    pageIndex: number,
+    pageSize: number
+}
+
+/**
+ * @todo 提取为统一response
+ */
+interface responseType {
+    list: [],
+    pageTotal: number
+}
+
+interface formObj {
+    name: string,
+    address: string
+}
 
 export default {
     name: "basetable",
     setup() {
-        const query = reactive({
+        const query = reactive<SearchParam>({
             address: "",
             name: "",
             pageIndex: 1,
             pageSize: 10,
         });
         const tableData = ref([]);
-        const pageTotal = ref(0);
+        const pageTotal = ref<number>(0);
         // 获取表格数据
         const getData = () => {
-            fetchData(query).then((res) => {
+            fetchData(query).then((res: responseType) => {
                 tableData.value = res.list;
                 pageTotal.value = res.pageTotal || 50;
             });
         };
-        getData();
+
+       onMounted(() => {
+           getData();
+       })
 
         // 查询操作
         const handleSearch = () => {
@@ -108,13 +132,13 @@ export default {
             getData();
         };
         // 分页导航
-        const handlePageChange = (val) => {
+        const handlePageChange = (val: number) => {
             query.pageIndex = val;
             getData();
         };
 
         // 删除操作
-        const handleDelete = (index) => {
+        const handleDelete = (index: number) => {
             // 二次确认删除
             ElMessageBox.confirm("确定要删除吗？", "提示", {
                 type: "warning",
@@ -128,16 +152,14 @@ export default {
 
         // 表格编辑时弹窗和保存
         const editVisible = ref(false);
-        let form = reactive({
+        let form = reactive<formObj>({
             name: "",
             address: "",
         });
         let idx = -1;
-        const handleEdit = (index, row) => {
+        const handleEdit = (index: number, row: formObj) => {
             idx = index;
-            Object.keys(form).forEach((item) => {
-                form[item] = row[item];
-            });
+            form = Object.assign({}, row);
             editVisible.value = true;
         };
         const saveEdit = () => {

src/views/Dashboard.vue

@@ -114,7 +114,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
 import Schart from "vue-schart";
 import { reactive } from "vue";
 export default {

src/views/Donate.vue

@@ -16,7 +16,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
 export default {
     name: "donate"
 };

src/views/Editor.vue

@@ -20,7 +20,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
 import WangEditor from "wangEditor";
 import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
 export default {

src/views/Home.vue

@@ -17,13 +17,16 @@
         </div>
     </div>
 </template>
-<script>
-import { computed } from "vue";
+<script lang="ts">
+import { defineComponent, computed } from "vue";
 import { useStore } from "vuex";
 import vHeader from "../components/Header.vue";
 import vSidebar from "../components/Sidebar.vue";
 import vTags from "../components/Tags.vue";
-export default {
+
+import { tabItem } from "../types/tab";
+
+export default defineComponent({
     components: {
         vHeader,
         vSidebar,
@@ -32,7 +35,7 @@ export default {
     setup() {
         const store = useStore();
         const tagsList = computed(() =>
-            store.state.tagsList.map((item) => item.name)
+            store.state.tagsList.map((item: tabItem) => item.name)
         );
         const collapse = computed(() => store.state.collapse);
         return {
@@ -40,5 +43,5 @@ export default {
             collapse,
         };
     },
-};
+});
 </script>

src/views/I18n.vue

@@ -24,7 +24,7 @@
     </section>
 </template>
 
-<script>
+<script lang="ts">
 export default {
     name: "i18n"
 };

src/views/Icon.vue

@@ -39,9 +39,9 @@
     </div>
 </template>
 
-<script>
-import { computed, ref } from "vue";
-export default {
+<script lang="ts">
+import { defineComponent, computed, ref } from "vue";
+export default defineComponent({
     name: "icon",
     setup() {
         const iconList = [
@@ -171,7 +171,7 @@ export default {
             "search",
             "edit",
         ];
-        const keyword = ref("");
+        const keyword = ref<string>("");
         const list = computed(() => {
             return iconList.filter((item) => {
                 return item.indexOf(keyword.value) !== -1;
@@ -184,7 +184,7 @@ export default {
             list,
         };
     },
-};
+});
 </script>
 
 <style scoped>

src/views/Login.vue

@@ -27,16 +27,20 @@
     </div>
 </template>
 
-<script>
-import { ref, reactive } from "vue";
+<script lang="ts">
+import { defineComponent, ref, reactive } from "vue";
 import { useStore } from "vuex";
 import { useRouter } from "vue-router";
 import { ElMessage } from "element-plus";
 
-export default {
+interface LoginParam {
+    username: string,
+    password: string | number
+}
+export default defineComponent({
     setup() {
         const router = useRouter();
-        const param = reactive({
+        const param = reactive<LoginParam>({
             username: "admin",
             password: "123123",
         });
@@ -53,9 +57,9 @@ export default {
                 { required: true, message: "请输入密码", trigger: "blur" },
             ],
         };
-        const login = ref(null);
+        const login = ref<HTMLFormElement>();
         const submitForm = () => {
-            login.value.validate((valid) => {
+            login.value?.validate((valid: boolean) => {
                 if (valid) {
                     ElMessage.success("登录成功");
                     localStorage.setItem("ms_username", param.username);
@@ -77,7 +81,7 @@ export default {
             submitForm,
         };
     },
-};
+});
 </script>
 
 <style scoped>

src/views/Permission.vue

@@ -18,7 +18,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
 export default {
     name: "permission"
 };

src/views/Tabs.vue

@@ -70,7 +70,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
 import { ref, reactive } from "vue";
 export default {
     name: "tabs",
@@ -101,16 +101,16 @@ export default {
             ],
         });
 
-        const handleRead = (index) => {
+        const handleRead = (index: number) => {
             const item = state.unread.splice(index, 1);
             console.log(item);
             state.read = item.concat(state.read);
         };
-        const handleDel = (index) => {
+        const handleDel = (index: number) => {
             const item = state.read.splice(index, 1);
             state.recycle = item.concat(state.recycle);
         };
-        const handleRestore = (index) => {
+        const handleRestore = (index: number) => {
             const item = state.recycle.splice(index, 1);
             state.read = item.concat(state.read);
         };

src/views/Upload.vue

@@ -36,7 +36,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
 import { ref } from "vue";
 import VueCropper from "vue-cropperjs";
 import "cropperjs/dist/cropper.css";
@@ -47,21 +47,21 @@ export default {
         VueCropper,
     },
     setup() {
-        const imgSrc = ref("");
+        const imgSrc = ref<string>("");
         const cropImg = ref(defaultSrc);
-        const dialogVisible = ref(false);
+        const dialogVisible = ref<boolean>(false);
         const cropper = ref(null);
 
         const setImage = (e) => {
-            const file = e.target.files[0];
+            const file = e.target?.files[0];
             if (!file.type.includes("image/")) {
                 return;
             }
             const reader = new FileReader();
             reader.onload = (event) => {
                 dialogVisible.value = true;
-                imgSrc.value = event.target.result;
-                cropper.value && cropper.value.replace(event.target.result);
+                imgSrc.value = event.target?.result as string;
+                cropper.value && cropper.value.replace(event.target?.result);
             };
             reader.readAsDataURL(file);
         };

src/views/User.vue

@@ -61,19 +61,25 @@
     </div>
 </template>
 
-<script>
-import { reactive, ref } from "vue";
+<script lang="ts">
+import { defineComponent, reactive, ref } from "vue";
 import VueCropper from "vue-cropperjs";
 import "cropperjs/dist/cropper.css";
 import avatar from "../assets/img/img.jpg";
-export default {
+
+interface formData {
+    old: string,
+    new: string,
+    desc: string
+}
+export default defineComponent({
     name: "user",
     components: {
         VueCropper,
     },
     setup() {
         const name = localStorage.getItem("ms_username");
-        const form = reactive({
+        const form = reactive<formData>({
             old: "",
             new: "",
             desc: "不可能！我的代码怎么可能会有bug！",
@@ -84,7 +90,7 @@ export default {
         const imgSrc = ref("");
         const cropImg = ref("");
         const dialogVisible = ref(false);
-        const cropper = ref(null);
+        const cropper = ref();
 
         const showDialog = () => {
             dialogVisible.value = true;
@@ -92,15 +98,15 @@ export default {
         };
 
         const setImage = (e) => {
-            const file = e.target.files[0];
+            const file = e.target!.files[0];
             if (!file.type.includes("image/")) {
                 return;
             }
             const reader = new FileReader();
             reader.onload = (event) => {
                 dialogVisible.value = true;
-                imgSrc.value = event.target.result;
-                cropper.value && cropper.value.replace(event.target.result);
+                imgSrc.value = event.target?.result as string;
+                cropper.value && cropper.value.replace(event.target?.result as string);
             };
             reader.readAsDataURL(file);
         };
@@ -129,7 +135,7 @@ export default {
             saveAvatar,
         };
     },
-};
+});
 </script>
 
 <style scoped>

tsconfig.json

@@ -0,0 +1,15 @@
+{
+    "compilerOptions": {
+      "target": "esnext",
+      "module": "esnext",
+      // 这样就可以对 `this` 上的数据属性进行更严格的推断`
+      "strict": true,
+      "jsx": "preserve",
+      "moduleResolution": "node",
+      "paths": {
+        "@/*": [
+         "./*"
+        ]
+       }
+    }
+  }

vite.config.ts

@@ -1,9 +1,10 @@
 import vue from '@vitejs/plugin-vue'
+import {defineConfig} from 'vite'
 
-export default {
+export default defineConfig({
     base: './',
     plugins: [vue()],
     optimizeDeps: {
         include: ['schart.js']
     }
-}
+})