HTMLElement is not defined - Typescript Execute

Question

So I set up a small project for some command line with typescript using tsx (typescript execute), however I need access to HTMLElement to manipulate some html and for some reason it is not defined.

My tsconfig looks like this:

{
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "dist",
    "target": "ESNext",
    "lib": [
      "ES2022",
      "DOM",
      "DOM.Iterable"
    ],
    "module": "ESNext",
    "sourceMap": true,
    "declaration": true,
    "declarationDir": "dist/types",
    "declarationMap": true,
    "moduleResolution": "node",
    "allowImportingTsExtensions": false,
    "strict": true,
    "noFallthroughCasesInSwitch": true,
    "esModuleInterop": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "noUncheckedIndexedAccess": true,
    "noUnusedParameters": true,
    "alwaysStrict": true,
    "strictNullChecks": true,
    "strictBindCallApply": true,
    "strictPropertyInitialization": true,
    "resolveJsonModule": false,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "allowSyntheticDefaultImports": true,
    "isolatedModules": true,
    "strictFunctionTypes": true
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "./src/"
  ]
}

My modules are

{
  "name": "Some test",
  "version": "1.0.0",
  "description": "SomeTest",
  "main": "index.ts",
  "type": "module",
  "bin": {
    "altertime": "src/index.ts"
  },
  "scripts": {
    "cli": "tsx src/index.ts"
  },
  "author": "peti446",
  "license": "ISC",
  "devDependencies": {
    "@types/clui": "^0.3.1",
    "@types/inquirer": "^9.0.3",
    "@types/node": "^20.5.1",
    "@types/yargs": "^17.0.24",
    "typescript": "^5.2.2"
  },
  "dependencies": {
    "@tiptap/html": "^2.1.6",
    "axios": "^1.4.0",
    "chalk": "^5.3.0",
    "clui": "^0.3.6",
    "form-data": "^4.0.0",
    "hashids": "^2.3.0",
    "inquirer": "^9.2.10",
    "inquirer-confirm": "^2.0.7",
    "knex": "^2.5.1",
    "log-with-statusbar": "^1.2.00",
    "mysql2": "^3.6.0",
    "tsx": "^3.12.7",
    "yargs": "^17.7.2"
  }
}

Am I doing something wrong ? Or maybe am I missing some modules?

Also the code of testing is:

#!/usr/bin/env tsx

const any: any = {};
if (any instanceof HTMLElement) {
    console.log("")
}

WebStorm IDE does not give out any error with the HTMLElement while linting, so that is fine, however when ran with TSX it just prints out the error that HTMLElement is not defined does anyone know what could be happening or point me on the right track? Thanks ^^

Answer 1

HTMLElement is window.HTMLElement, which is not defined in Node runtime, but in browsers; IDE linter doesn't know in which runtime the code will be executed. and, HTMLElement(from ECMAScript standard) is usually builtin TypeScript Interface for IDE, so it's reported as fine