How to enforce WebStorm not to ignore TypeScript insights in JavaScript files?

Viewed 172

I'm using WebStorm 2022.2 (Build #WS-222.3345.108). In an empty new project, I've added the ethers.js project as a custom third-party library. I've added the following HTML file to the project:

<!DOCTYPE html><html lang="en">
<head>
    <title>Test</title>
    <script type="text/javascript">
        /** @type {Contract} */
        let contract;
        /** @type {ContractTransaction} */
        let tx = contract.myMethod();
        tx.wait();
    </script>
    <script src="index.js"></script>
</head>
<body></body></html>

In the embedded script, WebStorm does correctly provide the code-completion facilities for the variables whose types are annotated by the JSDoc; also, all of their corresponding fields and methods are correctly presented by the code-completion, colored appropriately, and Ctrl-Clicking the tokens guides to the declaration points (most of which being in .ts files); even the ContractTransaction, that is a TypeScript interface, a TypeScript concept that JavaScript lacks, works like a charm.

WebStorm does a great job in the HTML file, but when the identical code is put in an external JavaScript file (as in the second <script> tag with the src attribute in the HTML above), WebStorm ignores the TypeScript declarations altogether!

WebStorm ignores TypeScript type declarations in JavaScript files

The aforementioned ignorance (ignoring the TypeScript declarations) in the index.js file, causes the following issues:

  • WebStorm believes the annotated type of Contract (at line 1) is declared in the contracts\lib\index.js file; ignoring the corresponding TypeScript declaration causes WebStorm to not to perceive that the class has an "index signature", which allows its objects to calmly expose any unforeseen properties; thus, it argues at line 4:
    Unresolved function or method myMethod()

  • WebStorm complains about the ContractTransaction type annotation at line 3, arguing:
    Unresolved variable or type 'ContractTransaction' (while it correctly spotted the corresponding declaration in the HTML file!)

  • Weirdly enough, WebStorm correctly recognizes the declaration of the wait() method at line 5; while in the previous entry, WebStorm argued it couldn't have found the type of ContractTransaction!! (only correctly & uninterestingly for our case, complains that Promise returned from wait is ignored)

So, how to force the WebStorm to utilize the relative TypeScript insights (denoted by the JSDoc type annotations) in an external JavaScript file (to have it consider the TypeScript insights, just like what it did on the HTML file)?

1 Answers

If you're getting weird/incorrect type completions, that might be because WebStorm is downloading type definitions itself to a different directory, which is sometimes the wrong version of the package.

You can disable this by opening the IDE's registry (ctrl+alt+/), and disabling typescript.external.type.definitions. This should force WebStorm to only uses the type definitions from the package that you've actually installed.

Related