Can type definitions be more automatic for beginners?

I’ve seen a lot of people ask how they can get type definitions for Cypress in JavaScript. As it is right now, this in not automatic. We spent a lot of time getting type definitions to “just work” for Cypress commands and various aspects of the Cypress API, but many people aren’t getting that benefit. I’ve seen some people have success making a tsconfig.json file to force the TypeScript language service to work with Cypress type definitions. This definitely works better for VSCode. I’ve seen people give up trying to get it to work with WebStorm before just switching to VSCode.

I use the tsconfig.json approach since my projects are written in TypeScript and that config file already exists. I don’t have much experience with VSCode or other editors writing JavaScript and how types are pulled in. For most libraries that have exports, type definitions should be pulled in with a .d.ts file next to the source sharing the same base name. Cypress defines globals so type definitions files need to be manually included. Maybe a solutions is for when Cypress lays down support files (config, folders, examples, etc), also lay down a tsconfig.json file? Anyone with experience with WebStorm or editors? Would that solution work?

• Operating System: N/A
• Cypress Version: 1.4.1
• Browser Version: N/A

Is this a Feature or Bug?

Feature

[bahmutov]

Actually I found a perfect way to use our types @NicholasBoll

Just add a comment to the JS spec file

/// <reference types="Cypress" />

Nothing else is necessary (neither typescript compiler, not jsconfig.json, nor tsconfig.json).

Example: spec file without anything. No IntelliSense

Spec file with reference comment: full IntelliSense in VSCode

[haf]

I’m also trying to get this set up; I’ve followed the guide as near as I could (but I did install cypress with yarn). I can start cypress and I can write tests, but I can’t get typescript code competition to work, despite follow the docs and disabling any plugins I can imagine disrupt code completition. Here’s what my workspace looks like:

I’ve tried with tsconfig.json in both project root (one below) and in cypress/ folder, but to no avail. I’ve also npm install -g typescript to get the compiler, so that these command show their respective outputs https://code.visualstudio.com/docs/languages/typescript. Also, like you can see, I’ve added the triple-slash directive on top of the file.

---

EDIT: I had a look at the Developer Console in VSCode and it had lots of typescript errors… I then added this to tsconfig.json:

{
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true,
   ...
}

and restarted VSCode in the folder with tsconfig.json in it. Now it started working.

---

EDIT 2: that was probably because I selected “Typescript” in the bottom language selector drop-up. However, adding "checkJs": true, to tsconfig.js and restarting seemingly now has turned on TS completion for all JS files in the cypress project.