chore: convert js to ts (#405)

package-lock.json

@@ -41,9 +41,11 @@
       },
       "devDependencies": {
         "@antfu/eslint-config": "2.26.0",
+        "@types/buffer-from": "^1.1.3",
         "@types/codemirror": "^5.60.15",
-        "@types/marked": "^4.0.0",
+        "@types/crypto-js": "^4.2.2",
         "@types/node": "^22.4.1",
+        "@types/uuid": "^10.0.0",
         "@unocss/eslint-plugin": "^0.62.2",
         "@vitejs/plugin-vue": "^5.1.2",
         "autoprefixer": "^10.4.20",
@@ -913,7 +915,6 @@
     },
     "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
       "version": "1.3.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -2229,6 +2230,15 @@
         "vue": "^2.7.0 || ^3.0.0"
       }
     },
+    "node_modules/@types/buffer-from": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmmirror.com/@types/buffer-from/-/buffer-from-1.1.3.tgz",
+      "integrity": "sha512-2lq4YC9uLUMGHkl2IDtX4tCXSo2+hwMpOJcY1qiIk1kybc31rIlPyM1HCVJhkPFIo75a/pOVxqyvwuf5TpCG/w==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/codemirror": {
       "version": "5.60.15",
       "resolved": "https://registry.npmmirror.com/@types/codemirror/-/codemirror-5.60.15.tgz",
@@ -2238,6 +2248,12 @@
         "@types/tern": "*"
       }
     },
+    "node_modules/@types/crypto-js": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmmirror.com/@types/crypto-js/-/crypto-js-4.2.2.tgz",
+      "integrity": "sha512-sDOLlVbHhXpAUAL0YHDUUwDZf3iN4Bwi4W6a0W0b+QcAezUbRtH4FVb+9J4h+XFPW7l/gQ9F8qC7P+Ec4k8QVQ==",
+      "dev": true
+    },
     "node_modules/@types/eslint": {
       "version": "9.6.1",
       "resolved": "https://registry.npmmirror.com/@types/eslint/-/eslint-9.6.1.tgz",
@@ -2273,12 +2289,6 @@
         "@types/lodash": "*"
       }
     },
-    "node_modules/@types/marked": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmmirror.com/@types/marked/-/marked-4.3.2.tgz",
-      "integrity": "sha512-a79Yc3TOk6dGdituy8hmTTJXjOkZ7zsFYV10L337ttq/rec8lRMDBpV7fL3uLx6TgbFCa5DU/h8FmIBQPSbU0w==",
-      "dev": true
-    },
     "node_modules/@types/mdast": {
       "version": "3.0.15",
       "resolved": "https://registry.npmmirror.com/@types/mdast/-/mdast-3.0.15.tgz",
@@ -2318,6 +2328,12 @@
       "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
       "dev": true
     },
