I'm encountering a persistent TypeScript error that I can't seem to suppress, not even with @ts-ignore. Oddly enough, the code functions perfectly at runtime when TypeScript is disabled temporarily for testing. Is TypeScript misbehaving in this scenario, and is there a workaround available?
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)
Below is the code snippet (from a Vue 3 application):
<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 configuration in the tsconfig file:
{
"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"
]
}