Version

3.2.19

Reproduction link

sfc.vuejs.org/

Steps to reproduce

In any components code write: type TestType = { first: string second: number } const testObject: TestType = { first: 'first', second: 1111 } console.log(testObject.foo)

What is expected?

Application expected to show TSError TS2339: Property 'foo' does not exist on type 'TestType'.

What is actually happening?

Page rendered as if there is no errors.

But IDE shows error correctly.

npm run serve - informs that No issues found.

I just noticed such erroneous behavior. Other errors working properly. For example if I write:

In any components code write:

type TestType = { first: string second: number } const testObject: TestType = { first: 'first', second: 1111 } console.log(wrongObject)

Then page stops rendering and informs of Error - wrongObject' is not defined
npm run serve - informs that there are errors.

This is rather expected. It would be a huge pain for most users if any TS error prevented the page from rendering by default. You can probably configure it otherwise if you want to.

As far as I remember until today any TS Error prevented page from rendering. Why the behavior changed? Ok which errors should stop rendering and with should not? Is there a list?

A syntax or runtime error prevents the page from rendering but type errors do not. This is one of the benefits of using TS: it will generate JS code even if it's not type safe.

Also, you catch type errors before going to production with TS or vue-tsc, not during development. Feel free to develop a plugin (vite/webpack) that shows an overlay for those errors

I've been working with vue 3 and TS since the very beginning. And the behavior was that any TS error stopped compilation. Now this behavior is broken, and you try to prove it is normal, which is not.

Cud you invite somebody else to conversation, as it seems to me your are wrong.

That depends on how you configure your dev server.

If you can provide a boiled down repro with steps that shows how it used to work with a previous version of Vue and it doesn't work anymore, I will take another look.

It is very basic vue-cli installation. Nothing special.

{
  "name": "vue4",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@vuelidate/core": "^2.0.0-alpha.16",
    "@vuelidate/validators": "^2.0.0-alpha.13",
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "ol": "^6.5.0",
    "vue": "^3.0.0",
    "vue-i18n": "^9.1.6",
    "vue-router": "^4.0.8",
    "xstate": "^4.19.1"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.0.0",
    "prettier": "^2.2.1",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "typescript": "~4.1.5"
  }
}

If Vue silently works with such lines:

const aBool = ref(true)
aBool.value = 'str'

Then something is wrong. Even browser console is silent. Previously errors were in every place in such a case: in browser console. In browser itself. And in console where I run 'npm run serve'.

Then put it in a repo (with only vue, no need for any of your other deps like vue-router, xstate, etc) with repro steps and specify what Vue version used to work.

I understand that developers team thinks it is normal to compile even if there is TS Errors, and it is not a bug.

But it makes no sense - I don't need running application with type errors. It is useless. And instead of Vite telling me that there are TS errors the developer will search red lines in IDE.

Anyway may be you cud advise a way to inform vue compiler not to compile in case my IDE (PHPStorm) finds TS errors. May be you know the way how to modify:

  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "serve": "vite preview"
  }

so that it will stop compiling on TS errors.

Nope. No reply. I need "dev" to fail when typescript errors because of a collegue who needs to be forced to learn typescript!