element-plus [Build] [table] builds using vue-tsc did not generate .d.ts file

3gtaxfhh  于 5个月前  发布在  其他
关注(0)|答案(2)|浏览(45)

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

  • el-table

Github Repo

Steps to reproduce

  1. pnpm create vite
  2. pnpm add element-plus
  3. Rewrite the hellword.vue
    The point is defineExpose({ 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>
  1. add the command "build:types": "vue-tsc --declaration --emitDeclarationOnly" to package.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" }]
}
  1. 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

b5buobof

b5buobof1#

@quechenping

Deriving from Hypotheses in the additional comments.

Expected

  • I found that ElInput didn't contain debouncedUpdateLayout: import("lodash").DebouncedFunc<() => void>; .
  • If import ElInput I will get the right output, after run pnpm 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

  • DatePicker

  • The component import to HelloWorld.vue which couldn't output HelloWorld.d.ts didn't have .type.d.ts .

  • Table

  • Input

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.

cyej8jka

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 , this AnyObject is missing...
and i can't find the definition of AnyObject
and why does table appear table-header/index.d.ts

相关问题