Improve this doc

Cypress ships with official type declarations for TypeScript. This allows you to write your tests in TypeScript.

Install TypeScript

You’ll need to have TypeScript 3.4+ installed within your project to have TypeScript support within Cypress.

With npm

npm install --save-dev typescript

With yarn

yarn add --dev typescript

Set up your dev environment

Please refer to your code editor in TypeScript’s Editor Support doc and follow the instructions for your IDE to get TypeScript support and intelligent code completion configured in your developer environment before continuing. TypeScript support is built in for Visual Studio Code, Visual Studio, and WebStorm - all other editors require extra setup.

Configure tsconfig.json

We recommend the following configuration in a tsconfig.json inside your cypress folder.

  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress"]
  "include": [

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) to nest and include multiple definitions and cause conflicts.

You can find an example of Jest and Cypress installed in the same project using a separate tsconfig.json file in the cypress-io/cypress-and-jest-typescript-example repo.

You may have to restart your IDE’s TypeScript server if the setup above does not appear to work. For example:

VS Code (within a .ts or .js file):

  • Open the command palette (Mac: cmd+shift+p, Windows: ctrl+shift+p)
  • Type “restart ts” and select the “TypeScript: Restart TS server.” option

If that does not work, try restarting the IDE.

Types for custom commands

When adding custom commands to the cy object, you can manually add their types to avoid TypeScript errors.

For example if you add the command cy.dataCy into your supportFile like this:

// cypress/support/index.ts
Cypress.Commands.add('dataCy', (value) => {
  return cy.get(`[data-cy=${value}]`)

Then you can add the dataCy command to the global Cypress Chainable interface (so called because commands are chained together) by creating a new TypeScript definitions file beside your supportFile, in this case at cypress/support/index.d.ts.

// in cypress/support/index.d.ts
// load type definitions that come with Cypress module
/// <reference types="cypress" />

declare namespace Cypress {
  interface Chainable {
     * Custom command to select DOM element by data-cy attribute.
     * @example cy.dataCy('greeting')
    dataCy(value: string): Chainable<Element>

A nice detailed JSDoc comment above the method type will be really appreciated by any users of your custom command.

If your specs files are in TypeScript, you should include the TypeScript definition file, cypress/support/index.d.ts, with the rest of the source files.

Even if your project is JavaScript only, the JavaScript specs can know about the new command by referencing the file using the special triple slash reference path comment.

// from your cypress/integration/spec.ts
/// <reference path="../support/index.d.ts" />
it('works', () => {
  // IntelliSense and TS compiler should
  // not complain about unknown method


Types for custom assertions

If you extend Cypress assertions, you can extend the assertion types to make the TypeScript compiler understand the new methods. See the Recipe: Adding Chai Assertions for instructions.

Types for plugins

You can utilize Cypress’s type declarations in your plugins file by annotating it like the following:

// cypress/plugins/index.ts

/// <reference types="cypress" />

 * @type {Cypress.PluginConfig}
module.exports = (on, config) => {



Version Changes
5.0.0 Raised minimum required TypeScript version from 2.9+ to 3.4+
4.4.0 Added support for TypeScript without needing your own transpilation through preprocessors.

See also