Bug Type: Build
Environment
- Vue Version:
3.3.4
- Element Plus Version:
2.3.9
- Browser / OS:
Chrome 114.0.5735.106 / macOS 10.15.7
- Build Tool:
Vite
Reproduction
Related Component
el-table
Reproduction Link
Steps to reproduce
- pnpm create vite
- pnpm add element-plus
- Rewrite the hellword.vue
The point isdefineExpose({ tableRef });
// hellword.vue
<template>
<div>{{ msg }}</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import type { ElTable } from 'element-plus';
interface Props {
msg: string;
}
withDefaults(defineProps<Props>(), {});
const tableRef = ref<InstanceType<typeof ElTable>>();
defineExpose({ tableRef });
</script>
<style scoped></style>
- add the command
"build:types": "vue-tsc --declaration --emitDeclarationOnly"
topackage.json
// package.json
"scripts": {
"dev": "vite",
"build": "vite build && pnpm build:types",
"preview": "vite preview",
"build:types": "vue-tsc --declaration --emitDeclarationOnly"
},
// tsconfig.json
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"declarationDir": "./dist/types",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}
- run
pnpm build:types
What is Expected?
Run successfully without error and generate "hellword.d.ts" file
|- dist/types
|- HelloWorld.d.ts
|- App.vue.d.ts
|- main.d.ts
What is actually happening?
no "hellword.d.ts" file was generated
|- dist/types
|- App.vue.d.ts
|- main.d.ts
Additional comments
if use ElTree, there is no problem
I found that the reason is that the vite-project/node_modules/.pnpm/registry.npmmirror.com+element-plus@2.3.9_vue@3.3.4/node_modules/element-plus/es/components/table/index.d.ts
that was imported lodash
debouncedUpdateLayout: import("lodash").DebouncedFunc<() => void>;
Deleting this line or rewrite this line debouncedUpdateLayout: any
is fine
2条答案
按热度按时间b5buobof1#
@quechenping
Deriving from Hypotheses in the additional comments.
Expected
ElInput
didn't containdebouncedUpdateLayout: import("lodash").DebouncedFunc<() => void>;
.ElInput
I will get the right output, after runpnpm build:types
, it will output HelloWorld.d.ts.Actually Happening
It didn't.
Conclusion
So Hypotheses may be incorrect.
Some Tracing Results
HelloWorld.d.ts contains
.type.js
import.The component import to HelloWorld.vue which could output HelloWorld.d.ts has
.type.d.ts
.Tree
The component import to HelloWorld.vue which couldn't output HelloWorld.d.ts didn't have
.type.d.ts
.Table
Conclusion
The reason why some components could output
.d.ts
since they have.type.d.ts
.The reason why some components couldn't output
.d.ts
since they don't have.type.d.ts
.How to fix
Add
.type.d.ts
for each component.cyej8jka2#
Thanks for look at this question
but why is it related to the
.type.d.ts
why ElTable don't output
.type.d.ts
I went back through the source code, found another question
its here defined
interface AnyObject
here defined
filterPanels:Ref<AnyObject>
after
run build:types
, thisAnyObject
is missing...and i can't find the definition of
AnyObject
and why does table appear
table-header/index.d.ts