TypeScript Error - Variable only refers to a type, but is being used as a value here-CodePudding

I am getting this TypeScript error and I cannot supress it no matter what I do (even @ts-ignore does not remove the error). But the code works at runtime perfectly fine (I disabled TS for a moment to test it). What is going on here, is there a way around this? It seems that TypeScript is wrong here?

TS: 'HeTreeComponent' only refers to a type, but is being used as a value here.ts(2693)
TS: 'Fold' only refers to a type, but is being used as a value here.ts(2693)
TS: 'Draggable' only refers to a type, but is being used as a value here.ts(2693)
TS: 'foldAll' only refers to a type, but is being used as a value here.ts(2693)
TS: 'Check' only refers to a type, but is being used as a value here.ts(2693)

Here is my code (a Vue 3 app):

<script setup lang="ts">
    import { Tree as HeTreeComponent, Fold, Draggable, foldAll, Check } from 'he-tree-vue'

    // @ts-ignore <---- does not help
    const HeTree = HeTreeComponent.mixPlugins([ Fold, Draggable, foldAll, Check ])

    // TS ERROR: 'HeTreeComponent' only refers to a type, but is being used as a value here.ts(2693)

    // TS ERROR: 'Fold' only refers to a type, but is being used as a value here.ts(2693)
</script>

Here is my tsconfig

{
    "compilerOptions": {
        "target": "esnext",
        "baseUrl": "./src/",
        "useDefineForClassFields": true,
        "module": "esnext",
        "moduleResolution": "node",
        "strict": true,
        "strictNullChecks": true,
        "forceConsistentCasingInFileNames": true,
        "useUnknownInCatchVariables": false,
        "jsx": "preserve",
        "paths": {
            "@/*": ["./*"],
        },
        "sourceMap": true,
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "lib": ["esnext", "dom"],
        "isolatedModules": false,
        "skipDefaultLibCheck": true,
        "skipLibCheck": true,
        "strictFunctionTypes": true,
        "allowJs": true,
    },

    "include": [
        "src/**/*.ts",
        "src/**/*.d.ts",
        "src/**/*.tsx",
        "src/**/*.vue",
        "components.d.ts"
    ]
}

CodePudding user response：

I manged to fix the problem by creating a new scope where @ts-ignore works.

<script setup lang="ts">
    import { Tree as HeTreeComponent, Fold, Draggable, foldAll, Check } from 'he-tree-vue'

    // Create a new scope to ignore a TS error, bug with he-tree-vue lib.
    const HeTree: HeTreeComponent = (() => {
        // @ts-ignore
        return HeTreeComponent.mixPlugins([ Fold, Draggable, foldAll, Check ])
    })()
</script>

CodePudding user response：

The package he-tree-vue seems to be separately defining Tree as a type here https://github.com/phphe/he-tree-vue/blob/vue3/types/_.ts and as a object here https://github.com/phphe/he-tree-vue/blob/vue3/src/components/Tree.js

However the README says "Please check the reconstructed new version he-teee. It has virtualization list feature and Typescript friendly." (https://github.com/phphe/he-tree) so you might want to consider that.