refactor: Migrate JavaScript files to TypeScript (#1223)

jsconfig.json

@@ -6,7 +6,7 @@
       "@/*": ["packages/*"],
       "@opentiny/tiny-engine": ["packages/design-core/index.js"],
       "@opentiny/tiny-engine-meta-register": ["packages/register/src/index.js"],
-      "@opentiny/tiny-engine-canvas": ["packages/canvas/src/index.js"],
+      "@opentiny/tiny-engine-canvas": ["packages/canvas/src/index"],
       "@opentiny/tiny-engine-plugin-materials": ["packages/plugins/materials/index"],
       "@opentiny/tiny-engine-plugin-state": ["packages/plugins/state/index"],
       "@opentiny/tiny-engine-plugin-script": ["packages/plugins/script/index"],
@@ -61,7 +61,7 @@
       "@opentiny/tiny-engine-toolbar-theme-switch/*": ["packages/toolbars/themeSwitch/*"],
       "@opentiny/tiny-engine-toolbar-save/*": ["packages/toolbars/save/*"],
       "@opentiny/tiny-engine-svgs/*": ["packages/svgs/*"],
-      "@opentiny/tiny-engine-utils": ["packages/utils/src/index.js"],
+      "@opentiny/tiny-engine-utils": ["packages/utils/src/index"],
       "@opentiny/tiny-engine-webcomponent-core": ["packages/webcomponent/src/lib"],
       "@opentiny/tiny-engine-i18n-host": ["packages/i18n/src/lib"]
     }

packages/build/vite-config/src/vite-plugins/devAliasPlugin.js

@@ -11,11 +11,11 @@ const getDevAlias = (useSourceAlias) => {
   const defaultBasePath = path.resolve(process.cwd(), '..') // parent path
   const basePath = useSourceAlias.basePath || defaultBasePath
   return {
-    '@opentiny/tiny-engine/canvas': path.resolve(basePath, 'packages/design-core/src/canvas/canvas.js'),
+    '@opentiny/tiny-engine/canvas': path.resolve(basePath, 'packages/design-core/src/canvas/canvas.ts'),
     '@opentiny/tiny-engine': path.resolve(basePath, 'packages/design-core/index.js'),
     '@opentiny/tiny-engine-common/component': path.resolve(basePath, 'packages/common/component'),
     '@opentiny/tiny-engine-common/js': path.resolve(basePath, 'packages/common/js'),
-    '@opentiny/tiny-engine-common': path.resolve(basePath, 'packages/common/index.js'),
+    '@opentiny/tiny-engine-common': path.resolve(basePath, 'packages/common/index.ts'),
     '@opentiny/tiny-engine-plugin-materials': path.resolve(basePath, 'packages/plugins/materials/index.js'),
     '@opentiny/tiny-engine-plugin-block': path.resolve(basePath, 'packages/plugins/block/index.js'),
     '@opentiny/tiny-engine-plugin-state': path.resolve(basePath, 'packages/plugins/state/index.js'),
@@ -29,39 +29,39 @@ const getDevAlias = (useSourceAlias) => {
     '@opentiny/tiny-engine-plugin-bridge': path.resolve(basePath, 'packages/plugins/bridge/index.js'),
     '@opentiny/tiny-engine-plugin-tutorial': path.resolve(basePath, 'packages/plugins/tutorial/index.js'),
     '@opentiny/tiny-engine-plugin-robot': path.resolve(basePath, 'packages/plugins/robot/index.js'),
-    '@opentiny/tiny-engine-settings-panel': path.resolve(basePath, 'packages/settings/panel/index.js'),
-    '@opentiny/tiny-engine-setting-events': path.resolve(basePath, 'packages/settings/events/index.js'),
-    '@opentiny/tiny-engine-setting-props': path.resolve(basePath, 'packages/settings/props/index.js'),
-    '@opentiny/tiny-engine-setting-styles': path.resolve(basePath, 'packages/settings/styles/index.js'),
-    '@opentiny/tiny-engine-toolbar-breadcrumb': path.resolve(basePath, 'packages/toolbars/breadcrumb/index.js'),
-    '@opentiny/tiny-engine-toolbar-fullscreen': path.resolve(basePath, 'packages/toolbars/fullscreen/index.js'),
-    '@opentiny/tiny-engine-toolbar-lang': path.resolve(basePath, 'packages/toolbars/lang/index.js'),
-    '@opentiny/tiny-engine-toolbar-view-setting': path.resolve(basePath, 'packages/toolbars/view-setting/index.js'),
-    '@opentiny/tiny-engine-toolbar-layout': path.resolve(basePath, 'packages/toolbars/layout/index.js'),
-    '@opentiny/tiny-engine-toolbar-lock': path.resolve(basePath, 'packages/toolbars/lock/index.js'),
-    '@opentiny/tiny-engine-toolbar-logo': path.resolve(basePath, 'packages/toolbars/logo/index.js'),
-    '@opentiny/tiny-engine-toolbar-logout': path.resolve(basePath, 'packages/toolbars/logout/index.js'),
-    '@opentiny/tiny-engine-toolbar-media': path.resolve(basePath, 'packages/toolbars/media/index.js'),
-    '@opentiny/tiny-engine-toolbar-preview': path.resolve(basePath, 'packages/toolbars/preview/index.js'),
-    '@opentiny/tiny-engine-toolbar-generate-code': path.resolve(basePath, 'packages/toolbars/generate-code/index.js'),
-    '@opentiny/tiny-engine-toolbar-refresh': path.resolve(basePath, 'packages/toolbars/refresh/index.js'),
-    '@opentiny/tiny-engine-toolbar-redoundo': path.resolve(basePath, 'packages/toolbars/redoundo/index.js'),
-    '@opentiny/tiny-engine-toolbar-clean': path.resolve(basePath, 'packages/toolbars/clean/index.js'),
-    '@opentiny/tiny-engine-toolbar-theme-switch': path.resolve(basePath, 'packages/toolbars/themeSwitch/index.js'),
-    '@opentiny/tiny-engine-toolbar-save': path.resolve(basePath, 'packages/toolbars/save/index.js'),
-    '@opentiny/tiny-engine-toolbar-setting': path.resolve(basePath, 'packages/toolbars/setting/index.js'),
-    '@opentiny/tiny-engine-toolbar-collaboration': path.resolve(basePath, 'packages/toolbars/collaboration/index.js'),
-    '@opentiny/tiny-engine-theme-base': path.resolve(basePath, 'packages/theme/base/src/index.js'),
-    '@opentiny/tiny-engine-svgs': path.resolve(basePath, 'packages/svgs/index.js'),
+    '@opentiny/tiny-engine-settings-panel': path.resolve(basePath, 'packages/settings/panel/index.ts'),
+    '@opentiny/tiny-engine-setting-events': path.resolve(basePath, 'packages/settings/events/index.ts'),
+    '@opentiny/tiny-engine-setting-props': path.resolve(basePath, 'packages/settings/props/index.ts'),
+    '@opentiny/tiny-engine-setting-styles': path.resolve(basePath, 'packages/settings/styles/index.ts'),
+    '@opentiny/tiny-engine-toolbar-breadcrumb': path.resolve(basePath, 'packages/toolbars/breadcrumb/index.ts'),
+    '@opentiny/tiny-engine-toolbar-fullscreen': path.resolve(basePath, 'packages/toolbars/fullscreen/index.ts'),
+    '@opentiny/tiny-engine-toolbar-lang': path.resolve(basePath, 'packages/toolbars/lang/index.ts'),
+    '@opentiny/tiny-engine-toolbar-view-setting': path.resolve(basePath, 'packages/toolbars/view-setting/index.ts'),
+    '@opentiny/tiny-engine-toolbar-layout': path.resolve(basePath, 'packages/toolbars/layout/index.ts'),
+    '@opentiny/tiny-engine-toolbar-lock': path.resolve(basePath, 'packages/toolbars/lock/index.ts'),
+    '@opentiny/tiny-engine-toolbar-logo': path.resolve(basePath, 'packages/toolbars/logo/index.ts'),
+    '@opentiny/tiny-engine-toolbar-logout': path.resolve(basePath, 'packages/toolbars/logout/index.ts'),
+    '@opentiny/tiny-engine-toolbar-media': path.resolve(basePath, 'packages/toolbars/media/index.ts'),
+    '@opentiny/tiny-engine-toolbar-preview': path.resolve(basePath, 'packages/toolbars/preview/index.ts'),
+    '@opentiny/tiny-engine-toolbar-generate-code': path.resolve(basePath, 'packages/toolbars/generate-code/index.ts'),
+    '@opentiny/tiny-engine-toolbar-refresh': path.resolve(basePath, 'packages/toolbars/refresh/index.ts'),
+    '@opentiny/tiny-engine-toolbar-redoundo': path.resolve(basePath, 'packages/toolbars/redoundo/index.ts'),
+    '@opentiny/tiny-engine-toolbar-clean': path.resolve(basePath, 'packages/toolbars/clean/index.ts'),
+    '@opentiny/tiny-engine-toolbar-theme-switch': path.resolve(basePath, 'packages/toolbars/themeSwitch/index.ts'),
+    '@opentiny/tiny-engine-toolbar-save': path.resolve(basePath, 'packages/toolbars/save/index.ts'),
+    '@opentiny/tiny-engine-toolbar-setting': path.resolve(basePath, 'packages/toolbars/setting/index.ts'),
+    '@opentiny/tiny-engine-toolbar-collaboration': path.resolve(basePath, 'packages/toolbars/collaboration/index.ts'),
+    '@opentiny/tiny-engine-theme-base': path.resolve(basePath, 'packages/theme/base/src/index.ts'),
+    '@opentiny/tiny-engine-svgs': path.resolve(basePath, 'packages/svgs/index.ts'),
     '@opentiny/tiny-engine-canvas/render': path.resolve(basePath, 'packages/canvas/render/index.ts'),
-    '@opentiny/tiny-engine-canvas': path.resolve(basePath, 'packages/canvas/index.js'),
-    '@opentiny/tiny-engine-utils': path.resolve(basePath, 'packages/utils/src/index.js'),
+    '@opentiny/tiny-engine-canvas': path.resolve(basePath, 'packages/canvas/index.ts'),
+    '@opentiny/tiny-engine-utils': path.resolve(basePath, 'packages/utils/src/index.ts'),
     '@opentiny/tiny-engine-webcomponent-core': path.resolve(basePath, 'packages/webcomponent/src/lib.js'),
-    '@opentiny/tiny-engine-i18n-host': path.resolve(basePath, 'packages/i18n/src/lib.js'),
-    '@opentiny/tiny-engine-builtin-component': path.resolve(basePath, 'packages/builtinComponent/index.js'),
-    '@opentiny/tiny-engine-meta-register': path.resolve(basePath, 'packages/register/src/index.js'),
-    '@opentiny/tiny-engine-layout': path.resolve(basePath, 'packages/layout/index.js'),
-    '@opentiny/tiny-engine-configurator': path.resolve(basePath, 'packages/configurator/src/index.js'),
+    '@opentiny/tiny-engine-i18n-host': path.resolve(basePath, 'packages/i18n/src/lib.ts'),
+    '@opentiny/tiny-engine-builtin-component': path.resolve(basePath, 'packages/builtinComponent/index.ts'),
+    '@opentiny/tiny-engine-meta-register': path.resolve(basePath, 'packages/register/src/index.ts'),
+    '@opentiny/tiny-engine-layout': path.resolve(basePath, 'packages/layout/index.ts'),
+    '@opentiny/tiny-engine-configurator': path.resolve(basePath, 'packages/configurator/src/index.ts'),
     '@opentiny/tiny-engine-block-compiler': path.resolve(basePath, 'packages/block-compiler/src/index.ts')
   }
 }

packages/builtinComponent/src/components/CanvasCol.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed, defineProps } from 'vue'
 import { getStyleValue, alignMap, justAlignMap } from './helper'
 
