Giter VIP home page Giter VIP logo

tsconfig's Introduction

@vue/tsconfig

TSConfigs for Vue projects to extend.

Requires TypeScript >= 5.0. For TypeScript v4.5 to v4.9, please use v0.1.x.

See below for the changes in v0.3.x.

Installation

npm add -D @vue/tsconfig

Usage

Add one of the available configurations to your tsconfig.json:

The Base Configuration (Runtime-agnostic)

"extends": "@vue/tsconfig/tsconfig.json"

Configuration for Browser Environment

"extends": "@vue/tsconfig/tsconfig.dom.json"

Configuration for Node Environments

First install the base tsconfig and types for the Node.js version you are targeting, for example:

npm add -D @tsconfig/node18 @types/node@18

If you are not using any bundlers, the Node.js code doesn't rely on any Vue/Vite-specific features, then these would be enough, you may not need to extend the Vue TSConfig:

"extends": "@tsconfig/node18/tsconfig.json",
"compilerOptions": {
  "types": ["node"]
}

Otherwise, if you are trying to use Vue components in Node.js environments (e.g. Server Side Rendering, Vitest, etc.), you will need to extend the Vue TSConfig along with the Node.js TSConfig:

"extends": [
  "@tsconfig/node18/tsconfig.json",
  "@vue/tsconfig/tsconfig.json"
],
"compilerOptions": {
  "types": ["node"]
}

Make sure to place @vue/tsconfig/tsconfig.json after @tsconfig/node18/tsconfig.json so that it takes precedence.

Emitting Declaration Files

As most Vue projects are built with bundlers, the default Vue TSConfig does not emit declaration files. If you are building a library or a component library, you can enable declaration file emitting by also extending @vue/tsconfig/tsconfig.lib.json in your tsconfig.json:

"extends": [
  "@vue/tsconfig/tsconfig.dom.json",
  "@vue/tsconfig/tsconfig.lib.json"
]

Migrating from TypeScript < 5.0

  • The usage of base tsconfig.json is unchanged.
  • tsconfig.web.json is now renamed to tsconfig.dom.json, to align with @vue/runtime-dom and @vue/compiler-dom.
  • tsconfig.node.json is removed, please read the Node.js section above for Node.js usage.

