skip to Main Content

I’m not sure whether I am misunderstanding something here or it is a TypeScript / VSCode bug… why am I not always getting the error shown in example.ts when I use artificialLatency without importing it?

I expect to see the error regardless of whether I export it or not, since I’m never importing it, but the error disappears when I delete export.

enter image description here
enter image description here

I am using the default react-ts Vite template

example.ts

const myOtherVar = artificialLatency;
console.log(myOtherVar);

example2.ts

export const artificialLatency = 2000;
console.log(artificialLatency);

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

tsconfig.node.json

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

2

Answers


  1. When a JavaScript or TypeScript file does not contain any import or export keywords, it is not a module and the variables such as artificialLatency may end up on the global scope so the code may work (for example if artificialLatency.ts is compiled to artificialLatency.js and added to a Web page via a <script> tag).

    The best thing to do is to ensure all files that are supposed to be modules contain at least one import or export keyword.

    Login or Signup to reply.
  2. Historically, TypeScript used the presence of import and export statements as a heuristic for determining whether a file should be checked as a module instead of a classic script.

    There is a compiler option moduleDetection which can be configured to control this behavior:

    This setting controls how TypeScript determines whether a file is a script or a module.

    There are three choices:

    • "auto" (default) – TypeScript will not only look for import and export statements, but it will also check whether the "type" field in a package.json is set to "module" when running with module: nodenext or node16, and check whether the current file is a JSX file when running under jsx: react-jsx.

    • "legacy" – The same behavior as 4.6 and prior, usings import and export statements to determine whether a file is a module.

    • "force" – Ensures that every non-declaration file is treated as a module.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search