vue3中使用ts

ref方式指定自定义组件类型

import { ElForm } from 'element-plus'

// InstanceType是无需显示引入的
type FormInstance = InstanceType<typeof ElForm>
const elFormRef = ref<FormInstance>()

某种类型可以是自定义的多种类型

type RouteLocationRaw = string | (RouteQueryAndHash & LocationAsPath & RouteLocationOptions) | (RouteQueryAndHash & LocationAsRelativeRaw & RouteLocationOptions);

Composition API形式

<script setup lang="ts">
import { computed, toRefs } from 'vue'
import { Expand } from '@element-plus/icons-vue'
import { SystemMenuType } from '@/system'
import { SvgIcon } from 'components/index'
import { useRouter } from 'vue-router'

const props = withDefaults(
  defineProps<{
    /**
     * 是否启用侧边栏风格模式. 默认:true. 表示垂直菜单，否则表示水平菜单
     */
    enableSideModel?: boolean
    /**
     * 菜单是否收缩(只有enableSideModel为true时有效). 默认: false
     */
    menuCollapse?: boolean
    /**
     * 菜单数据. 默认:空数组
     */
    menuArr?: SystemMenuType[]
  }>(),
  { enableSideModel: true, menuCollapse: false, menuArr: () => [] }
)
/* eslint-disable */
const $emits = defineEmits({
  /**
   * 菜单展开/收缩事件
   * @param collapse
   */
  menuCollapse: (collapse: boolean) => true,
})
/* 
下面这种方式也是可以的，不过上面的方式，可以进行类型检查，
并且写起来更方便一边，不过要注意使用 eslint-disable 和 eslint-enable 
来去除eslint相关警告
*/
// const $emits = defineEmits<{
//   /**
//    * 菜单展开/收缩事件
//    * @param collapse true表示收缩, false表示展开
//    */
//   (e: 'menuCollapse', collapse: boolean): void
// }>()

/* eslint-enable */
const { enableSideModel, menuCollapse } = toRefs(props)
const enableJsMenuModelClass = computed(() =>
  enableSideModel.value ? 'jsSideMenuModel' : 'jsTopMenuModel'
)
const elMenuMode = computed(() =>
  enableSideModel.value ? 'vertical' : 'horizontal'
)

/**
 * 判断是否有子菜单
 * @param menuItem
 */
function hasChildrenMenu(menuItem: SystemMenuType) {
  return menuItem.children && menuItem.children.length > 0
}

function buildIndex(menuItem: SystemMenuType, idx?: number) {
  if (idx) {
    return `${menuItem.code}-${idx}`
  } else {
    return menuItem.code
  }
}

function buildMenuName(menuItem: SystemMenuType) {
  return menuItem.name
}

function onElMenuCollapse() {
  $emits('menuCollapse', !menuCollapse.value)
}

const $router = useRouter()

function onMenuItemClick(menuItem: SystemMenuType) {
  if (menuItem.url) {
    if (
      menuItem.url.startsWith('http://') ||
      menuItem.url.startsWith('https://')
    ) {
      window.open(menuItem.url)
    } else {
      $router.push({ path: menuItem.url })
    }
  }
}
</script>

<template>
  <div class="cSystemMenu" :class="enableJsMenuModelClass">
  </div>
</template>

<style lang="scss" scoped>
</style>

Options API

<template>
  <div>
    <h1>测试界面</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';

export interface ColumnProps {
  id: number;
  title: string;
  avatar: string;
  description: string;
}

export default defineComponent({
  name: 'ColumnList',
  props: {
    list: {
      type: Array as PropType<ColumnProps[]>,
      required: true,
    },
    success: { type: String },
    callback: {
      type: Function as PropType<() => void>
    },
  },
  setup() {
    return {};
  },
});
</script>

<style lang="less" scoped>
</style>

参考文章

Vue3 + TS 最佳实践

TypeScript高级特性