Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WIP - TypeScript Support Doc #466

Merged
merged 6 commits into from
Mar 21, 2018
Merged

WIP - TypeScript Support Doc #466

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b5b5a90
moved 'reporters' and 'plugins-guide' into 'Tooling'
jennifer-shehane Mar 16, 2018
3422b73
- began writing TypeScript doc then quickly realized I don’t know wha…
jennifer-shehane Mar 16, 2018
9523a44
Added notes about intellisense with gif of it working
jennifer-shehane Mar 20, 2018
a456176
Merge branch 'develop' into issue-400
jennifer-shehane Mar 20, 2018
0c0b382
Updates from @NicholasBoll suggestions
jennifer-shehane Mar 21, 2018
2ee56e7
Merge branch 'develop' into issue-400
jennifer-shehane Mar 21, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions source/_data/sidebar.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,11 @@ guides:
screenshots-and-videos: screenshots-and-videos.html
launching-browsers: launching-browsers.html
web-security: web-security.html
tooling:
reporters: reporters.html
plugins-guide: plugins-guide.html
typescript-support: typescript-support.html

# advanced-cypress:
# the-cypress-workflow: the-cypress-workflow.html
# coming-from-selenium: coming-from-selenium.html
Expand Down
0 source/guides/guides/plugins-guide.md → source/guides/tooling/plugins-guide.md
View file
Open in desktop
File renamed without changes.
0 source/guides/guides/reporters.md → source/guides/tooling/reporters.md
View file
Open in desktop
File renamed without changes.
34 changes: 34 additions & 0 deletions source/guides/tooling/typescript-support.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
---
title: TypeScript Support
comments: false
---

Cypress ships with {% url "official type declarations" https://github.com/cypress-io/cypress/tree/develop/cli/types %} for {% url "TypeScript" https://www.typescriptlang.org/ %}.

# Intellisense

In order to get intellisense working, you can try a few approaches:

## Triple-Slash Directives
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think this method is limited to TypeScript. It should work on JavaScript files as well in VSCode, Atom and probably more editors/IDEs. I ask because the section is labeled "TypeScript Support" which JavaScript developers might just skip over.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point. I will have to think about a good place to mention this elsewhere in the docs.


We have seen success in VS Code with intellisense by simply adding a [triple-slash directive](http://www.typescriptlang.org/docs/handbook/triple-slash-directives.html) to the head of your JavaScript testing file. This is the simplest way to get intellisense working.

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

{% img /img/guides/typescript-intellisense-with-reference.gif %}

## tsconfig

If your project is written in TypeScript, you may find it more convenient to include Cypress in your `tsconfig.json`.

```json
{
"include": [
"integration/*.ts",
"support/*.ts",
"../node_modules/cypress"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this JSON block should be:

If you write your tests in TypeScript, you may find it more convenient to add a tsconfig.json inside your Cypress folder.

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

The "types" will tell the TypeScript compiler to only include type definitions from Cypress. This will address instances where the project also uses @types/chai or @types/jquery. Since chai and jQuery are namespaces (globals), incompatible versions will cause the package manager (yarn or npm) nest and include multiple definitions and cause conflicts.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

omg, thank you! I was struggling 😅 I think this has helped finally push it to a shippable state.

]
}
```
Binary file added source/img/guides/typescript-intellisense-with-reference.gif
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions themes/cypress/languages/en.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,8 @@ sidebar:
cypress-api-design: API Design
all-videos: Videos
plugins-guide: Plugins
tooling: Tooling
typescript-support: TypeScript Support
api:
introduction: Introduction
api: API
Expand Down