schl3ck/ios-scriptable-types

Typescript using built-in Request instead of Scriptable Request

Closed this issue · 1 comments

The Issue

I am currently trying to code a Scriptable script with typescript, webpack, and schl3ck/ios-scriptable-types. However, as I tried to create a new Request, Typescript IntelliSense used the node.js Request instead of the Scriptable Request for linting.

This is not specifically an issue with this repo, but rather a problem with how VSCode IntelliSense handles the naming conflict of the built-in node.js Request and the Scriptable Request. I am not asking for a fix by this repo owner (because I think there is none), but rather if you know how to fix this issue.

I can also just // @ts-ignore the line, but this will give me an any type, which I don't want to do.

Files

./.eslintrc

{
  "root": true,
  "env": {
    "es2022": true,
    "jest": true
  },
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": ["plugin:@typescript-eslint/recommended", "@scriptable-ios"],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {}
}

./jsconfig.json

{
  "compilerOptions": {
    "lib": ["ES2021"],
    "moduleDetection": "force"
  }
}

./tsconfig.json

{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "es2017",
    "outDir": "./dist",
    "noImplicitAny": true,
    "skipLibCheck": true
  },
  "include": ["./src/package/**/*"]
}

./package.json

{
  "name": "spm-package",
  "type": "module",
  "scripts": {
    "build": "npx webpack --mode=production --node-env=production",
    "watch": "npx webpack --mode=development --node-env=development --watch",
    "test": "npx jest"
  },
  "devDependencies": {
    "@scriptable-ios/eslint-config": "^1.7.0",
    "@types/scriptable-ios": "latest",
    "@typescript-eslint/eslint-plugin": "^5.46.0",
    "@typescript-eslint/parser": "^5.46.0",
    "eslint": "latest",
    "eslint-webpack-plugin": "^3.2.0",
    "jest": "^29.3.1",
    "ts-loader": "^9.4.2",
    "typescript": "^4.9.4",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1"
  }
}

./src/package/Package.ts

export default class Package {
  author: string;
  name: string;
  version: string;

  description: string;
  fileData: string | null;

  constructor(author: string, name: string, version: string) {
    this.author = author;
    this.name = name;
    this.version = version;
  }

  async fetchPackageInfo() {
    const url = ``;
    const data = await new Request(url).loadJSON();
  }
}

Output by IntelliSense

image

The Request type used by IntelliSense is located at
/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/node_modules/typescript/lib/lib.dom.d.ts

Removing the DOM library from my tsconfig.json seems to have done the trick:

{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "es2017",
    "outDir": "./dist",
    "noImplicitAny": true,
    "lib": ["ES2017"]
  },
  "include": ["./src/package/**/*"]
}