Can type definitions be more automatic for beginners?

[NicholasBoll]

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

[jennifer-shehane]

I think some documentation on the subject in our docs could also mitigate some of the issues for beginners.

I created a new issue in our docs to get the ball rolling here: cypress-io/cypress-documentation#400. Our documentation is open source and contributions are welcome. 😄

[bahmutov]

I agree with you @NicholasBoll and was thinking along the same lines. I setup json schema cypress.json in VSCode once using https://docs.cypress.io/guides/references/configuration.html#IntelliSense and just enjoy it so much! I want the same experience for Cypress cy.get ... typing as well. I still have not found a reliable way to get IntelliSense in VSCode. Maybe this is because of globals, and if we allowed importing local NPM api it would work better.

[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

[bahmutov]

I could get IntelliSense to work in Atom (but it is much much worse) using TypeScript package and only in TS files

So my personal workflow for now would be to add reference comment to spec JS files to enable IntelliSense.

[NicholasBoll]

That's nice that the reference directive works in VSCode. I'm assuming that since it is part of the TypeScript language service it would also work in other IDEs using it (including WebStorm). Atom may not use the TypeScript language service for regular JS files without additional configuration.

[bahmutov]

Yes, I agree - and for JS spec files using reference might be the fastest way to get IntelliSense

[NicholasBoll]

So maybe having Cypress example code that uses the reference directive (/// <reference types="cypress" />) with some notes in the documentation would be enough to close this issue?

Creating a tsconfig.json is possible, but might have too many edge cases.

[brian-mann]

@jennifer-shehane can you look at this / reference this issue in your PR for a Tooling section in the docs? Thx

[jennifer-shehane]

As brian mentioned, I've opened a WIP pull request for a doc specific to TypeScript support. I would love input + content suggestions as I am fairly new to using TypeScript myself! cypress-io/cypress-documentation#466

[NicholasBoll]

I think the triple-slash directive is a good quick solution to JS files. If the Cypress files are written in TypeScript, the developer should add a tsconfig.json in the Cypress folder with something like the following:

{
  "compilerOptions": {
	"strict": true,
    "baseUrl": "../node_modules",
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress"],
  },
  "include": [
    "**/*.ts"
  ]
}

The "types" vs "includes" will make sure there are no conflicts with type definitions included in the developer's app (like jQuery or chai). The tsconfig.json should be in the Cypress directory, not the base directory to reduce conflicts with the project's TypeScript config. I added a comment in the docs pull request and a comment in #1152. The TypeScript recipe should be updated for this as well.

[jennifer-shehane]

There are new docs explaining how to configure TypeScript support. We would love any feedback on whether our recommended setup solves the issues laid out in this issue. https://on.cypress.io/typescript-support

There is also a new issue open proposing more "native" support of TypeScript (less config) if anyone has suggestions they'd like to add there: #1859

I am closing this issue, but please feel free to comment here again with any feedback/confusion!

[greggb]

@jennifer-shehane I'm using js for my project, but have type checking turned on in VS code. Something that tripped me up was missing allowJs: true and "**/*.js" in includes within the tsconfig.json file in the cypress directory.

Not sure how common this is, but may help anyone who is having issues with type errors in their js files.

[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.

[NicholasBoll]

@haf restarting probably got it working. Those other settings are not required. checkJS will enable TS type checking on JS files.

I've had some caching issues lately with the Typescript server when getting other people set up. Maybe we should note restarting the Typescript server (Cmd+Shift+P and then type "restart TS server) or restart VS Code (or whatever editor is used).

[bahmutov]

Yes I was thinking the same: add to the docs notes how to restart ts server in vs code

…

Sent from my iPhone

On Sep 23, 2018, at 11:20, Nicholas Boll ***@***.***> wrote: @haf restarting probably got it working. Those other settings are not required. checkJS will enable TS type checking on JS files. I've had some caching issues lately with the Typescript server when getting other people set up. Maybe we should note restarting the Typescript server (Cmd+Shift+P and then type "restart TS server) or restart VS Code (or whatever editor is used). — You are receiving this because you were assigned. Reply to this email directly, view it on GitHub, or mute the thread.