@@ -22,11 +22,11 @@ const props = defineProps({
     default: ''
   },
   align: {
-    type: [String, Number],
+    type: String,
     default: ''
   },
   justAlign: {
-    type: [String, Number],
+    type: String,
     default: ''
   },
   grow: {
@@ -43,8 +43,8 @@ const props = defineProps({
   }
 })
 
-const getFlex = () => {
-  const { flexBasis, grow, shrink, widthType } = props
+const getFlex = (options: any) => {
+  const { flexBasis, grow, shrink, widthType } = options
 
   if (widthType === 'fixed') {
     return `0 0 ${getStyleValue(flexBasis)}`
@@ -53,13 +53,16 @@ const getFlex = () => {
   return `${Number(grow)} ${Number(shrink)} ${getStyleValue(flexBasis)}`
 }
 
-const styles = computed(() => ({
-  flex: getFlex(props.flexBasis),
-  rowGap: getStyleValue(props.rowGap),
-  colGap: getStyleValue(props.colGap),
-  align: alignMap[props.align] || 'stretch',
-  justAlign: justAlignMap[props.justAlign] || 'flex-start'
-}))
+const styles = computed(() => {
+  const { flexBasis, grow, shrink, widthType } = props
+  return {
+    flex: getFlex({ flexBasis, grow, shrink, widthType }),
+    rowGap: getStyleValue(props.rowGap),
+    colGap: getStyleValue(props.colGap),
+    align: alignMap[props.align] || 'stretch',
+    justAlign: justAlignMap[props.justAlign] || 'flex-start'
+  }
+})
 </script>
 
 <style lang="less" scoped>

packages/builtinComponent/src/components/CanvasFlexBox.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed, defineProps } from 'vue'
 import { getStyleValue } from './helper'
 

packages/builtinComponent/src/components/CanvasRow.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed, defineProps } from 'vue'
 import { getStyleValue, alignMap, justAlignMap } from './helper'
 

packages/builtinComponent/src/components/CanvasRowColContainer.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed, defineProps } from 'vue'
 import { getStyleValue } from './helper'
 

packages/builtinComponent/src/components/helper.ts

@@ -10,7 +10,7 @@
  *
  */
 
-export const getStyleValue = (value) => {
+export const getStyleValue = (value: string | number) => {
   if (typeof value === 'number' || /^\d+\.?\d*$/.test(value)) {
     return `${value}px`
   }
@@ -22,7 +22,7 @@ export const getStyleValue = (value) => {
   return ''
 }
 
-export const alignMap = {
+export const alignMap: Record<string, string> = {
   'flex-start': 'flex-start',
   'flex-end': 'flex-end',
   center: 'center',
@@ -31,7 +31,7 @@ export const alignMap = {
   end: 'end'
 }
 
-export const justAlignMap = {
+export const justAlignMap: Record<string, string> = {
   'space-between': 'space-between',
   'space-around': 'space-around',
   'space-evenly': 'space-evenly',

packages/builtinComponent/vite.config.ts

@@ -21,9 +21,9 @@ export default defineConfig({
   build: {
     cssCodeSplit: false,
     lib: {
-      entry: path.resolve(__dirname, './index.js'),
+      entry: path.resolve(__dirname, './index.ts'),
       name: 'builtinComponent',
-      fileName: () => 'index.mjs',
+      fileName: (_format, entryName) => `${entryName}.mjs`,
       formats: ['es']
     },
     rollupOptions: {

packages/canvas/DesignCanvas/src/api/useCanvas.ts

@@ -73,7 +73,7 @@ const rootSchema = ref([
 ])
 
 const handleTinyGridColumnsSlots = (node) => {
-  let columns = Array.isArray(node.props?.columns) ? node.props.columns : []
+  const columns = Array.isArray(node.props?.columns) ? node.props.columns : []
   for (const columnItem of columns) {
     if (!columnItem?.slots) {
       continue

packages/canvas/canvas.html

@@ -207,6 +207,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="./test/src/canvas.js"></script>
+    <script type="module" src="./test/src/canvas.ts"></script>
   </body>
 </html>

packages/canvas/common/index.js

@@ -1,2 +0,0 @@
-export * from './src/constant.js'
-export * from './src/utils.js'

packages/canvas/common/index.ts

@@ -0,0 +1,2 @@
+export * from './src/constant'
+export * from './src/utils'

packages/canvas/common/src/utils.ts

@@ -1,4 +1,4 @@
-export const addScript = (src, doc = document) => {
+export const addScript = (src: string, doc = document) => {
   return new Promise((resolve, reject) => {
     const script = doc.createElement('script')
 
@@ -10,11 +10,11 @@ export const addScript = (src, doc = document) => {
     script.onload = resolve
     script.onerror = reject
 
-    doc.querySelector('head').appendChild(script)
+    doc.querySelector('head')!.appendChild(script)
   })
 }
 
-export const addStyle = (href, doc = document) => {
+export const addStyle = (href: string, doc = document) => {
   return new Promise((resolve, reject) => {
     const link = doc.createElement('link')
 
@@ -24,11 +24,11 @@ export const addStyle = (href, doc = document) => {
     link.onload = resolve
     link.onerror = reject
 
-    doc.querySelector('head').appendChild(link)
+    doc.querySelector('head')!.appendChild(link)
   })
 }
 
-export const copyObject = (node) => {
+export const copyObject = (node: any[]) => {
   if (typeof node === 'object') {
     if (!node) {
       return node
@@ -61,7 +61,7 @@ export const copyObject = (node) => {
  * @param {*} script 模块的cdn地址
  * @returns
  */
-const dynamicImportComponentLib = async ({ pkg, script }) => {
+const dynamicImportComponentLib = async ({ pkg, script }: any) => {
   if (window.TinyComponentLibs[pkg]) {
     return window.TinyComponentLibs[pkg]
   }
@@ -87,7 +87,7 @@ const dynamicImportComponentLib = async ({ pkg, script }) => {
  * @param {object} param0 组件的依赖： { package： 包名，script：js文件cdn, components：组件id和导出组件名的映射关系}
  * @returns
  */
-export const getComponents = async ({ package: pkg, script, components }) => {
+export const getComponents = async ({ package: pkg, script, components }: any) => {
   if (!pkg) return
 
   const modules = await dynamicImportComponentLib({ pkg, script })

packages/canvas/container/src/keyboard.ts

@@ -58,7 +58,8 @@ function handlerDelete() {
 }
 
 const handlerArrow = (keyCode) => {
-  let { schema, parent } = getCurrent()
+  let { schema } = getCurrent()
+  const { parent } = getCurrent()
   let index = null
 
   if (schema) {
@@ -67,7 +68,7 @@ const handlerArrow = (keyCode) => {
     schema = useCanvas().getSchema()
   }
 
-  let obj = {
+  const obj = {
     [KEY_LEFT]: handlerLeft,
     [KEY_RIGHT]: handlerRight,
     [KEY_UP]: handlerUp,

packages/canvas/index.html

@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="./test/src/main.js"></script>
+    <script type="module" src="./test/src/main.ts"></script>
   </body>
 </html>

packages/canvas/render/src/builtin/CanvasCollection.vue

@@ -6,11 +6,11 @@
   </component>
 </template>
 
-<script>
+<script lang="ts">
 import { ref, watch, computed } from 'vue'
 import CanvasPlaceholder from './CanvasPlaceholder.vue'
 import { getController } from '../render'
-import { getHandler } from './CanvasCollection'
+import { getHandler } from './CanvasCollection.ts'
 
 export const fetchDataSourceDetail = (dataSourceId) =>
   getController().request.get(`/app-center/api/sources/detail/${dataSourceId}`) // TODO: 强行耦合了

packages/canvas/render/src/builtin/CanvasIcon.vue

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 import * as SvgIcons from '@opentiny/vue-icon'
 import { h } from 'vue'
 

packages/canvas/render/src/builtin/CanvasImg.vue

@@ -2,7 +2,7 @@
   <img :src="src" :style="style" />
 </template>
 
-<script>
+<script lang="ts">
 export default {
   props: {
     src: {

packages/canvas/render/src/builtin/CanvasPlaceholder.vue

@@ -8,7 +8,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 export default {
   props: {
     placeholder: {

packages/canvas/render/src/builtin/CanvasRouterView.vue

@@ -1,7 +1,7 @@
 <template>
   <canvas-placeholder placeholder="路由子页面显示位置占位符" :data-te-page-id="pageId"></canvas-placeholder>
 </template>
-<script>
+<script lang="ts">
 import { inject } from 'vue'
 import CanvasPlaceholder from './CanvasPlaceholder.vue'
 export default {

packages/canvas/render/src/builtin/CanvasSlot.vue

@@ -4,7 +4,7 @@
   </slot>
 </template>
 
-<script>
+<script lang="ts">
 import CanvasPlaceholder from './CanvasPlaceholder.vue'
 export default {
   components: {

packages/canvas/render/src/builtin/CanvasText.vue

@@ -2,7 +2,7 @@
   <span :class="['canvas-text', className]">{{ text }}</span>
 </template>
 
-<script>
+<script lang="ts">
 export default {
   props: {
     text: {

packages/canvas/vite.config.ts

@@ -26,7 +26,7 @@ export default defineConfig({
     vueJsx(),
     generateComments(),
     vitePluginBuildEntry({
-      canvas: path.resolve(__dirname, './scripts/canvas-vite.config.js')
+      canvas: path.resolve(__dirname, './scripts/canvas-vite.config.ts')
     })
   ],
   publicDir: false,
@@ -34,7 +34,7 @@ export default defineConfig({
     cssCodeSplit: true,
     lib: {
       entry: {
-        index: path.resolve(__dirname, './index.js'),
+        index: path.resolve(__dirname, './index.ts'),
         render: path.resolve(__dirname, './render/index.ts')
       },
       formats: ['es']

packages/common/component/BindI18n.vue

@@ -54,7 +54,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { reactive, ref, watchEffect } from 'vue'
 import { useLayout, useTranslate } from '@opentiny/tiny-engine-meta-register'
 import { PROP_DATA_TYPE } from '../js/constants'
@@ -86,15 +86,15 @@ export default {
   setup(props, { emit }) {
     const selectValue = ref(props.modelValue)
     const showEditItem = ref(false)
-    const selectRef = ref(null)
-    const editForm = reactive({})
-    const paramsForm = ref([])
+    const selectRef = ref<any>(null)
+    const editForm = reactive<any>({})
+    const paramsForm = ref<any[]>([])
 
     watchEffect(() => {
       selectValue.value = props.modelValue
       if (props.modelValue && props.langData[props.modelValue]) {
         const curValue = props.langData[props.modelValue][props.currentLang] || ''
-        const params = []
+        const params: any[] = []
         const data = props?.data?.params || {}
 
         curValue.replace(/\{(.+?)\}/g, (substr, key) => {
@@ -106,15 +106,15 @@ export default {
       }
     })
 
-    const filterMethod = (value) => {
+    const filterMethod = (value: any) => {
       const options = selectRef.value.state.cachedOptions
 
-      options.forEach((item) => {
+      options.forEach((item: any) => {
         item.state.visible = value ? item.label.indexOf(value) > -1 : true
       })
     }
 
-    const selectI18n = (key) => {
+    const selectI18n = (key: string) => {
       const data = props.langData[key] || {}
 
       emit('bind', { ...data, key })
@@ -137,7 +137,7 @@ export default {
     }
 
     const paramsChange = () => {
-      const params = {}
+      const params: Record<string, any> = {}
 
       paramsForm.value.forEach(({ name, value }) => {
         params[name] = value

packages/common/component/BlockDeployDialog.vue

@@ -70,7 +70,7 @@
   </tiny-dialog-box>
 </template>
 
-<script>
+<script lang="ts">
 import { reactive, ref, watch } from 'vue'
 import {
   Checkbox as TinyCheckbox,
@@ -142,12 +142,12 @@ export default {
       }
     }
 
-    const getNextVersion = (block) => {
+    const getNextVersion = (block: any) => {
       const backupList = block.histories || []
 
       let latestVersion = '1.0.0'
       let latestTime = 0
-      backupList.forEach((v) => {
+      backupList.forEach((v: { created_at: string | number | Date; version: string }) => {
         const vTime = new Date(v.created_at).getTime()
 
         if (vTime > latestTime) {
@@ -170,7 +170,7 @@ export default {
       }
     )
 
-    const setVisible = (visible) => emit('update:visible', visible)
+    const setVisible = (visible: boolean) => emit('update:visible', visible)
 
     const { setSaved } = useCanvas()
 
@@ -180,7 +180,7 @@ export default {
     }
 
     const deployBlock = async () => {
-      deployBlockRef.value.validate((valid) => {
+      deployBlockRef.value.validate((valid: any) => {
         const { publishBlock } = getMetaApi(META_APP.BlockManage)
 
         if (valid) {
@@ -203,7 +203,7 @@ export default {
       })
     }
 
-    const changeCompare = async (value) => {
+    const changeCompare = async (value: any) => {
       const api = getMetaApi(META_APP.BlockManage)
 
       if (value) {
@@ -217,7 +217,7 @@ export default {
       }
     }
 
-    const changeCode = (code) => {
+    const changeCode = (code: string) => {
       if (typeof code !== 'string') {
         return
       }

packages/common/component/BlockDescription.vue

@@ -9,7 +9,7 @@
   </meta-description>
 </template>
 
-<script>
+<script lang="ts">
 import { useLayout, useBlock } from '@opentiny/tiny-engine-meta-register'
 import MetaDescription from './MetaDescription.vue'
 
@@ -22,7 +22,7 @@ export default {
     const { PLUGIN_NAME, activePlugin } = useLayout()
 
     const openBlockSetting = () => {
-      activePlugin(PLUGIN_NAME.BlockManage).then((api) => {
+      activePlugin(PLUGIN_NAME.BlockManage).then((api: { openSettingPanel: (arg0: { item: any }) => void }) => {
         api.openSettingPanel({ item: getCurrentBlock() })
       })
     }

packages/common/component/BlockHistoryList.vue

@@ -22,7 +22,7 @@
   <div v-if="!history.length" class="empty">暂无数据</div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { defineEmits, defineProps } from 'vue'
 import { format } from '@opentiny/vue-renderless/common/date'
 import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'

packages/common/component/CanvasDragItem.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { getMetaApi } from '@opentiny/tiny-engine-meta-register'
 import { utils } from '@opentiny/tiny-engine-utils'
 
@@ -18,7 +18,7 @@ export default {
   setup(props, { emit }) {
     const canvasApi = getMetaApi('engine.canvas').canvasApi
 
-    const dragstart = (e) => {
+    const dragstart = (e: any) => {
       if (props.data && canvasApi.value?.dragStart) {
         const data = deepClone(props.data)
         canvasApi.value.dragStart(data)

packages/common/component/CloseIcon.vue

@@ -5,7 +5,7 @@
   </span>
 </template>
 
-<script>
+<script lang="ts">
 import { computed } from 'vue'
 
 export default {

packages/common/component/ConfigCollapse.vue

@@ -8,7 +8,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { Collapse, CollapseItem } from '@opentiny/vue'
 
 export default {

packages/common/component/ConfigItem.vue

@@ -100,7 +100,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { inject, computed, watch, ref, reactive, provide } from 'vue'
 import { Popover, Tooltip } from '@opentiny/vue'
 import { IconWriting, IconHelpCircle, IconPlusCircle } from '@opentiny/vue-icon'
@@ -120,7 +120,7 @@ import { SCHEMA_DATA_TYPE, PAGE_STATUS, TYPES } from '../js/constants'
 
 const { parseFunction: generateFunction } = utils
 
-const hasRule = (required, rules) => {
+const hasRule = (required: any, rules: string | any[]) => {
   if (required) {
     return true
   }
@@ -178,7 +178,7 @@ export default {
       message: '',
       hasRule: computed(() => hasRule(props.property?.required, props.property?.rules))
     })
-    const editorModalRef = ref(null)
+    const editorModalRef = ref<any>(null)
     const currentProperty = inject('currentProperty', null)
     const propsObj = inject('propsObj', null)
     const required = computed(() => props.property?.required || false)
@@ -263,7 +263,7 @@ export default {
       return 'auto'
     })
 
-    const updateValue = (value) => {
+    const updateValue = (value: { type?: any; componentName?: string; props?: { name: any } }) => {
       const { property, type } = props.property
       const { setProp, getSchema } = useProperties()
 
@@ -313,22 +313,22 @@ export default {
       useHistory().addHistory()
     }
 
-    const setVerifyFailed = (result, message) => {
+    const setVerifyFailed = (result: { failed: any; message: any }, message: string) => {
       result.failed = true
       result.message = typeof message === 'string' ? message : message?.[locale.value]
     }
 
-    const isEmptyInputValue = (value) => {
+    const isEmptyInputValue = (value: string | null) => {
       // 通过 value == null 做隐式类型转换
       // 空值约定为 undefined | null | ''
       // eslint-disable-next-line no-eq-null
       return value == null || (typeOf(value) === TYPES.StringType && value.trim() === '')
     }
-    const verifyRequired = (value) => {
+    const verifyRequired = (value: string) => {
       return !isEmptyInputValue(value)
     }
 
-    const verifyValue = (value = '', rules = []) => {
+    const verifyValue = (value = '', rules: any[] = []) => {
       const result = {
         failed: false,
         message: ''
@@ -383,7 +383,7 @@ export default {
       return result
     }
 
-    const executeRelationAction = (value, preValue) => {
+    const executeRelationAction = (value: string | undefined, preValue: any) => {
       const { onChange, rules } = props.property
       const { setProp, delProp } = useProperties()
 
@@ -409,7 +409,7 @@ export default {
       Object.assign(verification, verifyValue(value, rules))
     }
 
-    const onModelUpdate = (data, shouldUpdate = true) => {
+    const onModelUpdate = (data: any, shouldUpdate = true) => {
       const preValue = bindValue.value
       widget.value.props.modelValue = data
       emit('update:modelValue', data)
@@ -468,7 +468,7 @@ export default {
       }
     }
 
-    const isRelatedComponents = (component) =>
+    const isRelatedComponents = (component: string) =>
       ['RelatedEditorConfigurator', 'RelatedColumnsConfigurator'].includes(component)
 
     const showBindState = computed(

packages/common/component/ConfigRender.vue

@@ -35,7 +35,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { computed, provide, ref, watchEffect } from 'vue'
 import { Collapse, CollapseItem } from '@opentiny/vue'
 import ConfigGroup from './ConfigGroup.vue'
@@ -58,23 +58,25 @@ export default {
       default: '空'
     }
   },
-  emits: ['selected'],
+  emits: ['selected', 'select-prop', 'select-group'],
   setup(props, { emit }) {
     const activeNames = ref([])
 
-    const getPropsObj = (data) => {
+    const getPropsObj = (data?: Record<string, any> | any[]) => {
       const obj = {}
 
       data?.forEach(({ content }) => {
         if (content.length) {
-          content.forEach((item) => {
-            const node = item.schema?.length ? getPropsObj(item.schema) : {}
+          content.forEach(
+            (item: { schema: string | any[]; widget: { props: { modelValue: any } }; property: string | number }) => {
+              const node: any = item.schema?.length ? getPropsObj(item.schema) : {}
 
-            node.setValue = (value) => {
-              item.widget.props.modelValue = value
+              node.setValue = (value: any) => {
+                item.widget.props.modelValue = value
+              }
+              obj[item.property] = node
             }
-            obj[item.property] = node
-          })
+          )
         }
       })
 
@@ -85,10 +87,11 @@ export default {
 
     provide('propsObj', propsObj)
 
-    const onPropClick = (data) => emit('select-prop', data)
-    const onGroupClick = (data) => emit('select-group', data)
+    const onPropClick = (data: any) => emit('select-prop', data)
+    const onGroupClick = (data: any) => emit('select-group', data)
 
-    const filterActiveGroup = (data) => data?.filter?.((item) => !item.fold)?.map?.((item, index) => index) || []
+    const filterActiveGroup = (data: any[] | Record<string, any>) =>
+      data?.filter?.((item: { fold: any }) => !item.fold)?.map?.((item: any, index: any) => index) || []
 
     watchEffect(() => {
       activeNames.value = filterActiveGroup(props.data)

packages/common/component/EmptyTip.vue

@@ -14,7 +14,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { iconInfo } from '@opentiny/vue-icon'
 
 export default {

packages/common/component/I18nInput.vue

@@ -34,7 +34,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { computed, ref, watchEffect } from 'vue'
 import { useTranslate } from '@opentiny/tiny-engine-meta-register'
 import { Input, Popover } from '@opentiny/vue'
@@ -70,11 +70,11 @@ export default {
       inputValue.value = useTranslate().translate(props.modelValue)
     })
 
-    const inputChange = (event) => {
+    const inputChange = (event: { target: { value: any } }) => {
       emit('update:modelValue', event.target.value) // 直接修改时去掉绑定
     }
 
-    const setI18n = (data) => {
+    const setI18n = (data: any) => {
       emit('update:modelValue', data)
     }
 

packages/common/component/LinkButton.vue

@@ -4,7 +4,7 @@
   </a>
 </template>
 
-<script>
+<script lang="ts">
 import SvgButton from './SvgButton.vue'
 export default {
   components: {

packages/common/component/MaskModal.vue

@@ -6,7 +6,7 @@
   </teleport>
 </template>
 
-<script>
+<script lang="ts">
 import { computed } from 'vue'
 
 export default {

packages/common/component/MetaChildItem.vue

@@ -16,7 +16,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { computed } from 'vue'
 import { isObject } from '@opentiny/vue-renderless/grid/static'
 import ConfigItem from './ConfigItem.vue'
@@ -75,7 +75,7 @@ export default {
       return result
     })
 
-    const onValueChange = (property, data) => {
+    const onValueChange = (property: any, data: any) => {
       emit('update:modelValue', { propertyKey: property, propertyValue: data })
     }
 

packages/common/component/MetaCodeEditor.vue

@@ -74,7 +74,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { computed, nextTick, reactive, ref, watchEffect } from 'vue'
 import { Button, DialogBox, Split } from '@opentiny/vue'
 import VueMonaco from './VueMonaco.vue'
@@ -131,7 +131,7 @@ export default {
       default: () => ({ title: '', demo: '' })
     }
   },
-  emits: ['save', 'open'],
+  emits: ['save', 'open', 'close'],
   setup(props, { emit }) {
     const { locale } = i18n.global
     const editorState = reactive({
@@ -142,7 +142,7 @@ export default {
       splitWidth: props.tips?.demo ? 0.7 : 1
     })
     const value = ref('')
-    const editor = ref(null)
+    const editor = ref<any>(null)
 
     const buttonLabel = computed(() => props.buttonText?.[locale.value] ?? props.buttonText)
 
@@ -182,14 +182,14 @@ export default {
         try {
           jsonData = JSON.parse(content)
           editorState.errorMsg = ''
-        } catch (error) {
+        } catch (error: any) {
           editorState.errorMsg = error
         }
       }
       return jsonData
     }
 
-    const editorDidMount = (monacoInstance) => {
+    const editorDidMount = (monacoInstance: { onDidChangeModelContent: any; getValue: () => any }) => {
       monacoInstance.onDidChangeModelContent(() => {
         const newValue = monacoInstance.getValue()
         parseContent(newValue)

packages/common/component/MetaDescription.vue

@@ -20,7 +20,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { ref, watchEffect, reactive } from 'vue'
 
 const $constants = {

packages/common/component/MetaForm.vue

@@ -14,7 +14,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { reactive } from 'vue'
 import { Form, FormItem, Input, Button } from '@opentiny/vue'
 

packages/common/component/MetaListActions.vue

@@ -6,7 +6,7 @@
   </span>
 </template>
 
-<script>
+<script lang="ts">
 import { Tooltip } from '@opentiny/vue'
 
 export default {
@@ -20,7 +20,7 @@ export default {
     }
   },
   setup(props, { emit }) {
-    const actionsEvents = (item) => {
+    const actionsEvents = (item: any) => {
       emit('actionEvents', item)
     }
 

packages/common/component/MetaListItem.vue

@@ -72,7 +72,7 @@
   <mask-modal :visible="showMask && !expand" @close="closeMask"></mask-modal>
 </template>
 
-<script>
+<script lang="ts">
 import { reactive, watchEffect, ref, onMounted } from 'vue'
 import { Tooltip, Input, FormItem, Form, Popover, DialogBox, Button } from '@opentiny/vue'
 import { iconDel, iconEdit, iconMore, iconClose } from '@opentiny/vue-icon'
@@ -126,7 +126,7 @@ export default {
   },
   emits: ['editItem', 'changeItem', 'deleteItem', 'hide'],
   setup(props, { emit }) {
-    const itemData = reactive({})
+    const itemData = reactive<any>({})
     const isShow = ref(false)
     const isVisible = ref(false)
     const showMask = ref(false)
@@ -141,7 +141,7 @@ export default {
       isVisible.value = true
     }
 
-    const btnClick = ($event, action) => {
+    const btnClick = ($event: any, action: any) => {
       switch (action) {
         case 'delete':
           deleteItem()
@@ -185,7 +185,7 @@ export default {
       isVisible.value = false
     }
 
-    const formConfirm = (formData) => {
+    const formConfirm = (formData: any) => {
       emit('changeItem', { data: formData, index: props.index })
       isVisible.value = false
     }

packages/common/component/MetaListItems.vue

@@ -61,7 +61,7 @@
   </template>
 </template>
 
-<script>
+<script lang="ts">
 import { computed } from 'vue'
 import { VueDraggableNext } from 'vue-draggable-next'
 import { useResource } from '@opentiny/tiny-engine-meta-register'

packages/common/component/MetaListTitle.vue

@@ -2,7 +2,7 @@
   <div>{{ title }}</div>
 </template>
 
-<script>
+<script lang="ts">
 export default {
   props: {
     title: {

packages/common/component/MetaModal.vue

@@ -7,7 +7,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { reactive } from 'vue'
 
 const modal = reactive({

packages/common/component/MetaModalItem.vue

@@ -25,7 +25,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { Button } from '@opentiny/vue'
 import { iconClose } from '@opentiny/vue-icon'
 import { reactive, computed } from 'vue'
@@ -43,7 +43,7 @@ export default {
       default: () => {}
     }
   },
-  emits: ['save'],
+  emits: ['save', 'close', 'update:modelValue'],
   setup(props, { emit }) {
     const modalState = reactive({
       show: false,
@@ -66,7 +66,7 @@ export default {
       modalState.show = true
     }
 
-    const save = (value) => {
+    const save = (value: any) => {
       emit('update:modelValue', value)
 
       close()

packages/common/component/MetaPopover.vue

@@ -11,7 +11,7 @@
   </tiny-popover>
 </template>
 
-<script>
+<script lang="ts">
 import { computed } from 'vue'
 import { Popover, Button } from '@opentiny/vue'
 import MetaChildItem from './MetaChildItem.vue'

packages/common/component/MonacoEditor.vue

@@ -48,7 +48,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { computed, ref, onActivated, onDeactivated } from 'vue'
 import { Tooltip } from '@opentiny/vue'
 import PublicIcon from './PublicIcon.vue'
@@ -63,9 +63,13 @@ export default {
     TinyTooltip: Tooltip
   },
   props: {
-    value: String,
+    value: {
+      type: String,
+      default: ''
+    },
     options: {
-      type: Object
+      type: Object,
+      default: () => ({})
     },
     showFormatBtn: {
       type: Boolean,
@@ -78,7 +82,7 @@ export default {
   },
   emits: ['editorDidMount', 'change', 'fullscreenChange', 'shortcutSave'],
   setup(props, { emit }) {
-    const editor = ref(null)
+    const editor = ref<any>(null)
     const fullscreen = ref(false)
     const editorOptions = computed(() => {
       return {
@@ -126,7 +130,7 @@ export default {
       editor.value.getEditor().dispose()
     })
 
-    const switchFullScreen = (value) => {
+    const switchFullScreen = (value: boolean) => {
       fullscreen.value = value
       emit('fullscreenChange', value)
     }

packages/common/component/MultiTypeSelector.vue

@@ -26,7 +26,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { reactive } from 'vue'
 import { Tooltip, Popover, Radio, RadioGroup } from '@opentiny/vue'
 import { getConfigurator } from '@opentiny/tiny-engine-meta-register'
@@ -52,7 +52,7 @@ export default {
   },
   emits: ['change', 'update:modelValue'],
   setup(props, { emit }) {
-    const getModelValueType = (types, value) => {
+    const getModelValueType = (types: string[], value: any) => {
       let result = types[0] || ''
 
       if (value === undefined) return result
@@ -71,7 +71,7 @@ export default {
     const defaultType = getModelValueType(props.meta.type, props.meta.defaultValue)
 
     const initModelValue = () =>
-      props.meta.type.map((type) => {
+      props.meta.type.map((type: string) => {
         if (type === currentType) return { modelValue: props.meta.widget?.props?.modelValue }
         if (type === defaultType) return { modelValue: props.meta.defaultValue }
         return { modelValue: null }
@@ -82,7 +82,7 @@ export default {
       typesValue: initModelValue() // 保存多个组件的modelValue
     })
 
-    const TYPE_MAP = {
+    const TYPE_MAP: Record<string, string> = {
       string: '字符串',
       number: '数字',
       boolean: '布尔值',
@@ -90,15 +90,15 @@ export default {
       array: '数组'
     }
 
-    const change = (val) => {
-      const itemIndex = props.meta.type.findIndex((type) => type === val[0])
+    const change = (val: any[]) => {
+      const itemIndex = props.meta.type.findIndex((type: any) => type === val[0])
       if (itemIndex > -1) {
         emit('update:modelValue', state.typesValue[itemIndex].modelValue)
       }
       emit('change', val)
     }
 
-    const handleChange = (index, val) => {
+    const handleChange = (index: string | number, val: any) => {
       const type = props.meta.type[index]
 
       if (state.type !== type) {

packages/common/component/PluginBlockItemImg.vue

@@ -17,7 +17,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { Checkbox as TinyCheckbox } from '@opentiny/vue'
 import { defineEmits, defineProps } from 'vue'
 
@@ -46,7 +46,7 @@ const emit = defineEmits(['check'])
 const defaultImg =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAA11JREFUaEPtmUvIVVUYhp83CIJKpIsOEsSBAxEiEAwqRDGDBCmRkCwhwQQbSANDEbwNgvgzxEIUCwRBEB2EgiQR5MA/RcHImRBKkYhYaAliULzxwT6y3O1zzv735Rx+PN/srP1d3ve7rLX2PmKSiyY5fkYEhl3BUQVGFaiZgQdayPZTwOvA7Jp+2zI/C5yV9FcnQJ7AB8DetqI35HdM0qZuBL4HFjYUqC03pyUteigIPMC0rXSW8Ws77YzSFRgRKJPdMjqtVcD2DOC6pH/LAKmq0zgB2+uAXcCTwD1gs6Q9VQH2s2uDwO/A00ngv4EnJP3TD0zneZaEt4GvJB3uZdcoAdsBPAjkZaakX8sQsP0ecDDR/UhSVLRQGiUQEWzfAKYl0e4CU8rMgu0XgXMFSNdJ+rKIQRsE1gBjwDPAbWCLpH39sm97CvADMLeL7kpJR/PPGieQ9PGzkm72A57oB7i3Ev1vsstjZylmaJmkU6nP1giUBZ613U5gW2LzGzAHiEE+kKz/AbwhaTwhPtyT2PZK4EiO8MuSop1iprYAHyfPrwDLJV3Kng+PgO3ngZ9y4NdL2p9rk93Ah8naj8AKSVdbayHb0c+PASck/VkwfI8CASQd2v2S1nfZbeI8WJU8O53NzLHkmt/MZc72IWB1Fuxi9Lekk7ms5oe27wXR9rfAksTPCWAqsCBbq0/A9qfAxoIsfgJ8Lum67e3AjkQnzo55kq71Gn7bATZ6/oWc7fRGCNgO4EGgm5wJEkB+P18qKbbNvmI73smDxHMFytUrYDtaJlonldgeg9TjPZBtlPRZX+SJgu2XgJiBmKNUqhGw/RpwPBvajsMvJG2wvTQjcf9dNYkYl7X3JwK+o2v7TeDrnO0FSfM7a/mvEoX7bbYVxjDNTJwdlvRuEix2o61xtQYeydbHJb1SBXziN8inB93EKmA7hifA32cNnJIU34/+J7ajCu8AccWOgb5ch0DY2o6DbVbmZ8IEAvyyBMR54FVJd+oCK2tf+SADfgbWJoHid4D/pWzwJvSqEgiQac/fAhZLipN1oFKVQB7kEknfDRR5FqwJAoUvGoMi0wSBQWEtE6f0LlTG2TB0ehKY9J/XJ/cfHMPoh7oxR/9S1s1gXftRBepmsK79qAJ1M1jX/j/bzulAKB9d1wAAAABJRU5ErkJggg=='
 
-const handleCheck = (v) => {
+const handleCheck = (v: any) => {
   emit('check', v)
 }
 </script>

packages/common/component/PluginPanel.vue

@@ -40,7 +40,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { useThrottleFn } from '@vueuse/core'
 import { inject, ref, computed, onMounted, provide } from 'vue'
 import { useLayout } from '@opentiny/tiny-engine-meta-register'

packages/common/component/PluginSetting.vue

@@ -38,7 +38,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { nextTick, reactive, watchEffect, computed } from 'vue'
 import { Button } from '@opentiny/vue'
 import { iconPlus } from '@opentiny/vue-icon'
@@ -147,7 +147,7 @@ export default {
       emit(EVENTS.FULL_SCREEN_CHANGE, state.isFullScreen)
     }
 
-    const getFullScreenLabel = (isFullScreen) => {
+    const getFullScreenLabel = (isFullScreen: boolean) => {
       return isFullScreen ? '收起' : '全屏查看'
     }
 

packages/common/component/PublicIcon.vue

@@ -5,7 +5,7 @@
   </span>
 </template>
 
-<script>
+<script lang="ts">
 import { computed } from 'vue'
 
 export default {

packages/common/component/SearchEmpty.vue

@@ -4,7 +4,7 @@
     <p class="empty-text">暂无数据</p>
   </div>
 </template>
-<script>
+<script lang="ts">
 export default {
   props: {
     /**

packages/common/component/SelectAll.vue

@@ -4,7 +4,7 @@
   </tiny-checkbox>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { Checkbox as TinyCheckbox } from '@opentiny/vue'
 import { computed, defineEmits, defineProps } from 'vue'
 

packages/common/component/SvgButton.vue

@@ -7,7 +7,7 @@
   </span>
 </template>
 
-<script>
+<script lang="ts">
 import { computed } from 'vue'
 import { Tooltip } from '@opentiny/vue'
 
@@ -37,8 +37,8 @@ export default {
   setup(props, { emit }) {
     const isTinyIcon = computed(() => props.name.toLowerCase().indexOf('icon') === 0)
 
-    const handleClick = (event) => {
-      event.target.blur()
+    const handleClick = (event: MouseEvent) => {
+      event.target?.blur()
       emit('click', event)
     }
 

packages/common/component/ToolbarBase.vue

@@ -10,7 +10,7 @@
   </span>
 </template>
 
-<script>
+<script lang="ts">
 import { reactive, computed } from 'vue'
 import ToolbarBaseIcon from './toolbar-built-in/ToolbarBaseIcon.vue'
 import ToolbarBaseButton from './toolbar-built-in/ToolbarBaseButton.vue'

packages/common/component/VideoGuide.vue

@@ -19,7 +19,7 @@
   </meta-description>
 </template>
 
-<script>
+<script lang="ts">
 import MetaDescription from './MetaDescription.vue'
 
 export default {

packages/common/component/VueMonaco.vue

@@ -1,7 +1,7 @@
 <template>
   <div ref="monacoRef"></div>
 </template>
-<script>
+<script lang="ts">
 import * as monacoEditor from 'monaco-editor'
 import { watch, onMounted, nextTick, onBeforeUnmount, ref } from 'vue'
 import { formatString } from '../js/ast'
@@ -9,10 +9,7 @@ import { formatString } from '../js/ast'
 const defaultMonacoEditorTheme = 'vs'
 const globalMonacoEditorTheme = ref(defaultMonacoEditorTheme)
 
-/**
- * @param {'vs' | 'vs-dark' | undefined} theme
- */
-export const setGlobalMonacoEditorTheme = (theme) => {
+export const setGlobalMonacoEditorTheme = (theme?: 'vs' | 'vs-dark') => {
   globalMonacoEditorTheme.value = theme || defaultMonacoEditorTheme
 }
 
@@ -33,7 +30,8 @@ export default {
       type: String
     },
     options: {
-      type: Object
+      type: Object,
+      default: () => ({})
     },
     amdRequire: {
       type: Function
@@ -45,7 +43,7 @@ export default {
   },
   emits: ['change', 'editorWillMount', 'editorDidMount', 'shortcutSave'],
   setup(props, { emit }) {
-    const vueMonaco = {
+    const vueMonaco: { editor: any; monaco: any } = {
       editor: null,
       monaco: null
     }
@@ -71,7 +69,7 @@ export default {
 
     const getModelMarkers = () => vueMonaco.monaco.editor.getModelMarkers()
 
-    const initMonaco = (monaco) => {
+    const initMonaco = (monaco: any) => {
       emit('editorWillMount', vueMonaco.monaco)
 
       const options = {
@@ -102,7 +100,7 @@ export default {
 
       const editor2 = getModifiedEditor()
 
-      editor2.onDidChangeModelContent((event) => {
+      editor2.onDidChangeModelContent((event: any) => {
         const value = editor2.getValue()
 
         if (props.value !== value) {
@@ -130,7 +128,7 @@ export default {
             label: 'Prettier',
             precondition: null,
             contextMenuGroupId: 'navigation',
-            run(editor) {
+            run(editor: { getValue: () => any; setValue: (arg0: any) => void }) {
               const currentValue = editor.getValue()
               const newValue = formatString(currentValue, props.options.language)
 

packages/common/component/toolbar-built-in/ToolbarBaseButton.vue

@@ -8,7 +8,7 @@
     </tiny-button>
   </div>
 </template>
-<script>
+<script lang="ts">
 import { Button } from '@opentiny/vue'
 
 export default {

packages/common/component/toolbar-built-in/ToolbarBaseIcon.vue

@@ -16,7 +16,7 @@
     </template>
   </tiny-popover>
 </template>
-<script>
+<script lang="ts">
 import { Popover } from '@opentiny/vue'
 
 export default {

packages/common/composable/defaultGlobalService.ts

@@ -21,7 +21,7 @@ const getBaseInfo = () => {
 }
 
 const initialState = {
-  userInfo: null,
+  userInfo: null as any,
   // 当前应用
   appInfo: {
     id: '',
@@ -39,42 +39,43 @@ const initialState = {
     editor_url: ''
   },
   // 应用列表
-  appList: []
+  appList: [] as any[]
 }
 
 const getUserInfo = () => {
   // 获取登录用户信息
   return getMetaApi(META_SERVICE.Http)
     .get('/platform-center/api/user/me')
-    .catch((error) => {
+    .catch((error: { message: any }) => {
       useModal().message({ message: error.message, status: 'error' })
     })
 }
 
 // 获取当前应用的信息
-const fetchAppInfo = (appId) => getMetaApi(META_SERVICE.Http).get(`/app-center/api/apps/detail/${appId}`)
+const fetchAppInfo = (appId: string) => getMetaApi(META_SERVICE.Http).get(`/app-center/api/apps/detail/${appId}`)
 
 // 获取应用列表
-const fetchAppList = (platformId) => getMetaApi(META_SERVICE.Http).get(`/app-center/api/apps/list/${platformId}`)
+const fetchAppList = (platformId: string) =>
+  getMetaApi(META_SERVICE.Http).get(`/app-center/api/apps/list/${platformId}`)
 
 const { subscribe, publish } = useMessage()
 
-const postLocationHistoryChanged = (data) => publish({ topic: 'locationHistoryChanged', data })
+const postLocationHistoryChanged = (data: any) => publish({ topic: 'locationHistoryChanged', data })
 
 /**
  * 过滤掉没有变化的URL参数。pageId和blockId互斥，如果同时存在，会去掉blockId
  * @param {Record<string, any>} params
  * @returns
  */
-const filterParams = (params) => {
+const filterParams = (params: Record<string, any>) => {
   const fieldsMap = ['pageId', 'blockId', 'previewId'].reduce((result, field) => {
     result[field] = field.toLowerCase()
     return result
-  }, {})
+  }, {} as Record<string, any>)
 
   const paramFileds = Object.keys(params)
   const url = new URL(window.location.href)
-  const changedParams = {}
+  const changedParams: any = {}
 
   Object.entries(fieldsMap).forEach(([field, urlParamKey]) => {
     if (paramFileds.includes(field) && params[field] !== url.searchParams.get(urlParamKey)) {
@@ -94,10 +95,10 @@ const filterParams = (params) => {
 /**
  * 支持pageId, blockId, previewId 批量更新，pageId和blockId互斥，如果同时存在，会去掉blockId
  * @param {*} params
- * @param {*} replace
+ * @param {boolean} replace
  * @returns
  */
-const updateParams = (params, replace = false) => {
+const updateParams = (params: any, replace: boolean = false) => {
   const changedParams = filterParams(params)
   const url = new URL(window.location.href)
 
@@ -134,15 +135,15 @@ const updateParams = (params, replace = false) => {
   postLocationHistoryChanged(changedParams)
 }
 
-const updatePageId = (pageId) => {
+const updatePageId = (pageId: string) => {
   updateParams({ pageId })
 }
 
-const updateBlockId = (blockId) => {
+const updateBlockId = (blockId: string) => {
   updateParams({ blockId })
 }
 
-const updatePreviewId = (previewId, replace = false) => {
+const updatePreviewId = (previewId: string, replace = false) => {
   updateParams({ previewId }, replace)
 }
 
@@ -168,7 +169,7 @@ export default defineService({
 
     subscribe({
       topic: 'app_id_changed',
-      callback: (appId) => {
+      callback: (appId: string) => {
         if (!appId) {
           // eslint-disable-next-line no-console
           console.error('Invalid appId received in app_id_changed event')
@@ -176,7 +177,7 @@ export default defineService({
           return
         }
 
-        fetchAppInfo(appId).then((app) => {
+        fetchAppInfo(appId).then((app: any) => {
           state.appInfo = app
           // 监听应用 ID 变化，根据应用名称设置网页 title
           document.title = `${app.name} —— TinyEditor 前端可视化设计器`
@@ -186,20 +187,20 @@ export default defineService({
 
     subscribe({
       topic: 'platform_id_changed',
-      callback: (platformId) => {
+      callback: (platformId: string) => {
         if (!platformId) {
           // eslint-disable-next-line no-console
           console.error('Received platform_id_changed event with no platformId')
 
           return
         }
-        fetchAppList(platformId).then((list) => {
+        fetchAppList(platformId).then((list: any[]) => {
           state.appList = list
         })
       }
     })
 
-    getUserInfo().then((data) => {
+    getUserInfo().then((data: any) => {
       if (data) {
         state.userInfo = data
       }

packages/common/composable/generateCode/index.ts

@@ -1,4 +1,9 @@
-import { generateApp, parseRequiredBlocks, genSFCWithDefaultPlugin } from '@opentiny/tiny-engine-dsl-vue'
+import {
+  generateApp,
+  parseRequiredBlocks,
+  genSFCWithDefaultPlugin,
+  type IAppSchema
+} from '@opentiny/tiny-engine-dsl-vue'
 import defaultPrettierConfig from '../../js/config-files/prettierrc'
 
 // 应用出码默认配置
@@ -12,14 +17,14 @@ const defaultOptions = {
 }
 
 // 应用出码
-const generateAppCode = async (appSchema, options = {}) => {
+const generateAppCode = async (appSchema: IAppSchema, options = {}) => {
   const instance = generateApp({ ...defaultOptions, ...options })
 
   return instance.generate(appSchema)
 }
 
 // 页面出码
-const generatePageCode = (...args) => {
+const generatePageCode = (...args: any[]) => {
   return genSFCWithDefaultPlugin(...args)
 }
 
@@ -30,12 +35,12 @@ const generatePageCode = (...args) => {
  * @param {*} blockSet 已经获取的区块 set，默认不需要传
  * @returns
  */
-const getAllNestedBlocksSchema = async (pageSchema, fetchBlockSchemaApi, blockSet = new Set()) => {
-  let res = []
+const getAllNestedBlocksSchema = async (pageSchema: any, fetchBlockSchemaApi: any, blockSet = new Set<string>()) => {
+  const res: any[] = []
 
   const blockNames = parseRequiredBlocks(pageSchema)
   const promiseList = blockNames
-    .filter((name) => {
+    .filter((name: string) => {
       if (blockSet.has(name)) {
         return false
       }
@@ -44,11 +49,11 @@ const getAllNestedBlocksSchema = async (pageSchema, fetchBlockSchemaApi, blockSe
 
       return true
     })
-    .map((name) => fetchBlockSchemaApi(name))
+    .map((name: any) => fetchBlockSchemaApi(name))
   const schemaList = await Promise.allSettled(promiseList)
-  const extraList = []
+  const extraList: any[] = []
 
-  schemaList.forEach((item) => {
+  schemaList.forEach((item: { value: any[]; status: string }) => {
     const blockItem = item.value?.[0]
 
     if (item.status !== 'fulfilled' || !blockItem) {
@@ -56,7 +61,7 @@ const getAllNestedBlocksSchema = async (pageSchema, fetchBlockSchemaApi, blockSe
     }
 
     const historyId = blockItem?.current_history
-    const historySchema = blockItem?.histories?.find?.((historyItem) => historyItem?.id === historyId)
+    const historySchema = blockItem?.histories?.find?.((historyItem: any) => historyItem?.id === historyId)
 
     let schemaContent = null
 

packages/common/vite.config.ts

@@ -41,11 +41,11 @@ export default defineConfig({
     cssCodeSplit: false,
     lib: {
       entry: {
-        index: path.resolve(__dirname, './index.js'),
+        index: path.resolve(__dirname, './index.ts'),
         ...Object.fromEntries(jsEntries)
       },
       name: 'common',
-      fileName: (format, entryName) => `${entryName}.js`,
+      fileName: (_format, entryName) => `${entryName}.js`,
       formats: ['es']
     },
     rollupOptions: {

packages/configurator/vite.config.ts

@@ -21,8 +21,8 @@ export default defineConfig({
   publicDir: false,
   build: {
     lib: {
-      entry: path.resolve(__dirname, './src/index.js'),
-      fileName: () => 'index.js',
+      entry: path.resolve(__dirname, './src/index.ts'),
+      fileName: (_format, entryName) => `${entryName}.js`,
       formats: ['es']
     },
     rollupOptions: {

packages/i18n/index.html

@@ -8,6 +8,6 @@
 
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

packages/i18n/src/I18nHost.vue

@@ -2,7 +2,7 @@
   <slot></slot>
 </template>
 
-<script>
+<script lang="ts">
 import { provide, watch, watchEffect } from 'vue'
 import { I18nInjectionKey } from 'vue-i18n'
 import i18n from './i18n'

packages/i18n/src/i18n.ts

@@ -21,7 +21,7 @@ const i18n = {
   })
 }
 
-export const defineCustomI18n = (customI18n) => {
+export const defineCustomI18n = (customI18n: any) => {
   Object.assign(i18n, customI18n)
 }
 

packages/i18n/src/test/TestVueInject.vue

@@ -4,7 +4,7 @@
   <hr />
 </template>
 
-<script>
+<script lang="ts">
 import { inject } from 'vue'
 import { I18nInjectionKey } from 'vue-i18n'
 
@@ -12,7 +12,7 @@ export default {
   setup() {
     const {
       global: { t }
-    } = inject(I18nInjectionKey)
+    } = inject<any>(I18nInjectionKey)
 
     return { t }
   }

packages/i18n/src/test/TestWebcomponent.vue

@@ -4,7 +4,7 @@
   <hr />
 </template>
 
-<script>
+<script lang="ts">
 import { inject } from 'vue'
 import { I18nInjectionKey } from 'vue-i18n'
 
@@ -12,7 +12,7 @@ export default {
   setup() {
     const {
       global: { t }
-    } = inject(I18nInjectionKey)
+    } = inject<any>(I18nInjectionKey)
 
     return { t }
   }

packages/i18n/vite.config.ts

@@ -28,7 +28,7 @@ export default {
     minify: false,
     emptyOutDir: false,
     lib: {
-      entry: path.resolve(__dirname, './src/lib.js'),
+      entry: path.resolve(__dirname, './src/lib.ts'),
       name: 'LowcodeDesignI18nHost',
       formats: ['es', 'umd'],
       fileName: (format) => `lowcode-design-i18n-host.${format}.js`