Some configurations have been updated, which might affect your projects:

  • moduleResolution changed from node to bundler. This aligns more closely to the actual resolution rules in modern bundlers like Vite. However, some existing code may be broken under this new mode
    • Most notably, it implies "resolvePackageJsonExports": true by default, so it prefers the exports field of package.json files when resolving a third party module.
      • Some third party packages may not have this field set up correctly, but the bugs were previously hidden by the node mode.
      • Some notable packages include [email protected], [email protected], [email protected], etc.
      • While vue-i18n has fixed this issue in v9.3 beta, and vuetify will solve the issue in v3.3, other packages may not be so quick to fix. In that case, you can override the compilerOptions.resolvePackageJsonExports option to false in your tsconfig.json to temporarily work around the issue.
      • But we encourage you to submit PRs to these packages to fix the bugs, so that we can all move forward to the new resolution mode. You can use tools like publint and Are the types wrong? to help you find and debug the issues.
    • Another small breaking change is that --moduleResolution bundler does not support resolution of require calls. In TypeScript files, this means the import mod = require("foo”) syntax is forbidden.
  • The lib option in tsconfig.dom.json now includes ES2020 by default.
    • Previously it was ES2016, which was the lowest ES version that Vue 3 supports.

    • Vite 4 transpiles down to ES2020 by default, this new default is to align with the build tool.

    • This change won't throw any new errors on your existing code, but if you are targeting old browsers and want TypeScript to throw errors on newer features used, you can override the lib option in your tsconfig.json:

      {
        "extends": "@vue/tsconfig/tsconfig.dom.json",
        "compilerOptions": {
          "lib": ["ES2016", "DOM", "DOM.Iterable"]
        }
      }

tsconfig's People

Contributors

joerick avatar lupas avatar sodatea avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

tsconfig's Issues

Add "noEmit": true to compilerOptions

The current config gives the following schema error:

Option 'allowImportingTsExtensions' can only be used when either 'noEmit' or 'emitDeclarationOnly' is set.

Setting "noEmit": true, in compilerOptions seems to resolve it, as Vite is doing the actual transpiling this seems to work fine.

Import of vue-i18n fails on vue/tsconfig versions 0.4.0

When i try to install vue-i18n@9 it says:

Could not find a declaration file for module 'vue-i18n'. '/home/user/repo/node_modules/vue-i18n/dist/vue-i18n.esm-bundler.js' implicitly has an 'any' type.
There are types at '/home/user/repo/node_modules/vue-i18n/dist/vue-i18n.d.ts', but this result could not be resolved when respecting package.json "exports". The 'vue-i18n' library may need to update its package.json or typings.ts(7016)

Works fine with 0.2.0. Fails with every version greater than that.

tsconfig throws errors with TypeScript 5.0

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.

Remove reset of "types" field

I'm guessing originally the reset of "types" was put in place when the tsconfig.dom.json still used the tsconfig.node.json import. Now, however, this reset has become redundant; the field is not set within the base tsconfig.json.

Due to this reset, I ran into an issue where none of my @types imports were loaded in. The empty array does not let TypeScript revert to the default configuration.

It should be safe to remove the line "types": [], so people may use their installed @types again.

Enhancement: a separate config entry for `module: node16/nodenext`

References:

Note that don't use node12 because as said in microsoft/TypeScript#46452

Node 14.8 added top-level await, but Node 12 doesn't have it. I think this omission is enough of a wart that starting at Node 12 is the wrong move.

tsconfig v0.5 regression with json imports

Let's say a file contains a JSON import:

import en from '@/locales/en.json';

then the type-check throws with:

src/i18n.ts:2:16 - error TS6307: File '/home/projects/github-nzwcnu/src/locales/en.json' is not listed within the file list of project '/home/projects/github-nzwcnu/tsconfig.vitest.json'. Projects must list all files or use an 'include' pattern.

2 import en from '@/locales/en.json';

Reverting to v0.4 makes the error go away.

See https://stackblitz.com/edit/github-nzwcnu?file=src%2Fi18n.ts for a small repro
Run npm i and npm run type-check

Adding `noEmit: true` is a breaking change and should be a major release version

Adding noEmit: true in #26 should be considered a breaking change and bump the major version.

The comment added with the change, shown below, makes too many assumptions on when the tsconfig is extended and the behavior of the host application.

// Most non-library projects don't need to emit declarations.
// So we add this option by default to make the config more friendly to most users.

Even in the component libraries where we extend @vue/tsconfig/tsconfig.json, we have our own settings for exporting/generating types, etc. via flags that should not be overridden by this extendable configuration.

IMO this change should be reverted as it is too opinionated.

Cannot find base config file @vue/tsconfig/tsconfig.web.json

I upgraded from 0.1.3 to 0.3.2 and am now seeing the error "Cannot find base config file @vue/tsconfig/tsconfig.web.json"

Full stacktrace is below:


> vue-tsc --noEmit --skipLibCheck

▲ [WARNING] Cannot find base config file "@vue/tsconfig/tsconfig.web.json" [tsconfig.json]

    tsconfig.json:2:13:
      2 │   "extends": "@vue/tsconfig/tsconfig.web.json",
        ╵              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

vite v4.3.2 building for production...
✓ 2 modules transformed.
✓ built in 785ms
[vite:esbuild] failed to resolve "extends":"@vue/tsconfig/tsconfig.web.json" in /<my-path>/tsconfig.json
file: /<my-path>/main.ts
error during build:
TSConfckParseError: failed to resolve "extends":"@vue/tsconfig/tsconfig.web.json" in /<my-path>/tsconfig.json
    at resolveExtends (file:////<my-path>/node_modules/vite/dist/node/chunks/dep-7efa13d7.js:13544:9)
    at parseExtends (file:////<my-path>/node_modules/vite/dist/node/chunks/dep-7efa13d7.js:13498:28)
    at parse$f (file:////<my-path>/node_modules/vite/dist/node/chunks/dep-7efa13d7.js:13436:24)
    at async loadTsconfigJsonForFile (file:////<my-path>/node_modules/vite/dist/node/chunks/dep-7efa13d7.js:14057:24)
    at async transformWithEsbuild (file:////<my-path>/node_modules/vite/dist/node/chunks/dep-7efa13d7.js:13742:36)
    at async Object.transform (file:////<my-path>/node_modules/vite/dist/node/chunks/dep-7efa13d7.js:13867:32)
    at async transform (file:////<my-path>/node_modules/rollup/dist/es/shared/node-entry.js:23499:16)
    at async ModuleLoader.addModuleSource (file:////<my-path>/node_modules/rollup/dist/es/shared/node-entry.js:23705:30)
ERROR: "build-only" exited with 1.

Cannot install the package anymore

Running the command npm i @vue/[email protected] returns the following error:

npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@vue%2ftsconfig - Not found
npm ERR! 404 
npm ERR! 404  '@vue/[email protected]' is not in this registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404 
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

Important update about 0.3.*

I have seen that the ts.*.json has been changed for several times in succession. For the purposes and scenarios of ts.config.app.json and tsconfig.node.json and tsconfig.json, could you please mark them in the document for better experience

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.