vuejs/tsconfig

tsconfig throws errors with TypeScript 5.0

mxschmitt opened this issue · 8 comments

Currently these two options are set: importsNotUsedAsValues and preserveValueImports:

tsconfig/tsconfig.json

Lines 19 to 23 in 5b93351

// For `<script setup>`
// See <https://devblogs.microsoft.com/typescript/announcing-typescript-4-5-beta/#preserve-value-imports>
"preserveValueImports": true,
// Enforce using `import type` instead of `import` for types
"importsNotUsedAsValues": "error",

which result with TypeScript 5.0-beta in an error.

error TS5101: Flag 'importsNotUsedAsValues' is deprecated and will stop functioning in TypeScript 5.5. Specify 'ignoreDeprecations: "5.0"' to silence this error.
  Use 'verbatimModuleSyntax' instead.

error TS5101: Flag 'preserveValueImports' is deprecated and will stop functioning in TypeScript 5.5. Specify 'ignoreDeprecations: "5.0"' to silence this error.
  Use 'verbatimModuleSyntax' instead.

Workaround:

{
  "compilerOptions": {
    "ignoreDeprecations": "5.0"
  }
}

in your config.

mat813 commented

TypeScript 5.0 is out now.

I'm using @tsconfig/node18-strictest and get the following error:

error TS5101: Option 'importsNotUsedAsValues' is deprecated and will stop functioning in TypeScript 5.5. Specify compilerOption '"ignoreDeprecations": "5.0"' to silence this error.
  Use 'verbatimModuleSyntax' instead.
{
  "extends": "@tsconfig/node18-strictest",
  "compilerOptions": {
    "module": "esnext"
  },
  "ts-node": {
    "esm": true
  }
}

+1

+1

If you use TS 5.0 in package.json, e.g.

"devDependencies": {
  ...
  "typescript": "^5.0.3"
}

then in your tsconfig.json you can now use Verbatim Module Syntax which replaces the two options, in their respective TSConfig Reference sections it says:

Deprecated in favor of verbatimModuleSyntax.

When you add it, you'll get another error:

Option 'isolatedModules' is redundant and cannot be specified with option 'verbatimModuleSyntax'.

So, in the end the following config worked for me:

"compilerOptions": {
  ...
  // "isolatedModules": true,
  // "preserveValueImports": true,
  // "importsNotUsedAsValues": "error",
  "verbatimModuleSyntax": true,
}

My tsconfig.app.json uses @vue/tsconfig/tsconfig.web.json, so using verbatimModuleSyntax doesn't help in this case...

If you're using @vue/tsconfig/tsconfig.web.json or similar, you can reset those properties that are erroring when you enable verbatimModuleSyntax

This worked for me:

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "compilerOptions": {
    // workaround for https://github.com/vuejs/tsconfig/issues/6
    "preserveValueImports": false,
    "importsNotUsedAsValues": "remove",
    "verbatimModuleSyntax": true,
    // end workaround
  },
}

Si estás usando @vue/tsconfig/tsconfig.web.json o similar, puede restablecer las propiedades que están cometiendo errores cuando habilita verbatimModuleSyntax

Esto funcionó para mí:

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "compilerOptions": {
    // workaround for https://github.com/vuejs/tsconfig/issues/6
    "preserveValueImports": false,
    "importsNotUsedAsValues": "remove",
    "verbatimModuleSyntax": true,
    // end workaround
  },
}

solved my problem