chore: convert js to ts (#410)

index.html

@@ -93,7 +93,7 @@
       }
     </script>
     <script id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
-    <script type="module" src="/src/main.js"></script>
+    <script type="module" src="/src/main.ts"></script>
   </body>
   <script src="https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/gh/wechatsync/article-syncjs@latest/dist/main.js"></script>
 </html>

src/App.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import CodemirrorEditor from '@/views/CodemirrorEditor.vue'
 </script>
 

src/components/CodemirrorEditor/CssEditor.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { ElMessage, ElMessageBox } from 'element-plus'
 
 import { useStore } from '@/stores'
@@ -23,7 +23,7 @@ function editTabName() {
     })
 }
 
-function handleTabsEdit(targetName, action) {
+function handleTabsEdit(targetName: string, action: string) {
   if (action === `add`) {
     ElMessageBox.prompt(`请输入方案名称`, `新建自定义 CSS`, {
       confirmButtonText: `确认`,
@@ -86,7 +86,7 @@ function handleTabsEdit(targetName, action) {
             <el-icon
               v-if="store.cssContentConfig.active === item.name"
               class="ml-1"
-              @click="editTabName(item.name)"
+              @click="editTabName()"
             >
               <ElIconEditPen />
             </el-icon>

src/components/CodemirrorEditor/EditorHeader/AboutDialog.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import {
   Dialog,
   DialogContent,
@@ -16,7 +16,7 @@ const props = defineProps({
 
 const emit = defineEmits([`close`])
 
-function onUpdate(val) {
+function onUpdate(val: boolean) {
   if (!val) {
     emit(`close`)
   }
@@ -28,7 +28,7 @@ const links = [
   { label: `GitCode 仓库`, url: `https://gitcode.com/doocs/md` },
 ]
 
-function onRedirect(url) {
+function onRedirect(url: string) {
   window.open(url, `_blank`)
 }
 </script>

src/components/CodemirrorEditor/EditorHeader/EditDropdown.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { useStore } from '@/stores'
 
 const store = useStore()

src/components/CodemirrorEditor/EditorHeader/FileDropdown.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { storeToRefs } from 'pinia'
 
 import { useStore } from '@/stores'

src/components/CodemirrorEditor/EditorHeader/HelpDropdown.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { ref } from 'vue'
 
 import AboutDialog from './AboutDialog.vue'

src/components/CodemirrorEditor/EditorHeader/PostInfo.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import {
@@ -16,22 +16,23 @@ const { output } = storeToRefs(store)
 
 const dialogVisible = ref(false)
 
-const form = ref({
+const form = ref<any>({
   title: ``,
   desc: ``,
   thumb: ``,
   content: ``,
+  auto: {},
 })
 
 function prePost() {
   let auto = {}
   try {
     auto = {
-      thumb: document.querySelector(`#output img`)?.src,
+      thumb: document.querySelector<HTMLImageElement>(`#output img`)?.src,
       title: [1, 2, 3, 4, 5, 6]
-        .map(h => document.querySelector(`#output h${h}`))
+        .map(h => document.querySelector(`#output h${h}`)!)
         .filter(h => h)[0].textContent,
-      desc: document.querySelector(`#output p`).textContent,
+      desc: document.querySelector(`#output p`)!.textContent,
       content: output.value,
     }
   }
@@ -45,18 +46,24 @@ function prePost() {
   dialogVisible.value = true
 }
 
+declare global {
+  interface Window {
+    syncPost: (data: { thumb: string, title: string, desc: string, content: string }) => void
+  }
+}
+
 function post() {
-  dialogVisible.value = false
+  dialogVisible.value = false;
   // 使用 window.$syncer 可以检测是否安装插件
-  window.syncPost({
+  (window.syncPost)({
     thumb: form.value.thumb || form.value.auto.thumb,
     title: form.value.title || form.value.auto.title,
     desc: form.value.desc || form.value.auto.desc,
     content: form.value.content || form.value.auto.content,
   })
 }
 
-function onUpdate(val) {
+function onUpdate(val: boolean) {
   if (!val) {
     dialogVisible.value = false
   }

src/components/CodemirrorEditor/EditorHeader/StyleDropdown.vue

@@ -1,15 +1,13 @@
-<script setup>
+<script setup lang="ts">
 import { nextTick, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 
 import StyleOptionMenu from './StyleOptionMenu.vue'
-
 import {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
 } from '@/components/ui/hover-card'
-
 import {
   codeBlockThemeOptions,
   colorOptions,
@@ -45,22 +43,22 @@ const {
   toggleShowCssEditor,
 } = store
 
-const colorPicker = ref(null)
+const colorPicker = ref<HTMLElement & { show: () => void } | null>(null)
 
 function showPicker() {
-  colorPicker.value.show()
+  colorPicker.value?.show()
 }
 
 // 自定义CSS样式
 function customStyle() {
   toggleShowCssEditor()
   nextTick(() => {
     if (!cssEditor.value) {
-      cssEditor.value.refresh()
+      cssEditor.value!.refresh()
     }
   })
   setTimeout(() => {
-    cssEditor.value.refresh()
+    cssEditor.value!.refresh()
   }, 50)
 }
 </script>
@@ -114,7 +112,7 @@ function customStyle() {
             自定义主题色
           </HoverCardTrigger>
           <HoverCardContent side="right" class="w-min">
-            <el-color-picker
+            <ElColorPicker
               ref="colorPicker"
               v-model="primaryColor"
               :teleported="false"

src/components/CodemirrorEditor/EditorHeader/StyleOptionMenu.vue

@@ -1,31 +1,20 @@
-<script setup>
+<script setup lang="ts">
 import {
   MenubarItem,
   MenubarSub,
   MenubarSubContent,
   MenubarSubTrigger,
 } from '@/components/ui/menubar'
+import type { IConfigOption } from '@/types'
 
-const props = defineProps({
-  title: {
-    type: String,
-    required: true,
-  },
-  options: {
-    type: Array,
-    required: true,
-  },
-  current: {
-    type: String,
-    required: true,
-  },
-  change: {
-    type: Function,
-    required: true,
-  },
-})
+const props = defineProps<{
+  title: string
+  options: IConfigOption[]
+  current: string
+  change: <T>(val: T) => void
+}>()
 
-function setStyle(title, value) {
+function setStyle(title: string, value: string) {
   switch (title) {
     case `字体`:
       return { fontFamily: value }

src/components/CodemirrorEditor/EditorHeader/index.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { nextTick } from 'vue'
 import { storeToRefs } from 'pinia'
 import { ElNotification } from 'element-plus'
@@ -78,7 +78,7 @@ const formatItems = [
     kbd: [altSign, shiftSign, `F`],
     emitArgs: [`formatContent`],
   },
-]
+] as const
 
 const store = useStore()
 
@@ -90,15 +90,15 @@ const { toggleDark, editorRefresh, citeStatusChanged } = store
 function copy() {
   emit(`startCopy`)
   setTimeout(() => {
-    function modifyHtmlStructure(htmlString) {
+    function modifyHtmlStructure(htmlString: string) {
       // 创建一个 div 元素来暂存原始 HTML 字符串
       const tempDiv = document.createElement(`div`)
       tempDiv.innerHTML = htmlString
 
       const originalItems = tempDiv.querySelectorAll(`li > ul, li > ol`)
 
       originalItems.forEach((originalItem) => {
-        originalItem.parentElement.insertAdjacentElement(`afterend`, originalItem)
+        originalItem.parentElement!.insertAdjacentElement(`afterend`, originalItem)
       })
 
       // 返回修改后的 HTML 字符串
@@ -114,7 +114,7 @@ function copy() {
     nextTick(() => {
       solveWeChatImage()
 
-      const clipboardDiv = document.getElementById(`output`)
+      const clipboardDiv = document.getElementById(`output`)!
       clipboardDiv.innerHTML = mergeCss(clipboardDiv.innerHTML)
       clipboardDiv.innerHTML = modifyHtmlStructure(clipboardDiv.innerHTML)
       clipboardDiv.innerHTML = clipboardDiv.innerHTML
@@ -125,14 +125,14 @@ function copy() {
         .replaceAll(`var(--md-primary-color)`, primaryColor.value)
         .replaceAll(/--md-primary-color:.+?;/g, ``)
       clipboardDiv.focus()
-      window.getSelection().removeAllRanges()
+      window.getSelection()!.removeAllRanges()
       const range = document.createRange()
 
-      range.setStartBefore(clipboardDiv.firstChild)
-      range.setEndAfter(clipboardDiv.lastChild)
-      window.getSelection().addRange(range)
+      range.setStartBefore(clipboardDiv.firstChild!)
+      range.setEndAfter(clipboardDiv.lastChild!)
+      window.getSelection()!.addRange(range)
       document.execCommand(`copy`)
-      window.getSelection().removeAllRanges()
+      window.getSelection()!.removeAllRanges()
       clipboardDiv.innerHTML = output.value
 
       if (isBeforeDark) {
@@ -165,8 +165,8 @@ function copy() {
         <MenubarContent class="w-60" align="start">
           <MenubarItem
             v-for="{ label, kbd, emitArgs } in formatItems"
-            :key="kbd"
-            @click="$emit(...emitArgs)"
+            :key="label"
+            @click="emitArgs[0] === 'addFormat' ? $emit(emitArgs[0], emitArgs[1]) : $emit(emitArgs[0])"
           >
             <el-icon class="mr-2 h-4 w-4" />
             {{ label }}

src/components/CodemirrorEditor/InsertFormDialog.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { ref, toRaw } from 'vue'
 import {
   Dialog,
@@ -17,7 +17,7 @@ const { toggleShowInsertFormDialog } = store
 
 const rowNum = ref(3)
 const colNum = ref(3)
-const tableData = ref({})
+const tableData = ref<Record<string, string>>({})
 
 function resetVal() {
   rowNum.value = 3
@@ -32,12 +32,12 @@ function insertTable() {
     cols: colNum.value,
     data: tableData.value,
   })
-  toRaw(store.editor).replaceSelection(`\n${table}\n`, `end`)
+  toRaw(store.editor!).replaceSelection(`\n${table}\n`, `end`)
   resetVal()
   toggleShowInsertFormDialog()
 }
 
-function onUpdate(val) {
+function onUpdate(val: boolean) {
   if (!val) {
     toggleShowInsertFormDialog(false)
   }