Disable DOM library type definitions in nodejs project VSCode

Question

I want to disable DOM type definitions in a Node.js TypeScript project. I have configured TypeScript using the configuration shown in the snippet below. Despite explicitly setting the "lib" property to ["ES2016"], VS Code continues to suggest lib.dom.d.ts auto completions. The project seems to pull the definitions from the lib.dom.d.ts definition file that resides in VS Code (specifically the ~/.vscode/extensions directory, rather than from the node_modules directory. The end result seems to be a runtime error. Obviously Node.js has no use for the DOM library; is there some means for disabling the DOM library?

Using the configuration below (as stated above) does not work.

{
  "compilerOptions": {
    "lib": ["ES2016"],
    "target": "es6",
    "module": "commonjs",
    "skipLibCheck": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "allowJs": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "inlineSourceMap": true,
    "importHelpers": true,
    "alwaysStrict": true,
    "strict": true,
    "outDir": "build",
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop": true,
    "typeRoots": ["./node_modules/@types", "./typings"],
    "baseUrl": ".",
    "paths": {
      "#root/*": ["./*"]
    }
  },
  "include": [
    "src/**/*",
    "__tests__/**/*",
    "config/**/*",
    "scripts/bundle-test.ts"
  ],
  "exclude": ["node_modules"]
}

Hutchison

Are you using a non-built-in extension? When using your tsconfig.json, Both window and Comment are inaccessible for me. Perhaps it was a weird cache issue and you just needed to restart VSCode's TS server. – Versieversification

Does this possibly help you: #63109647? – Historiated

Answer 1

It is impossible to tell you how to configure your project in a way where you specify libraries that you wish to exclude. This is because TypeScript doesn't support any such mechanism in its tsconfig.json file for doing so. To know how to not include the DOM, you need to know how to configure your project to use, rather, that NOT-USE, ECMAScript libraries & standards.

When defining which ECMAScript libraries to include in your schema-defined tsconfig.json file, you need to consider two settings.

       The 1st being: "noLib": string[],

          and the 2nd: "lib": string[],

Rarely is noLib the Best Option to Use

---

Setting noLib to true is rarely necessary. When used (or set to true) the project will not auto-import libraries, many that you will have to import every single library, and type-definitions for those libraries, that you want to use. Now, this can be used to define everything you want, and leaving out everything like the DOM library that you don't want.

Typically Lib Will be the More Practical Property

Lib works by defining the ECMAScript Libraries that you want to be able to use.

"This question is specific to Node.js, and therefore, I will answer it as such" Typically with Node.js you can set lib to any recent version of the ECMA-262 Standard (aka ECMAScript) and be okay. The same is not true for JavaScript running in the browser. With Node.js you get a single controlled Runtime Environment, only ever used by those with programming experience. The browser, well you get every walk of life, and users who execute your code in VT terminals (okay, maybe not a real VT, but u get what I mean).

The ECMAScript Standards that you can assign as a value to the tsconfig.json "lib": [] property, are listed below in order of age (oldest --> newest).

• "ES5"
• "ES6"
• "ES7",
• "ES2015"
• "ES2016"
• "ES2017"
• "ES2020"
• "ES2019"
• "ES2021"
• "ESNext"

Side note on noLib again.

Since I took the time to compile this list, I figure I might as well offer it for noLib too. As I disclosed to you above, the tsconfig.json property noLib means you don't want any Libraries included by any version of the ECMA-262 standard, and you, yourself want to define, on an individual basis, which libraries that will be included (this also means you need to provide type information (see below for getting types). Below are the libraries you can define one-by-one.

!Please Note: For reasons beyond the scope of this answer, there are situations where using noLib to define a projects ECMA-Feature support can be UN-avoidable. And you must painstakingly list each feature, the standardization to use for the feature, and you must include, and properly configure, the types for each one you add.

"The libraries below are added to lib when noLib is set to true".

Using the libraries below, is the only way to be specific about the libraries you use. Even then, you still are not specifying what not to use though. So you cannot use this method to specifically "NOT USE DOM".

• "ES2015.Collection",
• "ES2015.Core",
• "ES2015.Generator",
• "ES2015.Iterable",
• "ES2015.Promise",
• "ES2015.Proxy",
• "ES2015.Reflect",
• "ES2015.Symbol.WellKnown",
• "ES2015.Symbol",
• "ES2016.Array.Include",
• "ES2017.Intl",
• "ES2017.Object",
• "ES2017.SharedMemory",
• "ES2017.String",
• "ES2017.TypedArrays",
• "ES2018",
• "ES2018.AsyncGenerator",
• "ES2018.AsyncIterable",
• "ES2018.Intl",
• "ES2018.Promise",
• "ES2018.Regexp",
• "ES2019.Array",
• "ES2019.Object",
• "ES2019.String",
• "ES2019.Symbol",
• "ES2020.BigInt",
• "ES2020.Promise",
• "ES2020.String",
• "ES2020.Symbol.WellKnown",
• "ESNext.Array",
• "ESNext.AsyncIterable",
• "ESNext.BigInt",
• "ESNext.Intl",
• "ESNext.Promise",
• "ESNext.String",
• "ESNext.Symbol",
• "DOM",
• "DOM.Iterable",
• "ScriptHost",
• "WebWorker",
• "WebWorker.ImportScripts",
• "Webworker.Iterable",
• "ES2020.SharedMemory",
• "ES2020.Intl",
• "ES2021.Promise",
• "ES2021.String",
• "ES2021.WeakRef",
• "ESNext.WeakRef",
• "es2021.intl"

---

LIBRARY TYPES CAN BE FOUND @

1. TypeScriptLang's Type-search App - Easy to use app
2. NPM via search for types - Its NPM...
3. Definitely-Typed GitHub Repo This isn't as easy to navigate as the other two options, but its cutting out the middle man. This is where NPM & TypeScriptLang's app get most of their types from.

---

---

Dishpan

This is exactly what I was looking for. – Contraception

@AlexisTyler I figured it would be. I had to figure this out myself about a year ago. Its one of my favorite features that pre-compiled JS (or TypeScript) offers. – Dishpan

@AlexisTyler MY FIRST POST HAD INCORRECT INFO!!! I edited my post so it holds only correct information now. Please let me know if you got it working, so we can make sure that you do. – Dishpan