Typechecking not performed for SFC with setup and TS
Version
3.2.21
Reproduction link
Steps to reproduce
In the linked reproduction do the following.
- Run
yarn - Run
yarn build
Outside of the linked reproduction case, any SFC component that uses <script setup lang="ts"> with a simple type error shows the same behaviour. For example const x: string = false should suffice.
What is expected?
A component with type issues should fail the build as regular TS files would with the same issue.
What is actually happening?
Type issues are ignored.
The development environment highlights the issue but the compiler does not. I have tried the same thing without utilizing @vue/cli and instead using a custom Webpack configuration with vue-loader. That setup also ignores the type issues in the same way.
SFCs with <script lang="ts"> don't present the same issue, the following fails during build as expected.
<script lang="ts">
import { defineComponent } from 'vue';
const test: boolean = 'test'
export default defineComponent({
setup() {
return {
test
}
}
});
</script>
<template>
<div>{{test}}</div>
</template>
In my opinion a particular development environment should not be a prerequisite for generating typesafe code. If this is by design any workarounds are welcome.
@posva I appreciate the workaround but I don't agree with this issue being closed without further consideration or at least some explanation of why the Vue tools build incorrect TS code in this manner. Reading the docs I get the feeling that Typescript is pushed pretty hard and the current behaviour seems at odds with that.
that would be something to work out in the correct repository, where we already have an open issue for this - it's a problem with a dependency:
Great, it's a jungle trying to find the correct place to report things! Thanks for the link, I will track the progress there.
FYI, fork-ts-checker is being used for perf reasons, afaik. you should be able to remove that plugin and have ts-loader typecheck instead, which should work better as it will receive the compiled script already.
No guarantees, but may be worth a try.
I tried that too but the code that get's passed to ts-loader is the code generated by vue-loader and that contains type issues. In particular it reports TS7006: Parameter 'n' implicitly has an 'any' type..
The way I understand it fork-ts-checker get's passed the <script> blocks directly without any SFC-compilation.
any progress on this?
To check TS in <script setup>, you currently have to use vue-tsc in a separate process.
The CLI setup uses ts-loader, which handles Vue type checking support, but AFAIK it doesn't support <script setup> atm.
For the future, we no longer recommend type-checking as part of the bundler pipeline because it halts the transform of individual modules and makes the entire build process significantly slower.