How do I compile a single file in Typescript?

Question

So I am trying to create an Electron version of my angular web app to run on desktops with a native look and feel.

I have the following script in package.json

{
  "name": "app",
  "version": "1.0.0",
  "main": "main.js",
  "license": "MIT",
  "productName":"example",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build-prod": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "electron-tsc": "tsc main.ts && ng build --base-href ./ && electron .",
  },

The main.ts file is basically the example given here. https://electronjs.org/docs/tutorial/first-app

Problem is that when I run the command 'npm run electron-tsc' typescript is scanning the subfolders of my directory and trying to compile my whole angular app also with lots of errors.

Like this.

node_modules/@types/selenium-webdriver/http.d.ts:24:14 - error TS2583: Cannot find name 'Map'. Do you need to change your target library? Try changing the lib compiler option to es2015 or later.

24 headers: Map; ~~~

node_modules/@types/selenium-webdriver/http.d.ts:48:14 - error TS2583: Cannot find name 'Map'. Do you need to change your target library? Try changing the lib compiler option to es2015 or later.

48 headers: Map; ~~~

node_modules/@types/selenium-webdriver/remote.d.ts:139:29 - error TS2583: Cannot find name 'Map'. Do you need to change your target library? Try changing the lib compiler option to es2015 or later.

139 setEnvironment(env: Map | {[name: string]: string} | null): this;

My main.ts has no imports and the command specifies to just compile main.ts

As it happens I do still get a valid main.js file generated and I can just run ng build --base-href ./ && electron . manually afterwards and everything works fine, it's just frustrating I can't get it to build and run with one command, and I don't understand the errors.

Here's my tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }

}

This might be due to automatic type inclusion. Try what the docs say to disable it: add "types": [] to your tsconfig.json. — Aaron Beall
Then I guess those types are included due to reference. I'm not sure why you get those compile errors but you should be able to suppress them using the --skipLibCheck option. That will skip type-checking in *.d.ts files. — Aaron Beall
--skipLibCheck on my tsc command worked! :) Feel free to add as an answer. I will just wait a little while just to see if any better answers come along that explain what the actual cause of the issue is. I'll accept if not. Thank you!! — Lenny D
What's odd is that the error cites missing Map but your lib is set to es2017 which should definitely have types for Map... is it possible that your tsconfig.json not getting picked up? If you use Map in main.ts does it compile? — Aaron Beall

Karol Majewski Karol Majewski · Accepted Answer · 2018-12-17T18:17:39

Using --skipLibCheck will suppress the errors, not fix them. It's okay in the short run (just to get you going while you deal with the root cause) but since it opts out from library type-checking entirely, it's really a footgun.

For TypeScript to scan a declaration file and include it in the compilation, it must be either something you depend on explicitly (you import or require in your project) or implicitly (it's added to types it in your tsconfig.json). Often times it's not exactly your dependency, but a dependency of your dependency. For real type-safety, everything in the tree must be in order. Sometimes it's just because the provided typings are imperfect, and need fixing.

You can start with updating @types/selenium-webdriver and updating your dependencies in general. Try running npx npm-check --update to see what needs updating.

If that doesn't help, you can write your type declarations for the library in question (and either send them to DefinitelyTyped or keep them in your project).

How do I compile a single file in Typescript?

1 Answers