+    "node_modules/@types/uuid": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmmirror.com/@types/uuid/-/uuid-10.0.0.tgz",
+      "integrity": "sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ==",
+      "dev": true
+    },
     "node_modules/@types/web-bluetooth": {
       "version": "0.0.20",
       "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",

package.json

@@ -50,9 +50,11 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "2.26.0",
+    "@types/buffer-from": "^1.1.3",
     "@types/codemirror": "^5.60.15",
-    "@types/marked": "^4.0.0",
+    "@types/crypto-js": "^4.2.2",
     "@types/node": "^22.4.1",
+    "@types/uuid": "^10.0.0",
     "@unocss/eslint-plugin": "^0.62.2",
     "@vitejs/plugin-vue": "^5.1.2",
     "autoprefixer": "^10.4.20",

src/config/theme.ts

@@ -1,6 +1,6 @@
 import { toMerged } from 'es-toolkit'
 
-import type { Theme } from '@/types'
+import type { IConfigOption, Theme } from '@/types'
 
 const defaultTheme: Theme = {
   base: {
@@ -342,7 +342,12 @@ const graceTheme = toMerged(defaultTheme, {
   },
 })
 
-export const themeOptions = [
+export const themeMap = {
+  default: defaultTheme,
+  grace: graceTheme,
+}
+
+export const themeOptions: IConfigOption<keyof typeof themeMap>[] = [
   {
     label: `经典`,
     value: `default`,
@@ -354,8 +359,3 @@ export const themeOptions = [
     desc: ``,
   },
 ]
-
-export const themeMap = {
-  default: defaultTheme,
-  grace: graceTheme,
-}

src/stores/index.ts

@@ -31,7 +31,7 @@ export const useStore = defineStore(`store`, () => {
   const output = ref(``)
 
   // 文本字体
-  const theme = useStorage(addPrefix(`theme`), themeOptions[0].value)
+  const theme = useStorage<keyof typeof themeMap>(addPrefix(`theme`), themeOptions[0].value)
   // 文本字体
   const fontFamily = useStorage(`fonts`, fontFamilyOptions[0].value)
   // 文本大小
@@ -46,15 +46,15 @@ export const useStore = defineStore(`store`, () => {
   const fontSizeNumber = computed(() => fontSize.value.replace(`px`, ``))
 
   // 内容编辑器编辑器
-  const editor = ref(null)
+  const editor = ref<CodeMirror.EditorFromTextArea | null>(null)
   // 编辑区域内容
   const editorContent = useStorage(`__editor_content`, DEFAULT_CONTENT)
 
   // 格式化文档
   const formatContent = () => {
-    formatDoc(editor.value.getValue()).then((doc) => {
+    formatDoc((editor.value!).getValue()).then((doc) => {
-      editorContent.value = doc
+      editorContent.value = doc;
-      editor.value.setValue(doc)
+      (editor.value!).setValue(doc)
     })
   }
 
@@ -76,9 +76,9 @@ export const useStore = defineStore(`store`, () => {
   }
 
   // 自义定 CSS 编辑器
-  const cssEditor = ref(null)
+  const cssEditor = ref<CodeMirror.EditorFromTextArea | null>(null)
-  const setCssEditorValue = (content) => {
+  const setCssEditorValue = (content: string) => {
-    cssEditor.value.setValue(content)
+    (cssEditor.value!).setValue(content)
   }
   // 自定义 CSS 内容
   const cssContent = useStorage(`__css_content`, DEFAULT_CSS_CONTENT)
@@ -99,24 +99,24 @@ export const useStore = defineStore(`store`, () => {
   })
   const getCurrentTab = () => cssContentConfig.value.tabs.find((tab) => {
     return tab.name === cssContentConfig.value.active
-  })
+  })!
-  const tabChanged = (name) => {
+  const tabChanged = (name: string) => {
     cssContentConfig.value.active = name
     const content = cssContentConfig.value.tabs.find((tab) => {
       return tab.name === name
-    }).content
+    })!.content
     setCssEditorValue(content)
   }
 
   // 重命名 css 方案
-  const renameTab = (name) => {
+  const renameTab = (name: string) => {
-    const tab = getCurrentTab()
+    const tab = getCurrentTab()!
     tab.title = name
     tab.name = name
     cssContentConfig.value.active = name
   }
 
-  const addCssContentTab = (name) => {
+  const addCssContentTab = (name: string) => {
     cssContentConfig.value.tabs.push({
       name,
       title: name,
@@ -125,20 +125,21 @@ export const useStore = defineStore(`store`, () => {
     cssContentConfig.value.active = name
     setCssEditorValue(DEFAULT_CSS_CONTENT)
   }
-  const validatorTabName = (val) => {
+  const validatorTabName = (val: string) => {
     return cssContentConfig.value.tabs.every(({ name }) => name !== val)
   }
 
   const renderer = initRenderer({
     theme: customCssWithTemplate(css2json(getCurrentTab().content), primaryColor.value, customizeTheme(themeMap[theme.value], { fontSize: fontSizeNumber.value, color: primaryColor.value })),
     fonts: fontFamily.value,
+    size: fontSizeNumber.value,
   })
 
   // 更新编辑器
   const editorRefresh = () => {
     codeThemeChange()
     renderer.reset({ status: isCiteStatus.value, legend: legend.value })
-    let outputTemp = marked.parse(editor.value.getValue(0))
+    let outputTemp = marked.parse(editor.value!.getValue()) as string
 
     // 去除第一行的 margin-top
     outputTemp = outputTemp.replace(/(style=".*?)"/, `$1;margin-top: 0"`)
@@ -173,7 +174,7 @@ export const useStore = defineStore(`store`, () => {
 
   // 更新 CSS
   const updateCss = () => {
-    const json = css2json(cssEditor.value.getValue())
+    const json = css2json(cssEditor.value!.getValue())
     const newTheme = customCssWithTemplate(json, primaryColor.value, customizeTheme(themeMap[theme.value], { fontSize: fontSizeNumber.value, color: primaryColor.value }))
     renderer.setOptions({
       theme: newTheme,
@@ -182,7 +183,7 @@ export const useStore = defineStore(`store`, () => {
   }
   // 初始化 CSS 编辑器
   onMounted(() => {
-    const cssEditorDom = document.querySelector(`#cssEditor`)
+    const cssEditorDom = document.querySelector<HTMLTextAreaElement>(`#cssEditor`)!
     cssEditorDom.value = getCurrentTab().content
     const theme = isDark.value ? `darcula` : `xq-light`
     cssEditor.value = markRaw(
@@ -190,32 +191,32 @@ export const useStore = defineStore(`store`, () => {
         mode: `css`,
         theme,
         lineNumbers: false,
-        styleActiveLine: true,
         lineWrapping: true,
+        styleActiveLine: true,
         matchBrackets: true,
         autofocus: true,
         extraKeys: {
-          [`${shiftKey}-${altKey}-F`]: function autoFormat(editor) {
+          [`${shiftKey}-${altKey}-F`]: function autoFormat(editor: CodeMirror.Editor) {
             formatDoc(editor.getValue(), `css`).then((doc) => {
               getCurrentTab().content = doc
               editor.setValue(doc)
             })
           },
         },
-      }),
+      } as never),
     )
 
     // 自动提示
     cssEditor.value.on(`keyup`, (cm, e) => {
       if ((e.keyCode >= 65 && e.keyCode <= 90) || e.keyCode === 189) {
-        cm.showHint(e)
+        (cm as any).showHint(e)
       }
     })
 
     // 实时保存
     cssEditor.value.on(`update`, () => {
       updateCss()
-      getCurrentTab().content = cssEditor.value.getValue()
+      getCurrentTab().content = cssEditor.value!.getValue()
     })
   })
 
@@ -249,25 +250,25 @@ export const useStore = defineStore(`store`, () => {
       ],
     }
 
-    cssEditor.value.setValue(DEFAULT_CSS_CONTENT)
+    cssEditor.value!.setValue(DEFAULT_CSS_CONTENT)
 
     updateCss()
     editorRefresh()
   }
 
   // 为函数添加刷新编辑器的功能
-  const withAfterRefresh = fn => (...rest) => {
+  const withAfterRefresh = (fn: (...rest: any[]) => void) => (...rest: any[]) => {
     fn(...rest)
     editorRefresh()
   }
 
-  const getTheme = (size, color) => {
+  const getTheme = (size: string, color: string) => {
     const newTheme = themeMap[theme.value]
     const fontSize = size.replace(`px`, ``)
     return customCssWithTemplate(css2json(getCurrentTab().content), color, customizeTheme(newTheme, { fontSize, color }))
   }
 
-  const themeChanged = withAfterRefresh((newTheme) => {
+  const themeChanged = withAfterRefresh((newTheme: keyof typeof themeMap) => {
     renderer.setOptions({
       theme: customCssWithTemplate(css2json(getCurrentTab().content), primaryColor.value, customizeTheme(themeMap[newTheme], { fontSize: fontSizeNumber.value })),
     })
@@ -320,12 +321,12 @@ export const useStore = defineStore(`store`, () => {
   // 导出编辑器内容为 HTML，并且下载到本地
   const exportEditorContent2HTML = () => {
     exportHTML()
-    document.querySelector(`#output`).innerHTML = output.value
+    document.querySelector(`#output`)!.innerHTML = output.value
   }
 
   // 导出编辑器内容到本地
   const exportEditorContent2MD = () => {
-    downloadMD(editor.value.getValue())
+    downloadMD(editor.value!.getValue())
   }
 
   // 导入 Markdown 文档
@@ -336,7 +337,7 @@ export const useStore = defineStore(`store`, () => {
     input.name = `filename`
     input.accept = `.md`
     input.onchange = () => {
-      const file = input.files[0]
+      const file = input.files![0]
       if (!file) {
         return
       }
@@ -344,7 +345,7 @@ export const useStore = defineStore(`store`, () => {
       const reader = new FileReader()
       reader.readAsText(file)
       reader.onload = (event) => {
-        editor.value.setValue(event.target.result)
+        (editor.value!).setValue((event.target !).result as string)
         ElMessage.success(`文档导入成功`)
       }
     }
@@ -374,7 +375,7 @@ export const useStore = defineStore(`store`, () => {
         })
       })
       .catch(() => {
-        editor.value.focus()
+        (editor.value!).focus()
       })
   }
 

src/types/index.ts

@@ -1,7 +1,7 @@
 import type { PropertiesHyphen } from 'csstype'
 
-type Block = `h1` | `h2` | `h3` | `h4` | `p` | `blockquote` | `blockquote_p` | `code_pre` | `code` | `image` | `ol` | `ul` | `footnotes` | `figure` | `hr`
+export type Block = `h1` | `h2` | `h3` | `h4` | `p` | `blockquote` | `blockquote_p` | `code_pre` | `code` | `image` | `ol` | `ul` | `footnotes` | `figure` | `hr`
-type Inline = `listitem` | `codespan` | `link` | `wx_link` | `strong` | `table` | `thead` | `td` | `footnote` | `figcaption` | `em`
+export type Inline = `listitem` | `codespan` | `link` | `wx_link` | `strong` | `table` | `thead` | `td` | `footnote` | `figcaption` | `em`
 
 interface CustomCSSProperties {
   [`--md-primary-color`]?: string
@@ -20,14 +20,14 @@ export interface IOpts {
   theme: Theme
   fonts: string
   size: string
-  legend: string
+  legend?: string
-  status: boolean
+  status?: boolean
 }
 
 export type ThemeStyles = Record<Block | Inline, ExtendedProperties>
 
-export interface IConfigOption {
+export interface IConfigOption<VT = string> {
   label: string
-  value: string
+  value: VT
   desc: string
 }

src/utils/fetch.ts

@@ -8,7 +8,7 @@ const service = axios.create({
 
 service.interceptors.request.use(
   (config) => {
-    if (/^(?:post|put|delete)$/i.test(config.method)) {
+    if (/^(?:post|put|delete)$/i.test(`${config.method}`)) {
       if (config.data && config.data.upload) {
         config.headers[`Content-Type`] = `multipart/form-data`
       }

src/utils/file.ts

@@ -11,7 +11,7 @@ import { base64encode, safe64, utf16to8 } from '@/utils/tokenTools'
 import * as tokenTools from '@/utils/tokenTools'
 import { giteeConfig, githubConfig } from '@/config'
 
-function getConfig(useDefault, platform) {
+function getConfig(useDefault: boolean, platform: string) {
   if (useDefault) {
     // load default config file
     const config = platform === `github` ? githubConfig : giteeConfig
@@ -29,7 +29,7 @@ function getConfig(useDefault, platform) {
   }
 
   // load configuration from localStorage
-  const customConfig = JSON.parse(localStorage.getItem(`${platform}Config`))
+  const customConfig = JSON.parse(localStorage.getItem(`${platform}Config`)!)
 
   // split username/repo
   const repoUrl = customConfig.repo
@@ -62,7 +62,7 @@ function getDir() {
  * @param {string} filename 文件名
  * @returns {string} `时间戳+uuid`
  */
-function getDateFilename(filename) {
+function getDateFilename(filename: string) {
   const currentTimestamp = new Date().getTime()
   const fileSuffix = filename.split(`.`)[1]
   return `${currentTimestamp}-${uuidv4()}.${fileSuffix}`
@@ -72,7 +72,7 @@ function getDateFilename(filename) {
 // GitHub File Upload
 // -----------------------------------------------------------------------
 
-async function ghFileUpload(content, filename) {
+async function ghFileUpload(content: string, filename: string) {
   const useDefault = localStorage.getItem(`imgHost`) === `default`
   const { username, repo, branch, accessToken } = getConfig(
     useDefault,
@@ -81,7 +81,18 @@ async function ghFileUpload(content, filename) {
   const dir = getDir()
   const url = `https://api.github.com/repos/${username}/${repo}/contents/${dir}/`
   const dateFilename = getDateFilename(filename)
-  const res = await fetch({
+  const res = await fetch<{ content: {
+    download_url: string
+  } }, {
+      content: {
+        download_url: string
+      }
+      data: {
+        content: {
+          download_url: string
+        }
+      }
+    }>({
     url: url + dateFilename,
     method: `put`,
     headers: {
@@ -95,7 +106,7 @@ async function ghFileUpload(content, filename) {
   })
   const githubResourceUrl = `raw.githubusercontent.com/${username}/${repo}/${branch}/`
   const cdnResourceUrl = `fastly.jsdelivr.net/gh/${username}/${repo}@${branch}/`
-  res.content = res.data?.content || res.content
+  res.content = res.data.content || res.content
   return useDefault
     ? res.content.download_url.replace(githubResourceUrl, cdnResourceUrl)
     : res.content.download_url
@@ -105,13 +116,24 @@ async function ghFileUpload(content, filename) {
 // Gitee File Upload
 // -----------------------------------------------------------------------
 
-async function giteeUpload(content, filename) {
+async function giteeUpload(content: any, filename: string) {
   const useDefault = localStorage.getItem(`imgHost`) === `default`
   const { username, repo, branch, accessToken } = getConfig(useDefault, `gitee`)
   const dir = getDir()
   const dateFilename = getDateFilename(filename)
   const url = `https://gitee.com/api/v5/repos/${username}/${repo}/contents/${dir}/${dateFilename}`
-  const res = await fetch({
+  const res = await fetch<{ content: {
+    download_url: string
+  } }, {
+      content: {
+        download_url: string
+      }
+      data: {
+        content: {
+          download_url: string
+        }
+      }
+    }>({
     url,
     method: `POST`,
     data: {
@@ -129,7 +151,10 @@ async function giteeUpload(content, filename) {
 // Qiniu File Upload
 // -----------------------------------------------------------------------
 
-function getQiniuToken(accessKey, secretKey, putPolicy) {
+function getQiniuToken(accessKey: string, secretKey: string, putPolicy: {
+  scope: string
+  deadline: number
+}) {
   const policy = JSON.stringify(putPolicy)
   const encoded = base64encode(utf16to8(policy))
   const hash = CryptoJS.HmacSHA1(encoded, secretKey)
@@ -137,9 +162,9 @@ function getQiniuToken(accessKey, secretKey, putPolicy) {
   return `${accessKey}:${safe64(encodedSigned)}:${encoded}`
 }
 
-async function qiniuUpload(file) {
+async function qiniuUpload(file: File) {
   const { accessKey, secretKey, bucket, region, path, domain } = JSON.parse(
-    localStorage.getItem(`qiniuConfig`),
+    localStorage.getItem(`qiniuConfig`)!,
   )
   const token = getQiniuToken(accessKey, secretKey, {
     scope: bucket,
@@ -167,10 +192,10 @@ async function qiniuUpload(file) {
 // AliOSS File Upload
 // -----------------------------------------------------------------------
 
-async function aliOSSFileUpload(file) {
+async function aliOSSFileUpload(file: File) {
   const dateFilename = getDateFilename(file.name)
   const { region, bucket, accessKeyId, accessKeySecret, useSSL, cdnHost, path }
-    = JSON.parse(localStorage.getItem(`aliOSSConfig`))
+    = JSON.parse(localStorage.getItem(`aliOSSConfig`)!)
   const dir = path ? `${path}/${dateFilename}` : dateFilename
   const secure = useSSL === undefined || useSSL
   const protocol = secure ? `https` : `http`
@@ -195,10 +220,10 @@ async function aliOSSFileUpload(file) {
 // TxCOS File Upload
 // -----------------------------------------------------------------------
 
-async function txCOSFileUpload(file) {
+async function txCOSFileUpload(file: File) {
   const dateFilename = getDateFilename(file.name)
   const { secretId, secretKey, bucket, region, path, cdnHost } = JSON.parse(
-    localStorage.getItem(`txCOSConfig`),
+    localStorage.getItem(`txCOSConfig`)!,
   )
   const cos = new COS({
     SecretId: secretId,
@@ -235,13 +260,13 @@ async function txCOSFileUpload(file) {
 // Minio File Upload
 // -----------------------------------------------------------------------
 
-async function minioFileUpload(content, filename) {
+async function minioFileUpload(content: string, filename: string) {
   const dateFilename = getDateFilename(filename)
   const { endpoint, port, useSSL, bucket, accessKey, secretKey } = JSON.parse(
-    localStorage.getItem(`minioConfig`),
+    localStorage.getItem(`minioConfig`)!,
   )
   const buffer = Buffer(content, `base64`)
-  const conf = {
+  const conf: Minio.ClientOptions = {
     endPoint: endpoint,
     useSSL,
     accessKey,
@@ -278,7 +303,7 @@ async function minioFileUpload(content, filename) {
 // formCustom File Upload
 // -----------------------------------------------------------------------
 
-async function formCustomUpload(content, file) {
+async function formCustomUpload(content: string, file: File) {
   const str = `
     async (CUSTOM_ARG) => {
       ${localStorage.getItem(`formCustomConfig`)}
@@ -304,16 +329,18 @@ async function formCustomUpload(content, file) {
       errCb: reject, // 上传失败调用的函数
     }
     // eslint-disable-next-line no-eval
-    eval(str)(exportObj).catch((err) => {
+    eval(str)(exportObj).catch((err: any) => {
       console.error(err)
       reject(err)
     })
   })
 }
 
-function fileUpload(content, file) {
+function fileUpload(content: string, file: File) {
   const imgHost = localStorage.getItem(`imgHost`)
-  !imgHost && localStorage.setItem(`imgHost`, `default`)
+  if (!imgHost) {
+    localStorage.setItem(`imgHost`, `default`)
+  }
   switch (imgHost) {
     case `aliOSS`:
       return aliOSSFileUpload(file)

src/utils/index.ts

@@ -5,31 +5,36 @@ import * as prettierPluginMarkdown from 'prettier/plugins/markdown'
 import * as prettierPluginBabel from 'prettier/plugins/babel'
 import * as prettierPluginEstree from 'prettier/plugins/estree'
 import * as prettierPluginCss from 'prettier/plugins/postcss'
+import type { PropertiesHyphen } from 'csstype'
 import { prefix } from '@/config'
+import type { Block, Inline, Theme } from '@/types'
 
-export function addPrefix(str) {
+export function addPrefix(str: string) {
   return `${prefix}__${str}`
 }
 
-export function customizeTheme(theme, options) {
+export function customizeTheme(theme: Theme, options: {
+  fontSize?: string
+  color?: string
+}) {
   const newTheme = JSON.parse(JSON.stringify(theme))
   const { fontSize, color } = options
   if (fontSize) {
     for (let i = 1; i <= 4; i++) {
       const v = newTheme.block[`h${i}`][`font-size`]
-      newTheme.block[`h${i}`][`font-size`] = `${fontSize * Number.parseFloat(v)}px`
+      newTheme.block[`h${i}`][`font-size`] = `${Number(fontSize) * Number.parseFloat(v)}px`
     }
   }
   if (color) {
     newTheme.base[`--md-primary-color`] = color
   }
-  return newTheme
+  return newTheme as Theme
 }
 
-export function customCssWithTemplate(jsonString, color, theme) {
+export function customCssWithTemplate(jsonString: Partial<Record<Block | Inline, PropertiesHyphen>>, color: string, theme: Theme) {
   const newTheme = customizeTheme(theme, { color })
 
-  const mergeProperties = (target, source, keys) => {
+  const mergeProperties = <T extends Block | Inline = Block>(target: Record<T, PropertiesHyphen>, source: Partial<Record<Block | Inline, PropertiesHyphen>>, keys: T[]) => {
     keys.forEach((key) => {
       if (source[key]) {
         target[key] = Object.assign(target[key] || {}, source[key])
@@ -37,7 +42,7 @@ export function customCssWithTemplate(jsonString, color, theme) {
     })
   }
 
-  const blockKeys = [
+  const blockKeys: Block[] = [
     `h1`,
     `h2`,
     `h3`,
@@ -52,7 +57,7 @@ export function customCssWithTemplate(jsonString, color, theme) {
     `ul`,
     `ol`,
   ]
-  const inlineKeys = [`strong`, `codespan`, `link`, `wx_link`, `listitem`]
+  const inlineKeys: Inline[] = [`strong`, `codespan`, `link`, `wx_link`, `listitem`]
 
   mergeProperties(newTheme.block, jsonString, blockKeys)
   mergeProperties(newTheme.inline, jsonString, inlineKeys)
@@ -65,16 +70,16 @@ export function customCssWithTemplate(jsonString, color, theme) {
  * @param {string} css - CSS 字符串
  * @returns {object} - JSON 格式的 CSS
  */
-export function css2json(css) {
+export function css2json(css: string): Partial<Record<Block | Inline, PropertiesHyphen>> {
   // 去除所有 CSS 注释
   css = css.replace(/\/\*[\s\S]*?\*\//g, ``)
 
-  const json = {}
+  const json: Partial<Record<Block | Inline, PropertiesHyphen>> = {}
 
   // 辅助函数：将声明数组转换为对象
-  const toObject = array =>
+  const toObject = (array: any[]) =>
-    array.reduce((obj, item) => {
+    array.reduce<{ [k: string]: string }>((obj, item) => {
-      const [property, value] = item.split(`:`).map(part => part.trim())
+      const [property, value] = item.split(`:`).map((part: string) => part.trim())
       if (property)
         obj[property] = value
       return obj
@@ -93,7 +98,7 @@ export function css2json(css) {
     // 获取选择器并去除空格
     const selectors = css.substring(0, lbracket)
       .split(`,`)
-      .map(selector => selector.trim())
+      .map(selector => selector.trim()) as (Block | Inline)[]
 
     const declarationObj = toObject(declarations)
 
@@ -106,6 +111,8 @@ export function css2json(css) {
     css = css.slice(rbracket + 1).trim()
   }
 
+  console.log(`json`, json)
+
   return json
 }
 
@@ -115,7 +122,7 @@ export function css2json(css) {
  * @param {'markdown' | 'css'} [type] - 内容类型，决定使用的解析器，默认为'markdown'
  * @returns {Promise<string>} - 格式化后的内容
  */
-export async function formatDoc(content, type = `markdown`) {
+export async function formatDoc(content: string, type: `markdown` | `css` = `markdown`) {
   const plugins = {
     markdown: [prettierPluginMarkdown, prettierPluginBabel, prettierPluginEstree],
     css: [prettierPluginCss],
@@ -132,7 +139,7 @@ export async function formatDoc(content, type = `markdown`) {
  * 导出原始 Markdown 文档
  * @param {string} doc - 文档内容
  */
-export function downloadMD(doc) {
+export function downloadMD(doc: string) {
   const downLink = document.createElement(`a`)
 
   downLink.download = `content.md`
@@ -149,7 +156,7 @@ export function downloadMD(doc) {
  * 导出 HTML 生成内容
  */
 export function exportHTML() {
-  const element = document.querySelector(`#output`)
+  const element = document.querySelector(`#output`)!
   setStyles(element)
   const htmlStr = element.innerHTML
 
@@ -166,14 +173,14 @@ export function exportHTML() {
   downLink.click()
   document.body.removeChild(downLink)
 
-  function setStyles(element) {
+  function setStyles(element: Element) {
     /**
      * 获取一个 DOM 元素的所有样式，
      * @param {DOM 元素} element DOM 元素
      * @param {排除的属性} excludes 如果某些属性对结果有不良影响，可以使用这个参数来排除
      * @returns 行内样式拼接结果
      */
-    function getElementStyles(element, excludes = [`width`, `height`]) {
+    function getElementStyles(element: Element, excludes = [`width`, `height`]) {
       const styles = getComputedStyle(element, null)
       return Object.entries(styles)
         .filter(
@@ -188,15 +195,13 @@ export function exportHTML() {
       case isCode(element):
       case isSpan(element):
         element.setAttribute(`style`, getElementStyles(element))
-      // eslint-disable-next-line no-fallthrough
-      default:
     }
     if (element.children.length) {
       Array.from(element.children).forEach(child => setStyles(child))
     }
 
     // 判断是否是包裹代码块的 pre 元素
-    function isPre(element) {
+    function isPre(element: Element) {
       return (
         element.tagName === `PRE`
         && Array.from(element.classList).includes(`code__pre`)
@@ -204,16 +209,19 @@ export function exportHTML() {
     }
 
     // 判断是否是包裹代码块的 code 元素
-    function isCode(element) {
+    function isCode(element: Element | null) {
+      if (element == null) {
+        return false
+      }
       return element.tagName === `CODE`
     }
 
     // 判断是否是包裹代码字符的 span 元素
-    function isSpan(element) {
+    function isSpan(element: Element) {
       return (
         element.tagName === `SPAN`
         && (isCode(element.parentElement)
-        || isCode(element.parentElement.parentElement))
+        || isCode((element.parentElement!).parentElement))
       )
     }
   }
@@ -228,7 +236,7 @@ export function exportHTML() {
  * @param {number} options.cols - 列数
  * @returns {string} 生成的 Markdown 表格
  */
-export function createTable({ data, rows, cols }) {
+export function createTable({ data, rows, cols }: { data: { [k: string]: string }, rows: number, cols: number }) {
   let table = ``
   for (let i = 0; i < rows + 2; ++i) {
     table += `| `
@@ -244,16 +252,16 @@ export function createTable({ data, rows, cols }) {
   return table
 }
 
-export function toBase64(file) {
+export function toBase64(file: Blob) {
   return new Promise((resolve, reject) => {
     const reader = new FileReader()
     reader.readAsDataURL(file)
-    reader.onload = () => resolve(reader.result.split(`,`).pop())
+    reader.onload = () => resolve((reader.result as string).split(`,`).pop())
     reader.onerror = error => reject(error)
   })
 }
 
-export function checkImage(file) {
+export function checkImage(file: File) {
   // 检查文件名后缀
   const isValidSuffix = /\.(?:gif|jpe?g|png)$/i.test(file.name)
   if (!isValidSuffix) {
@@ -277,27 +285,27 @@ export function checkImage(file) {
 
 /**
  * 移除左边多余空格
- * @param {*} str
+ * @param {string} str
  * @returns string
  */
-export function removeLeft(str) {
+export function removeLeft(str: string) {
   const lines = str.split(`\n`)
   // 获取应该删除的空白符数量
   const minSpaceNum = lines
     .filter(item => item.trim())
-    .map(item => item.match(/(^\s+)?/)[0].length)
+    .map(item => (item.match(/(^\s+)?/)!)[0].length)
     .sort((a, b) => a - b)[0]
   // 删除空白符
   return lines.map(item => item.slice(minSpaceNum)).join(`\n`)
 }
 
 export function solveWeChatImage() {
-  const clipboardDiv = document.getElementById(`output`)
+  const clipboardDiv = document.getElementById(`output`)!
   const images = clipboardDiv.getElementsByTagName(`img`)
   for (let i = 0; i < images.length; i++) {
     const image = images[i]
-    const width = image.getAttribute(`width`)
+    const width = image.getAttribute(`width`)!
-    const height = image.getAttribute(`height`)
+    const height = image.getAttribute(`height`)!
     image.removeAttribute(`width`)
     image.removeAttribute(`height`)
     image.style.width = width
@@ -305,7 +313,7 @@ export function solveWeChatImage() {
   }
 }
 
-export function mergeCss(html) {
+export function mergeCss(html: string) {
   return juice(html, {
     inlinePseudoElements: true,
     preserveImportant: true,

src/utils/renderer.ts

@@ -109,13 +109,13 @@ export function initRenderer(opts: IOpts) {
     return footnoteIndex
   }
 
-  function reset(newOpts: IOpts): void {
+  function reset(newOpts: Partial<IOpts>): void {
     footnotes.length = 0
     footnoteIndex = 0
     setOptions(newOpts)
   }
 
-  function setOptions(newOpts: IOpts): void {
+  function setOptions(newOpts: Partial<IOpts>): void {
     opts = { ...opts, ...newOpts }
     styleMapping = buildTheme(opts)
   }
@@ -197,7 +197,7 @@ export function initRenderer(opts: IOpts) {
     },
 
     image({ href, title, text }: Tokens.Image): string {
-      const subText = styledContent(`figcaption`, transform(opts.legend, text, title))
+      const subText = styledContent(`figcaption`, transform(opts.legend!, text, title))
       const figureStyles = styles(`figure`)
       const imgStyles = styles(`image`)
       return `<figure ${figureStyles}><img ${imgStyles} src="${href}" title="${title}" alt="${text}"/>${subText}</figure>`

src/utils/tokenTools.ts

@@ -1,4 +1,4 @@
-export function utf16to8(str) {
+export function utf16to8(str: string) {
   let out = ``
   const len = str.length
 
@@ -22,7 +22,7 @@ export function utf16to8(str) {
   return out
 }
 
-export function utf8to16(str) {
+export function utf8to16(str: string) {
   let out = ``
   let i = 0
   const len = str.length
@@ -196,7 +196,7 @@ const base64DecodeChars = [
   -1,
 ]
 
-export function base64encode(str) {
+export function base64encode(str: string) {
   let out = ``
   let i = 0
   const len = str.length
@@ -232,7 +232,7 @@ export function base64encode(str) {
   return out
 }
 
-export function base64decode(str) {
+export function base64decode(str: string) {
   let c1, c2, c3, c4
   let i = 0
   const len = str.length
@@ -283,7 +283,7 @@ export function base64decode(str) {
   return out
 }
 
-export function safe64(base64) {
+export function safe64(base64: string) {
   base64 = base64.replace(/\+/g, `-`)
   base64 = base64.replace(/\//g, `_`)
   return base64