vue3 ts 全局引入 ant-design/icons-vue 类型错误？

Question

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Antd from 'ant-design-vue'
//导入所有图标库
import * as Icons from "@ant-design/icons-vue";
import type { Component } from 'vue'

import 'reset.css/reset.css'
import 'ant-design-vue/dist/antd.css';
import '@/style/common.scss'


const app = createApp(App)

app.use(store).use(router).use(Antd)
// 全局引入icon
console.log('Icons', Icons)
for(const i in Icons){
    // console.log('i',i, Icons[i])
    app.component(i, Icons[i]);
}
app.mount('#app')

应该如何定义Icons的类型？

Answer 1

看着像是 i 的类型不对，for i 把 i 推断成 string，但是 Icons 的 key 得是一堆特定字符串，把 i 的类型限制成 Icons 的 key 试试

for (const iconName in Icons) {
    app.component(iconName, Icons[iconName as keyof typeof Icons])
  }