From 15cfb4475f9a9cf6d7b72478c34938edc2d412f6 Mon Sep 17 00:00:00 2001
From: Matej Snuderl <ematej.snuderl@gmail.com>
Date: Thu, 7 May 2020 16:24:35 +0200
Subject: [PATCH 1/8] feat: native typescript support

---
 .gitignore                                    |   1 +
 .vscode/settings.json                         |   3 +
 package.json                                  |  15 ++-
 src/__tests__/helpers/document.js             |   8 --
 src/__tests__/helpers/document.ts             |  15 +++
 src/__tests__/helpers/test-utils.js           |  11 --
 src/__tests__/helpers/test-utils.ts           |  20 ++++
 .../{to-be-checked.js => to-be-checked.ts}    |   0
 .../{to-be-disabled.js => to-be-disabled.ts}  |   0
 .../{to-be-empty.js => to-be-empty.ts}        |   0
 ...e-document.js => to-be-in-the-document.ts} |   0
 ...o-be-in-the-dom.js => to-be-in-the-dom.ts} |   1 +
 .../{to-be-invalid.js => to-be-invalid.ts}    |   2 +-
 .../{to-be-required.js => to-be-required.ts}  |   0
 .../{to-be-visible.js => to-be-visible.ts}    |  56 +++++-----
 ...ntain-element.js => to-contain-element.ts} |   3 +
 ...{to-contain-html.js => to-contain-html.ts} |   5 +
 ...have-attribute.js => to-have-attribute.ts} |   1 +
 .../{to-have-class.js => to-have-class.ts}    |   0
 ...play-value.js => to-have-display-value.ts} |  52 ++++-----
 .../{to-have-focus.js => to-have-focus.ts}    |   2 +-
 ...-form-values.js => to-have-form-values.ts} |  65 +++++++++--
 .../{to-have-style.js => to-have-style.ts}    |   1 +
 ...ext-content.js => to-have-text-content.ts} |   0
 .../{to-have-value.js => to-have-value.ts}    |  24 +++--
 src/__tests__/{utils.js => utils.ts}          |   9 ++
 src/extend-expect.js                          |   3 -
 src/extend-expect.ts                          |  11 ++
 src/{index.js => index.ts}                    |   0
 src/{matchers.js => matchers.ts}              |   0
 src/{to-be-checked.js => to-be-checked.ts}    |  21 ++--
 src/{to-be-disabled.js => to-be-disabled.ts}  |  37 +++++--
 src/{to-be-empty.js => to-be-empty.ts}        |   6 +-
 ...e-document.js => to-be-in-the-document.ts} |  13 ++-
 ...o-be-in-the-dom.js => to-be-in-the-dom.ts} |  15 ++-
 src/{to-be-invalid.js => to-be-invalid.ts}    |  20 ++--
 src/{to-be-required.js => to-be-required.ts}  |  20 ++--
 src/{to-be-visible.js => to-be-visible.ts}    |  29 +++--
 ...ntain-element.js => to-contain-element.ts} |  13 ++-
 ...{to-contain-html.js => to-contain-html.ts} |  11 +-
 ...have-attribute.js => to-have-attribute.ts} |  21 ++--
 src/{to-have-class.js => to-have-class.ts}    |  27 ++---
 src/to-have-display-value.js                  |  44 --------
 src/to-have-display-value.ts                  |  58 ++++++++++
 src/to-have-focus.js                          |  20 ----
 src/to-have-focus.ts                          |  27 +++++
 ...-form-values.js => to-have-form-values.ts} |  33 ++++--
 src/{to-have-style.js => to-have-style.ts}    |  45 +++++---
 src/to-have-text-content.js                   |  36 -------
 src/to-have-text-content.ts                   |  45 ++++++++
 src/{to-have-value.js => to-have-value.ts}    |  18 ++--
 src/types.ts                                  |   4 +
 src/{utils.js => utils.ts}                    | 101 ++++++++++++------
 tests/jest.config.dom.js                      |   4 +
 tests/jest.config.node.js                     |   4 +
 tests/setup-env.d.ts                          |   1 +
 tests/{setup-env.js => setup-env.ts}          |   0
 tsconfig.build.json                           |   7 ++
 tsconfig.json                                 |  10 ++
 59 files changed, 663 insertions(+), 335 deletions(-)
 create mode 100644 .vscode/settings.json
 delete mode 100644 src/__tests__/helpers/document.js
 create mode 100644 src/__tests__/helpers/document.ts
 delete mode 100644 src/__tests__/helpers/test-utils.js
 create mode 100644 src/__tests__/helpers/test-utils.ts
 rename src/__tests__/{to-be-checked.js => to-be-checked.ts} (100%)
 rename src/__tests__/{to-be-disabled.js => to-be-disabled.ts} (100%)
 rename src/__tests__/{to-be-empty.js => to-be-empty.ts} (100%)
 rename src/__tests__/{to-be-in-the-document.js => to-be-in-the-document.ts} (100%)
 rename src/__tests__/{to-be-in-the-dom.js => to-be-in-the-dom.ts} (99%)
 rename src/__tests__/{to-be-invalid.js => to-be-invalid.ts} (98%)
 rename src/__tests__/{to-be-required.js => to-be-required.ts} (100%)
 rename src/__tests__/{to-be-visible.js => to-be-visible.ts} (75%)
 rename src/__tests__/{to-contain-element.js => to-contain-element.ts} (97%)
 rename src/__tests__/{to-contain-html.js => to-contain-html.ts} (97%)
 rename src/__tests__/{to-have-attribute.js => to-have-attribute.ts} (99%)
 rename src/__tests__/{to-have-class.js => to-have-class.ts} (100%)
 rename src/__tests__/{to-have-display-value.js => to-have-display-value.ts} (66%)
 rename src/__tests__/{to-have-focus.js => to-have-focus.ts} (89%)
 rename src/__tests__/{to-have-form-values.js => to-have-form-values.ts} (89%)
 rename src/__tests__/{to-have-style.js => to-have-style.ts} (99%)
 rename src/__tests__/{to-have-text-content.js => to-have-text-content.ts} (100%)
 rename src/__tests__/{to-have-value.js => to-have-value.ts} (92%)
 rename src/__tests__/{utils.js => utils.ts} (93%)
 delete mode 100644 src/extend-expect.js
 create mode 100644 src/extend-expect.ts
 rename src/{index.js => index.ts} (100%)
 rename src/{matchers.js => matchers.ts} (100%)
 rename src/{to-be-checked.js => to-be-checked.ts} (67%)
 rename src/{to-be-disabled.js => to-be-disabled.ts} (64%)
 rename src/{to-be-empty.js => to-be-empty.ts} (60%)
 rename src/{to-be-in-the-document.js => to-be-in-the-document.ts} (61%)
 rename src/{to-be-in-the-dom.js => to-be-in-the-dom.ts} (63%)
 rename src/{to-be-invalid.js => to-be-invalid.ts} (66%)
 rename src/{to-be-required.js => to-be-required.ts} (76%)
 rename src/{to-be-visible.js => to-be-visible.ts} (57%)
 rename src/{to-contain-element.js => to-contain-element.ts} (63%)
 rename src/{to-contain-html.js => to-contain-html.ts} (52%)
 rename src/{to-have-attribute.js => to-have-attribute.ts} (67%)
 rename src/{to-have-class.js => to-have-class.ts} (75%)
 delete mode 100644 src/to-have-display-value.js
 create mode 100644 src/to-have-display-value.ts
 delete mode 100644 src/to-have-focus.js
 create mode 100644 src/to-have-focus.ts
 rename src/{to-have-form-values.js => to-have-form-values.ts} (71%)
 rename src/{to-have-style.js => to-have-style.ts} (58%)
 delete mode 100644 src/to-have-text-content.js
 create mode 100644 src/to-have-text-content.ts
 rename src/{to-have-value.js => to-have-value.ts} (70%)
 create mode 100644 src/types.ts
 rename src/{utils.js => utils.ts} (63%)
 create mode 100644 tests/setup-env.d.ts
 rename tests/{setup-env.js => setup-env.ts} (100%)
 create mode 100644 tsconfig.build.json
 create mode 100644 tsconfig.json

diff --git a/.gitignore b/.gitignore
index 8e0c70cb..8486e171 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,3 +7,4 @@ dist
 # when working with contributors
 package-lock.json
 yarn.lock
+yarn-error.log
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..25fa6215
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}
diff --git a/package.json b/package.json
index a56c0825..2e597bf1 100644
--- a/package.json
+++ b/package.json
@@ -3,13 +3,16 @@
   "version": "0.0.0-semantically-released",
   "description": "Custom jest matchers to test the state of the DOM",
   "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "engines": {
     "node": ">=8",
     "npm": ">=6",
     "yarn": ">=1"
   },
   "scripts": {
-    "build": "kcd-scripts build",
+    "build": "npm run build:source && npm run build:types",
+    "build:source": "kcd-scripts build",
+    "build:types": "tsc -p tsconfig.build.json --emitDeclarationOnly",
     "format": "kcd-scripts format",
     "lint": "kcd-scripts lint",
     "setup": "npm install && npm run validate -s",
@@ -32,8 +35,7 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.9.2",
-    "@types/testing-library__jest-dom": "^5.0.2",
-    "chalk": "^3.0.0",
+    "chalk": "^4.0.0",
     "css": "^2.2.4",
     "css.escape": "^1.5.1",
     "jest-diff": "^25.1.0",
@@ -42,11 +44,16 @@
     "redent": "^3.0.0"
   },
   "devDependencies": {
+    "@types/css": "^0.0.31",
+    "@types/jsdom": "^16.2.1",
+    "@types/lodash": "^4.14.150",
     "jest-environment-jsdom-sixteen": "^1.0.3",
     "jest-watch-select-projects": "^2.0.0",
     "jsdom": "^16.2.1",
     "kcd-scripts": "^5.6.0",
-    "pretty-format": "^25.1.0"
+    "pretty-format": "^25.1.0",
+    "ts-jest": "^25.5.0",
+    "typescript": "^3.8.3"
   },
   "eslintConfig": {
     "extends": "./node_modules/kcd-scripts/eslint.js",
diff --git a/src/__tests__/helpers/document.js b/src/__tests__/helpers/document.js
deleted file mode 100644
index 97c2b221..00000000
--- a/src/__tests__/helpers/document.js
+++ /dev/null
@@ -1,8 +0,0 @@
-if (global.document) {
-  module.exports = global.document
-} else {
-  const {JSDOM} = require('jsdom')
-  const {window} = new JSDOM()
-
-  module.exports = window.document
-}
diff --git a/src/__tests__/helpers/document.ts b/src/__tests__/helpers/document.ts
new file mode 100644
index 00000000..aa6e58a2
--- /dev/null
+++ b/src/__tests__/helpers/document.ts
@@ -0,0 +1,15 @@
+let document: Document
+
+const globalWithDocument = global as {
+  document?: Document
+}
+
+if (globalWithDocument.document) {
+  document = globalWithDocument.document
+} else {
+  const {JSDOM} = require('jsdom')
+  const {window} = new JSDOM()
+  document = window.document
+}
+
+export default document
diff --git a/src/__tests__/helpers/test-utils.js b/src/__tests__/helpers/test-utils.js
deleted file mode 100644
index 3efabeac..00000000
--- a/src/__tests__/helpers/test-utils.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import document from './document'
-
-function render(html) {
-  const container = document.createElement('div')
-  container.innerHTML = html
-  const queryByTestId = testId =>
-    container.querySelector(`[data-testid="${testId}"]`)
-  return {container, queryByTestId}
-}
-
-export {render}
diff --git a/src/__tests__/helpers/test-utils.ts b/src/__tests__/helpers/test-utils.ts
new file mode 100644
index 00000000..28375829
--- /dev/null
+++ b/src/__tests__/helpers/test-utils.ts
@@ -0,0 +1,20 @@
+import document from './document'
+import * as extensions from '../../matchers'
+
+function render(html: string) {
+  const container = document.createElement('div')
+  container.innerHTML = html
+  const queryByTestId = (testId: string) =>
+    container.querySelector(`[data-testid="${testId}"]`)
+  return {container, queryByTestId}
+}
+
+type Extensions = typeof extensions
+
+declare global {
+  namespace jest {
+    interface Matchers<R> extends Extensions {}
+  }
+}
+
+export {render}
diff --git a/src/__tests__/to-be-checked.js b/src/__tests__/to-be-checked.ts
similarity index 100%
rename from src/__tests__/to-be-checked.js
rename to src/__tests__/to-be-checked.ts
diff --git a/src/__tests__/to-be-disabled.js b/src/__tests__/to-be-disabled.ts
similarity index 100%
rename from src/__tests__/to-be-disabled.js
rename to src/__tests__/to-be-disabled.ts
diff --git a/src/__tests__/to-be-empty.js b/src/__tests__/to-be-empty.ts
similarity index 100%
rename from src/__tests__/to-be-empty.js
rename to src/__tests__/to-be-empty.ts
diff --git a/src/__tests__/to-be-in-the-document.js b/src/__tests__/to-be-in-the-document.ts
similarity index 100%
rename from src/__tests__/to-be-in-the-document.js
rename to src/__tests__/to-be-in-the-document.ts
diff --git a/src/__tests__/to-be-in-the-dom.js b/src/__tests__/to-be-in-the-dom.ts
similarity index 99%
rename from src/__tests__/to-be-in-the-dom.js
rename to src/__tests__/to-be-in-the-dom.ts
index 4ef9fb48..825f6c6c 100644
--- a/src/__tests__/to-be-in-the-dom.js
+++ b/src/__tests__/to-be-in-the-dom.ts
@@ -52,6 +52,7 @@ test('.toBeInTheDOM', () => {
   ).toThrowError()
 
   expect(() => {
+    // @ts-ignore
     expect(valueElement).toBeInTheDOM(fakeElement)
   }).toThrowError()
 
diff --git a/src/__tests__/to-be-invalid.js b/src/__tests__/to-be-invalid.ts
similarity index 98%
rename from src/__tests__/to-be-invalid.js
rename to src/__tests__/to-be-invalid.ts
index 9929d53d..022481de 100644
--- a/src/__tests__/to-be-invalid.js
+++ b/src/__tests__/to-be-invalid.ts
@@ -19,7 +19,7 @@ import {render} from './helpers/test-utils'
  * @link https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation
  * @link https://github.com/jsdom/jsdom
  */
-function getDOMElement(htmlString, selector) {
+function getDOMElement(htmlString: string, selector: string) {
   return new JSDOM(htmlString).window.document.querySelector(selector)
 }
 
diff --git a/src/__tests__/to-be-required.js b/src/__tests__/to-be-required.ts
similarity index 100%
rename from src/__tests__/to-be-required.js
rename to src/__tests__/to-be-required.ts
diff --git a/src/__tests__/to-be-visible.js b/src/__tests__/to-be-visible.ts
similarity index 75%
rename from src/__tests__/to-be-visible.js
rename to src/__tests__/to-be-visible.ts
index 43d47284..490d6d90 100644
--- a/src/__tests__/to-be-visible.js
+++ b/src/__tests__/to-be-visible.ts
@@ -38,7 +38,7 @@ describe('.toBeVisible', () => {
 
   // eslint-disable-next-line max-lines-per-function
   describe('with a <details /> element', () => {
-    let subject
+    let subject: ReturnType<typeof render> | undefined
 
     afterEach(() => {
       subject = undefined
@@ -55,26 +55,26 @@ describe('.toBeVisible', () => {
       })
 
       it('returns true to the details content', () => {
-        expect(subject.container.querySelector('div')).toBeVisible()
+        expect(subject!.container.querySelector('div')).toBeVisible()
       })
 
       it('returns true to the most inner details content', () => {
-        expect(subject.container.querySelector('small')).toBeVisible()
+        expect(subject!.container.querySelector('small')).toBeVisible()
       })
 
       it('returns true to the details summary', () => {
-        expect(subject.container.querySelector('summary')).toBeVisible()
+        expect(subject!.container.querySelector('summary')).toBeVisible()
       })
 
       describe('when the user clicks on the summary', () => {
-        beforeEach(() => subject.container.querySelector('summary').click())
+        beforeEach(() => subject!.container.querySelector('summary')!.click())
 
         it('returns false to the details content', () => {
-          expect(subject.container.querySelector('div')).not.toBeVisible()
+          expect(subject!.container.querySelector('div')).not.toBeVisible()
         })
 
         it('returns true to the details summary', () => {
-          expect(subject.container.querySelector('summary')).toBeVisible()
+          expect(subject!.container.querySelector('summary')).toBeVisible()
         })
       })
     })
@@ -90,22 +90,22 @@ describe('.toBeVisible', () => {
       })
 
       it('returns false to the details content', () => {
-        expect(subject.container.querySelector('div')).not.toBeVisible()
+        expect(subject!.container.querySelector('div')).not.toBeVisible()
       })
 
       it('returns true to the summary content', () => {
-        expect(subject.container.querySelector('summary')).toBeVisible()
+        expect(subject!.container.querySelector('summary')).toBeVisible()
       })
 
       describe('when the user clicks on the summary', () => {
-        beforeEach(() => subject.container.querySelector('summary').click())
+        beforeEach(() => subject!.container.querySelector('summary')!.click())
 
         it('returns true to the details content', () => {
-          expect(subject.container.querySelector('div')).toBeVisible()
+          expect(subject!.container.querySelector('div')).toBeVisible()
         })
 
         it('returns true to the details summary', () => {
-          expect(subject.container.querySelector('summary')).toBeVisible()
+          expect(subject!.container.querySelector('summary')).toBeVisible()
         })
       })
     })
@@ -121,11 +121,11 @@ describe('.toBeVisible', () => {
       })
 
       it('returns false to the details content', () => {
-        expect(subject.container.querySelector('div')).not.toBeVisible()
+        expect(subject!.container.querySelector('div')).not.toBeVisible()
       })
 
       it('returns false to the details summary', () => {
-        expect(subject.container.querySelector('summary')).not.toBeVisible()
+        expect(subject!.container.querySelector('summary')).not.toBeVisible()
       })
     })
 
@@ -146,23 +146,25 @@ describe('.toBeVisible', () => {
 
         it('returns true to the nested details content', () => {
           expect(
-            subject.container.querySelector('details > details > div'),
+            subject!.container.querySelector('details > details > div'),
           ).toBeVisible()
         })
 
         it('returns true to the nested details summary', () => {
           expect(
-            subject.container.querySelector('details > details > summary'),
+            subject!.container.querySelector('details > details > summary'),
           ).toBeVisible()
         })
 
         it('returns true to the outer details content', () => {
-          expect(subject.container.querySelector('details > div')).toBeVisible()
+          expect(
+            subject!.container.querySelector('details > div'),
+          ).toBeVisible()
         })
 
         it('returns true to the outer details summary', () => {
           expect(
-            subject.container.querySelector('details > summary'),
+            subject!.container.querySelector('details > summary'),
           ).toBeVisible()
         })
       })
@@ -183,23 +185,25 @@ describe('.toBeVisible', () => {
 
         it('returns false to the nested details content', () => {
           expect(
-            subject.container.querySelector('details > details > div'),
+            subject!.container.querySelector('details > details > div'),
           ).not.toBeVisible()
         })
 
         it('returns true to the nested details summary', () => {
           expect(
-            subject.container.querySelector('details > details > summary'),
+            subject!.container.querySelector('details > details > summary'),
           ).toBeVisible()
         })
 
         it('returns true to the outer details content', () => {
-          expect(subject.container.querySelector('details > div')).toBeVisible()
+          expect(
+            subject!.container.querySelector('details > div'),
+          ).toBeVisible()
         })
 
         it('returns true to the outer details summary', () => {
           expect(
-            subject.container.querySelector('details > summary'),
+            subject!.container.querySelector('details > summary'),
           ).toBeVisible()
         })
       })
@@ -220,25 +224,25 @@ describe('.toBeVisible', () => {
 
         it('returns false to the nested details content', () => {
           expect(
-            subject.container.querySelector('details > details > div'),
+            subject!.container.querySelector('details > details > div'),
           ).not.toBeVisible()
         })
 
         it('returns false to the nested details summary', () => {
           expect(
-            subject.container.querySelector('details > details > summary'),
+            subject!.container.querySelector('details > details > summary'),
           ).not.toBeVisible()
         })
 
         it('returns false to the outer details content', () => {
           expect(
-            subject.container.querySelector('details > div'),
+            subject!.container.querySelector('details > div'),
           ).not.toBeVisible()
         })
 
         it('returns true to the outer details summary', () => {
           expect(
-            subject.container.querySelector('details > summary'),
+            subject!.container.querySelector('details > summary'),
           ).toBeVisible()
         })
       })
diff --git a/src/__tests__/to-contain-element.js b/src/__tests__/to-contain-element.ts
similarity index 97%
rename from src/__tests__/to-contain-element.js
rename to src/__tests__/to-contain-element.ts
index 00608dd1..a54a6c4c 100644
--- a/src/__tests__/to-contain-element.js
+++ b/src/__tests__/to-contain-element.ts
@@ -44,6 +44,7 @@ test('.toContainElement negative test cases', () => {
     expect(nonExistantElement).toContainElement(nonExistantElement),
   ).toThrowError()
   expect(() =>
+    // @ts-ignore
     expect(nonExistantElement).toContainElement(fakeElement),
   ).toThrowError()
   expect(() =>
@@ -53,7 +54,9 @@ test('.toContainElement negative test cases', () => {
     expect(fakeElement).not.toContainElement(nonExistantElement),
   ).toThrowError()
   expect(() => expect(fakeElement).toContainElement(grandparent)).toThrowError()
+  // @ts-ignore
   expect(() => expect(grandparent).toContainElement(fakeElement)).toThrowError()
+  // @ts-ignore
   expect(() => expect(fakeElement).toContainElement(fakeElement)).toThrowError()
   expect(() => expect(grandparent).not.toContainElement(child)).toThrowError()
   expect(() =>
diff --git a/src/__tests__/to-contain-html.js b/src/__tests__/to-contain-html.ts
similarity index 97%
rename from src/__tests__/to-contain-html.js
rename to src/__tests__/to-contain-html.ts
index 2fd12531..74c8048b 100644
--- a/src/__tests__/to-contain-html.js
+++ b/src/__tests__/to-contain-html.ts
@@ -38,9 +38,11 @@ test('.toContainHTML', () => {
     expect(nonExistantElement).not.toContainHTML(stringChildElement),
   ).toThrowError()
   expect(() =>
+    // @ts-ignore
     expect(nonExistantElement).not.toContainHTML(nonExistantElement),
   ).toThrowError()
   expect(() =>
+    // @ts-ignore
     expect(stringChildElement).not.toContainHTML(fakeElement),
   ).toThrowError()
   expect(() =>
@@ -63,9 +65,12 @@ test('.toContainHTML', () => {
   expect(() =>
     expect(grandparent).toContainHTML(nonExistantString),
   ).toThrowError()
+  // @ts-ignore
   expect(() => expect(child).toContainHTML(nonExistantElement)).toThrowError()
+  // @ts-ignore
   expect(() => expect(parent).toContainHTML(nonExistantElement)).toThrowError()
   expect(() =>
+    // @ts-ignore
     expect(grandparent).toContainHTML(nonExistantElement),
   ).toThrowError()
   expect(() =>
diff --git a/src/__tests__/to-have-attribute.js b/src/__tests__/to-have-attribute.ts
similarity index 99%
rename from src/__tests__/to-have-attribute.js
rename to src/__tests__/to-have-attribute.ts
index 8abf6309..9d72c1c8 100644
--- a/src/__tests__/to-have-attribute.js
+++ b/src/__tests__/to-have-attribute.ts
@@ -39,6 +39,7 @@ test('.toHaveAttribute', () => {
     expect(queryByTestId('svg-element')).not.toHaveAttribute('width', '12'),
   ).toThrowError()
   expect(() =>
+    // @ts-ignore
     expect({thisIsNot: 'an html element'}).not.toHaveAttribute(),
   ).toThrowError()
 
diff --git a/src/__tests__/to-have-class.js b/src/__tests__/to-have-class.ts
similarity index 100%
rename from src/__tests__/to-have-class.js
rename to src/__tests__/to-have-class.ts
diff --git a/src/__tests__/to-have-display-value.js b/src/__tests__/to-have-display-value.ts
similarity index 66%
rename from src/__tests__/to-have-display-value.js
rename to src/__tests__/to-have-display-value.ts
index e49749a9..5aad28ab 100644
--- a/src/__tests__/to-have-display-value.js
+++ b/src/__tests__/to-have-display-value.ts
@@ -10,17 +10,17 @@ test('it should work as expected', () => {
     </select>
   `)
 
-  expect(queryByTestId('select')).toHaveDisplayValue('Select a fruit...')
-  expect(queryByTestId('select')).not.toHaveDisplayValue('Banana')
-  expect(() =>
-    expect(queryByTestId('select')).not.toHaveDisplayValue('Select a fruit...'),
-  ).toThrow()
+  const select = queryByTestId('select') as HTMLSelectElement
+
+  expect(select).toHaveDisplayValue('Select a fruit...')
+  expect(select).not.toHaveDisplayValue('Banana')
   expect(() =>
-    expect(queryByTestId('select')).toHaveDisplayValue('Ananas'),
+    expect(select).not.toHaveDisplayValue('Select a fruit...'),
   ).toThrow()
+  expect(() => expect(select).toHaveDisplayValue('Ananas')).toThrow()
 
-  queryByTestId('select').value = 'banana'
-  expect(queryByTestId('select')).toHaveDisplayValue('Banana')
+  select.value = 'banana'
+  expect(select).toHaveDisplayValue('Banana')
 })
 
 test('it should work with select multiple', () => {
@@ -32,21 +32,17 @@ test('it should work with select multiple', () => {
       <option value="avocado" selected>Avocado</option>
     </select>
   `)
+  const select = queryByTestId('select') as HTMLSelectElement
 
-  expect(queryByTestId('select')).toHaveDisplayValue(['Ananas', 'Avocado'])
+  expect(select).toHaveDisplayValue(['Ananas', 'Avocado'])
   expect(() =>
-    expect(queryByTestId('select')).not.toHaveDisplayValue([
-      'Ananas',
-      'Avocado',
-    ]),
+    expect(select).not.toHaveDisplayValue(['Ananas', 'Avocado']),
   ).toThrow()
 
-  expect(queryByTestId('select')).not.toHaveDisplayValue('Ananas')
-  expect(() =>
-    expect(queryByTestId('select')).toHaveDisplayValue('Ananas'),
-  ).toThrow()
+  expect(select).not.toHaveDisplayValue('Ananas')
+  expect(() => expect(select).toHaveDisplayValue('Ananas')).toThrow()
 
-  Array.from(queryByTestId('select').options).forEach(option => {
+  Array.from(select.options).forEach(option => {
     option.selected = ['ananas', 'banana'].includes(option.value)
   })
 
@@ -57,11 +53,11 @@ test('it should work with input elements', () => {
   const {queryByTestId} = render(`
     <input type="text" data-testid="input" value="Luca" />
   `)
+  const input = queryByTestId('input') as HTMLInputElement
 
-  expect(queryByTestId('input')).toHaveDisplayValue('Luca')
-
-  queryByTestId('input').value = 'Piero'
-  expect(queryByTestId('input')).toHaveDisplayValue('Piero')
+  expect(input).toHaveDisplayValue('Luca')
+  input.value = 'Piero'
+  expect(input).toHaveDisplayValue('Piero')
 })
 
 test('it should work with textarea elements', () => {
@@ -69,14 +65,11 @@ test('it should work with textarea elements', () => {
     '<textarea data-testid="textarea-example">An example description here.</textarea>',
   )
 
-  expect(queryByTestId('textarea-example')).toHaveDisplayValue(
-    'An example description here.',
-  )
+  const testarea = queryByTestId('textarea-example') as HTMLTextAreaElement
 
-  queryByTestId('textarea-example').value = 'Another example'
-  expect(queryByTestId('textarea-example')).toHaveDisplayValue(
-    'Another example',
-  )
+  expect(testarea).toHaveDisplayValue('An example description here.')
+  testarea.value = 'Another example'
+  expect(testarea).toHaveDisplayValue('Another example')
 })
 
 test('it should throw if element is not valid', () => {
@@ -108,6 +101,7 @@ test('it should throw if element is not valid', () => {
   )
 
   try {
+    // @ts-ignore
     expect(queryByTestId('checkbox')).toHaveDisplayValue(true)
   } catch (err) {
     errorMessage = err.message
diff --git a/src/__tests__/to-have-focus.js b/src/__tests__/to-have-focus.ts
similarity index 89%
rename from src/__tests__/to-have-focus.js
rename to src/__tests__/to-have-focus.ts
index 8acb8127..c0ca29ec 100644
--- a/src/__tests__/to-have-focus.js
+++ b/src/__tests__/to-have-focus.ts
@@ -9,7 +9,7 @@ test('.toHaveFocus', () => {
         <button type="submit" id="not-focused">Not Focused</button>
       </div>`)
 
-  const focused = container.querySelector('#focused')
+  const focused = container.querySelector('#focused') as HTMLLabelElement
   const notFocused = container.querySelector('#not-focused')
 
   document.body.appendChild(container)
diff --git a/src/__tests__/to-have-form-values.js b/src/__tests__/to-have-form-values.ts
similarity index 89%
rename from src/__tests__/to-have-form-values.js
rename to src/__tests__/to-have-form-values.ts
index e6fc96a8..f141b5af 100644
--- a/src/__tests__/to-have-form-values.js
+++ b/src/__tests__/to-have-form-values.ts
@@ -241,7 +241,7 @@ describe('.toHaveFormValues', () => {
       `)
 
       const form = container.querySelector('form')
-      const select = container.querySelector('select')
+      const select = container.querySelector('select') as HTMLSelectElement
       expect(form).toHaveFormValues({category: oldValue})
 
       select.value = newValue
@@ -263,11 +263,25 @@ describe('.toHaveFormValues', () => {
 
 // Form control renderers
 
-function isSelected(value, option) {
+function isSelected(
+  value: string[],
+  option: {
+    value: string
+    label: string
+  },
+) {
   return Array.isArray(value) && value.indexOf(option.value) >= 0
 }
 
-function renderCheckboxes(name, label, options, value = []) {
+function renderCheckboxes(
+  name: string,
+  label: string,
+  options: {
+    value: string
+    label: string
+  }[],
+  value: string[] = [],
+) {
   return `
     <fieldset>
       <legend>${label}</legend>
@@ -290,7 +304,15 @@ function renderCheckboxes(name, label, options, value = []) {
   `
 }
 
-function renderRadioButtons(name, label, options, value = undefined) {
+function renderRadioButtons(
+  name: string,
+  label: string,
+  options: {
+    value: string
+    label: string
+  }[],
+  value: string | undefined = undefined,
+) {
   return `
     <fieldset>
       <legend>${label}</legend>
@@ -313,7 +335,16 @@ function renderRadioButtons(name, label, options, value = undefined) {
   `
 }
 
-function renderSelect(name, label, options, value, multiple) {
+function renderSelect(
+  name: string,
+  label: string,
+  options: {
+    value: string
+    label: string
+  }[],
+  value: string[],
+  multiple: boolean,
+) {
   return `
     <label for="${name}">${label}</label>
     <select id="${name}" name="${name}" ${multiple ? 'multiple' : ''}>
@@ -332,21 +363,37 @@ function renderSelect(name, label, options, value, multiple) {
   `
 }
 
-function renderSelectSingle(name, label, options, value = undefined) {
+function renderSelectSingle(
+  name: string,
+  label: string,
+  options: {
+    value: string
+    label: string
+  }[],
+  value: string | undefined = undefined,
+) {
   return renderSelect(
     name,
     label,
     options,
-    value === undefined || value === null ? [] : [value],
+    value === undefined || value === null ? ([] as string[]) : [value],
     false,
   )
 }
 
-function renderSelectMultiple(name, label, options, value = []) {
+function renderSelectMultiple(
+  name: string,
+  label: string,
+  options: {
+    value: string
+    label: string
+  }[],
+  value: string[] = [],
+) {
   return renderSelect(name, label, options, value, true)
 }
 
-function renderList(items, mapper) {
+function renderList<T, R>(items: T[], mapper: (item: T) => R) {
   return items.map(mapper).join('')
 }
 
diff --git a/src/__tests__/to-have-style.js b/src/__tests__/to-have-style.ts
similarity index 99%
rename from src/__tests__/to-have-style.js
rename to src/__tests__/to-have-style.ts
index 0c313550..df2eeee1 100644
--- a/src/__tests__/to-have-style.js
+++ b/src/__tests__/to-have-style.ts
@@ -165,6 +165,7 @@ describe('.toHaveStyle', () => {
       height: '100%',
     })
     expect(container.querySelector('.label')).not.toHaveStyle({
+      // @ts-ignore
       whatever: 'anything',
     })
   })
diff --git a/src/__tests__/to-have-text-content.js b/src/__tests__/to-have-text-content.ts
similarity index 100%
rename from src/__tests__/to-have-text-content.js
rename to src/__tests__/to-have-text-content.ts
diff --git a/src/__tests__/to-have-value.js b/src/__tests__/to-have-value.ts
similarity index 92%
rename from src/__tests__/to-have-value.js
rename to src/__tests__/to-have-value.ts
index fff74b4f..ed042c6b 100644
--- a/src/__tests__/to-have-value.js
+++ b/src/__tests__/to-have-value.ts
@@ -17,10 +17,12 @@ describe('.toHaveValue', () => {
     expect(queryByTestId('empty')).not.toHaveValue()
     expect(queryByTestId('empty')).not.toHaveValue('foo')
 
-    expect(queryByTestId('without')).toHaveValue('')
-    expect(queryByTestId('without')).not.toHaveValue()
-    expect(queryByTestId('without')).not.toHaveValue('foo')
-    queryByTestId('without').value = 'bar'
+    const without = queryByTestId('without') as HTMLInputElement
+
+    expect(without).toHaveValue('')
+    expect(without).not.toHaveValue()
+    expect(without).not.toHaveValue('foo')
+    without.value = 'bar'
     expect(queryByTestId('without')).toHaveValue('bar')
   })
 
@@ -40,11 +42,13 @@ describe('.toHaveValue', () => {
     expect(queryByTestId('empty')).not.toHaveValue()
     expect(queryByTestId('empty')).not.toHaveValue('5')
 
-    expect(queryByTestId('without')).toHaveValue(null)
-    expect(queryByTestId('without')).not.toHaveValue()
-    expect(queryByTestId('without')).not.toHaveValue('10')
-    queryByTestId('without').value = 10
-    expect(queryByTestId('without')).toHaveValue(10)
+    const without = queryByTestId('without') as HTMLInputElement
+
+    expect(without).toHaveValue(null)
+    expect(without).not.toHaveValue()
+    expect(without).not.toHaveValue('10')
+    without.value = '10'
+    expect(without).toHaveValue(10)
   })
 
   test('handles value of select element', () => {
@@ -78,7 +82,7 @@ describe('.toHaveValue', () => {
     expect(queryByTestId('not-selected')).not.toHaveValue()
     expect(queryByTestId('not-selected')).toHaveValue('')
 
-    queryByTestId('single').children[0].setAttribute('selected', true)
+    queryByTestId('single')!.children[0].setAttribute('selected', 'true')
     expect(queryByTestId('single')).toHaveValue('first')
   })
 
diff --git a/src/__tests__/utils.js b/src/__tests__/utils.ts
similarity index 93%
rename from src/__tests__/utils.js
rename to src/__tests__/utils.ts
index 5eae7f20..3aa7ec0a 100644
--- a/src/__tests__/utils.js
+++ b/src/__tests__/utils.ts
@@ -25,6 +25,7 @@ describe('checkHtmlElement', () => {
   it('does not throw an error for correct html element', () => {
     expect(() => {
       const element = document.createElement('p')
+      // @ts-ignore
       checkHtmlElement(element, () => {}, {})
     }).not.toThrow()
   })
@@ -35,24 +36,28 @@ describe('checkHtmlElement', () => {
         'http://www.w3.org/2000/svg',
         'rect',
       )
+      // @ts-ignore
       checkHtmlElement(element, () => {}, {})
     }).not.toThrow()
   })
 
   it('does not throw for body', () => {
     expect(() => {
+      // @ts-ignore
       checkHtmlElement(document.body, () => {}, {})
     }).not.toThrow()
   })
 
   it('throws for undefined', () => {
     expect(() => {
+      // @ts-ignore
       checkHtmlElement(undefined, () => {}, {})
     }).toThrow(HtmlElementTypeError)
   })
 
   it('throws for document', () => {
     expect(() => {
+      // @ts-ignore
       checkHtmlElement(document, () => {}, {})
     }).toThrow(HtmlElementTypeError)
   })
@@ -60,6 +65,7 @@ describe('checkHtmlElement', () => {
   it('throws for function', () => {
     expect(() => {
       checkHtmlElement(
+        // @ts-ignore
         () => {},
         () => {},
         {},
@@ -73,6 +79,7 @@ describe('checkHtmlElement', () => {
       checkHtmlElement(
         {
           ownerDocument: {
+            // @ts-ignore
             defaultView: {HTMLElement: FakeObject, SVGElement: FakeObject},
           },
         },
@@ -100,6 +107,7 @@ describe('parseJStoCSS', () => {
       expect(
         parseJStoCSS(document, {
           backgroundColor: 'blue',
+          // @ts-ignore
           whatever: 'anything',
         }),
       ).toBe('background-color: blue;')
@@ -110,6 +118,7 @@ describe('parseJStoCSS', () => {
     it('returns an empty string', () => {
       expect(
         parseJStoCSS(document, {
+          // @ts-ignore
           whatever: 'anything',
         }),
       ).toBe('')
diff --git a/src/extend-expect.js b/src/extend-expect.js
deleted file mode 100644
index 3801a1d5..00000000
--- a/src/extend-expect.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import * as extensions from './matchers'
-
-expect.extend(extensions)
diff --git a/src/extend-expect.ts b/src/extend-expect.ts
new file mode 100644
index 00000000..0864a6bd
--- /dev/null
+++ b/src/extend-expect.ts
@@ -0,0 +1,11 @@
+import * as extensions from './matchers'
+
+expect.extend(extensions)
+
+type Extensions = typeof extensions
+
+declare global {
+  namespace jest {
+    interface Matchers<R, T> extends Extensions {}
+  }
+}
diff --git a/src/index.js b/src/index.ts
similarity index 100%
rename from src/index.js
rename to src/index.ts
diff --git a/src/matchers.js b/src/matchers.ts
similarity index 100%
rename from src/matchers.js
rename to src/matchers.ts
diff --git a/src/to-be-checked.js b/src/to-be-checked.ts
similarity index 67%
rename from src/to-be-checked.js
rename to src/to-be-checked.ts
index f7bafff8..2729c866 100644
--- a/src/to-be-checked.js
+++ b/src/to-be-checked.ts
@@ -1,20 +1,21 @@
 import {matcherHint, printReceived} from 'jest-matcher-utils'
-import {checkHtmlElement} from './utils'
+import {checkHtmlElement, isInputElement} from './utils'
 
-export function toBeChecked(element) {
+export function toBeChecked<C>(this: C) {
+  const context = (this as unknown) as jest.MatcherContext
+  const element = arguments[0] as HTMLElement
   checkHtmlElement(element, toBeChecked, this)
 
   const isValidInput = () => {
     return (
-      element.tagName.toLowerCase() === 'input' &&
-      ['checkbox', 'radio'].includes(element.type)
+      isInputElement(element) && ['checkbox', 'radio'].includes(element.type)
     )
   }
 
   const isValidAriaElement = () => {
     return (
-      ['checkbox', 'radio', 'switch'].includes(element.getAttribute('role')) &&
-      ['true', 'false'].includes(element.getAttribute('aria-checked'))
+      ['checkbox', 'radio', 'switch'].includes(element.getAttribute('role')!) &&
+      ['true', 'false'].includes(element.getAttribute('aria-checked')!)
     )
   }
 
@@ -27,7 +28,7 @@ export function toBeChecked(element) {
   }
 
   const isChecked = () => {
-    if (isValidInput()) return element.checked
+    if (isValidInput()) return (element as HTMLInputElement).checked
     return element.getAttribute('aria-checked') === 'true'
   }
 
@@ -36,7 +37,11 @@ export function toBeChecked(element) {
     message: () => {
       const is = isChecked() ? 'is' : 'is not'
       return [
-        matcherHint(`${this.isNot ? '.not' : ''}.toBeChecked`, 'element', ''),
+        matcherHint(
+          `${context.isNot ? '.not' : ''}.toBeChecked`,
+          'element',
+          '',
+        ),
         '',
         `Received element ${is} checked:`,
         `  ${printReceived(element.cloneNode(false))}`,
diff --git a/src/to-be-disabled.js b/src/to-be-disabled.ts
similarity index 64%
rename from src/to-be-disabled.js
rename to src/to-be-disabled.ts
index 9ba177b5..1f032fda 100644
--- a/src/to-be-disabled.js
+++ b/src/to-be-disabled.ts
@@ -21,35 +21,42 @@ const FORM_TAGS = [
  *
  * This method tests whether element is first legend child of fieldset parent
  */
-function isFirstLegendChildOfFieldset(element, parent) {
+function isFirstLegendChildOfFieldset(
+  element: HTMLElement,
+  parent: HTMLElement,
+) {
   return (
     getTag(element) === 'legend' &&
     getTag(parent) === 'fieldset' &&
     element.isSameNode(
-      Array.from(parent.children).find(child => getTag(child) === 'legend'),
+      Array.from(parent.children).find(
+        child => getTag(child as HTMLElement) === 'legend',
+      ) as Node | null,
     )
   )
 }
 
-function isElementDisabledByParent(element, parent) {
+function isElementDisabledByParent(element: HTMLElement, parent: HTMLElement) {
   return (
     isElementDisabled(parent) && !isFirstLegendChildOfFieldset(element, parent)
   )
 }
 
-function isElementDisabled(element) {
+function isElementDisabled(element: HTMLElement) {
   return FORM_TAGS.includes(getTag(element)) && element.hasAttribute('disabled')
 }
 
-function isAncestorDisabled(element) {
-  const parent = element.parentElement
+function isAncestorDisabled(element: HTMLElement): boolean {
+  const parent = element!.parentElement!
   return (
     Boolean(parent) &&
     (isElementDisabledByParent(element, parent) || isAncestorDisabled(parent))
   )
 }
 
-export function toBeDisabled(element) {
+export function toBeDisabled<T>(this: T) {
+  const context = (this as unknown) as jest.MatcherContext
+  const element = arguments[0] as HTMLElement
   checkHtmlElement(element, toBeDisabled, this)
 
   const isDisabled = isElementDisabled(element) || isAncestorDisabled(element)
@@ -59,7 +66,11 @@ export function toBeDisabled(element) {
     message: () => {
       const is = isDisabled ? 'is' : 'is not'
       return [
-        matcherHint(`${this.isNot ? '.not' : ''}.toBeDisabled`, 'element', ''),
+        matcherHint(
+          `${context.isNot ? '.not' : ''}.toBeDisabled`,
+          'element',
+          '',
+        ),
         '',
         `Received element ${is} disabled:`,
         `  ${printReceived(element.cloneNode(false))}`,
@@ -68,7 +79,9 @@ export function toBeDisabled(element) {
   }
 }
 
-export function toBeEnabled(element) {
+export function toBeEnabled<T>(this: T) {
+  const context = (this as unknown) as jest.MatcherContext
+  const element = arguments[0] as HTMLElement
   checkHtmlElement(element, toBeEnabled, this)
 
   const isEnabled = !(isElementDisabled(element) || isAncestorDisabled(element))
@@ -78,7 +91,11 @@ export function toBeEnabled(element) {
     message: () => {
       const is = isEnabled ? 'is' : 'is not'
       return [
-        matcherHint(`${this.isNot ? '.not' : ''}.toBeEnabled`, 'element', ''),
+        matcherHint(
+          `${context.isNot ? '.not' : ''}.toBeEnabled`,
+          'element',
+          '',
+        ),
         '',
         `Received element ${is} enabled:`,
         `  ${printReceived(element.cloneNode(false))}`,
diff --git a/src/to-be-empty.js b/src/to-be-empty.ts
similarity index 60%
rename from src/to-be-empty.js
rename to src/to-be-empty.ts
index 6a033592..6e1c2d05 100644
--- a/src/to-be-empty.js
+++ b/src/to-be-empty.ts
@@ -1,14 +1,16 @@
 import {matcherHint, printReceived} from 'jest-matcher-utils'
 import {checkHtmlElement} from './utils'
 
-export function toBeEmpty(element) {
+export function toBeEmpty<T>(this: T) {
+  const context = (this as unknown) as jest.MatcherContext
+  const element = arguments[0] as HTMLElement
   checkHtmlElement(element, toBeEmpty, this)
 
   return {
     pass: element.innerHTML === '',
     message: () => {
       return [
-        matcherHint(`${this.isNot ? '.not' : ''}.toBeEmpty`, 'element', ''),
+        matcherHint(`${context.isNot ? '.not' : ''}.toBeEmpty`, 'element', ''),
         '',
         'Received:',
         `  ${printReceived(element.innerHTML)}`,
diff --git a/src/to-be-in-the-document.js b/src/to-be-in-the-document.ts
similarity index 61%
rename from src/to-be-in-the-document.js
rename to src/to-be-in-the-document.ts
index c0a05331..41f81385 100644
--- a/src/to-be-in-the-document.js
+++ b/src/to-be-in-the-document.ts
@@ -5,13 +5,16 @@ import {
 } from 'jest-matcher-utils'
 import {checkHtmlElement} from './utils'
 
-export function toBeInTheDocument(element) {
-  if (element !== null || !this.isNot) {
+export function toBeInTheDocument<T>(this: T) {
+  const context = (this as unknown) as jest.MatcherContext
+  const element = arguments[0] as HTMLElement
+
+  if (element !== null || !context.isNot) {
     checkHtmlElement(element, toBeInTheDocument, this)
   }
 
   const pass =
-    element === null ? false : element.ownerDocument.contains(element)
+    element === null ? false : element.ownerDocument!.contains(element)
 
   const errorFound = () => {
     return `expected document not to contain element, found ${stringify(
@@ -27,12 +30,12 @@ export function toBeInTheDocument(element) {
     message: () => {
       return [
         matcherHint(
-          `${this.isNot ? '.not' : ''}.toBeInTheDocument`,
+          `${context.isNot ? '.not' : ''}.toBeInTheDocument`,
           'element',
           '',
         ),
         '',
-        receivedColor(this.isNot ? errorFound() : errorNotFound()),
+        receivedColor(context.isNot ? errorFound() : errorNotFound()),
       ].join('\n')
     },
   }
diff --git a/src/to-be-in-the-dom.js b/src/to-be-in-the-dom.ts
similarity index 63%
rename from src/to-be-in-the-dom.js
rename to src/to-be-in-the-dom.ts
index c5c49edd..683214ac 100644
--- a/src/to-be-in-the-dom.js
+++ b/src/to-be-in-the-dom.ts
@@ -1,7 +1,14 @@
 import {matcherHint, printReceived} from 'jest-matcher-utils'
 import {checkHtmlElement, deprecate} from './utils'
 
-export function toBeInTheDOM(element, container) {
+export function toBeInTheDOM<T>(
+  this: T,
+  _container?: Element | null,
+): jest.CustomMatcherResult {
+  const context = (this as unknown) as jest.MatcherContext
+  const element = arguments[0] as HTMLElement
+  const container = arguments[1] as HTMLElement
+
   deprecate(
     'toBeInTheDOM',
     'Please use toBeInTheDocument for searching the entire document and toContainElement for searching a specific container.',
@@ -19,7 +26,11 @@ export function toBeInTheDOM(element, container) {
     pass: container ? container.contains(element) : !!element,
     message: () => {
       return [
-        matcherHint(`${this.isNot ? '.not' : ''}.toBeInTheDOM`, 'element', ''),
+        matcherHint(
+          `${context.isNot ? '.not' : ''}.toBeInTheDOM`,
+          'element',
+          '',
+        ),
         '',
         'Received:',
         `  ${printReceived(element ? element.cloneNode(false) : element)}`,
diff --git a/src/to-be-invalid.js b/src/to-be-invalid.ts
similarity index 66%
rename from src/to-be-invalid.js
rename to src/to-be-invalid.ts
index 388c9f63..aba132ec 100644
--- a/src/to-be-invalid.js
+++ b/src/to-be-invalid.ts
@@ -3,18 +3,20 @@ import {checkHtmlElement, getTag} from './utils'
 
 const FORM_TAGS = ['form', 'input', 'select', 'textarea']
 
-function isElementHavingAriaInvalid(element) {
+function isElementHavingAriaInvalid(element: HTMLElement) {
   return (
     element.hasAttribute('aria-invalid') &&
     element.getAttribute('aria-invalid') !== 'false'
   )
 }
 
-function isElementInvalid(element) {
+function isElementInvalid(element: any) {
   return !element.checkValidity()
 }
 
-export function toBeInvalid(element) {
+export function toBeInvalid<T>(this: T) {
+  const context = (this as unknown) as jest.MatcherContext
+  const element = arguments[0] as HTMLElement
   checkHtmlElement(element, toBeInvalid, this)
 
   const isInvalid =
@@ -25,7 +27,11 @@ export function toBeInvalid(element) {
     message: () => {
       const is = isInvalid ? 'is' : 'is not'
       return [
-        matcherHint(`${this.isNot ? '.not' : ''}.toBeInvalid`, 'element', ''),
+        matcherHint(
+          `${context.isNot ? '.not' : ''}.toBeInvalid`,
+          'element',
+          '',
+        ),
         '',
         `Received element ${is} currently invalid:`,
         `  ${printReceived(element.cloneNode(false))}`,
@@ -34,7 +40,9 @@ export function toBeInvalid(element) {
   }
 }
 
-export function toBeValid(element) {
+export function toBeValid<T>(this: T) {
+  const context = (this as unknown) as jest.MatcherContext
+  const element = arguments[0] as HTMLElement
   checkHtmlElement(element, toBeValid, this)
 
   const isValid =
@@ -47,7 +55,7 @@ export function toBeValid(element) {
     message: () => {
       const is = isValid ? 'is' : 'is not'
       return [
-        matcherHint(`${this.isNot ? '.not' : ''}.toBeValid`, 'element', ''),
+        matcherHint(`${context.isNot ? '.not' : ''}.toBeValid`, 'element', ''),
         '',
         `Received element ${is} currently valid:`,
         `  ${printReceived(element.cloneNode(false))}`,
diff --git a/src/to-be-required.js b/src/to-be-required.ts
similarity index 76%
rename from src/to-be-required.js
rename to src/to-be-required.ts
index e85806d7..6e6775c5 100644
--- a/src/to-be-required.js
+++ b/src/to-be-required.ts
@@ -23,31 +23,33 @@ const SUPPORTED_ARIA_ROLES = [
   'tree',
 ]
 
-function isRequiredOnFormTagsExceptInput(element) {
+function isRequiredOnFormTagsExceptInput(element: HTMLElement) {
   return FORM_TAGS.includes(getTag(element)) && element.hasAttribute('required')
 }
 
-function isRequiredOnSupportedInput(element) {
+function isRequiredOnSupportedInput(element: HTMLElement) {
   return (
     getTag(element) === 'input' &&
     element.hasAttribute('required') &&
     ((element.hasAttribute('type') &&
-      !UNSUPPORTED_INPUT_TYPES.includes(element.getAttribute('type'))) ||
+      !UNSUPPORTED_INPUT_TYPES.includes(element.getAttribute('type')!)) ||
       !element.hasAttribute('type'))
   )
 }
 
-function isElementRequiredByARIA(element) {
+function isElementRequiredByARIA(element: HTMLElement) {
   return (
     element.hasAttribute('aria-required') &&
     element.getAttribute('aria-required') === 'true' &&
     (ARIA_FORM_TAGS.includes(getTag(element)) ||
       (element.hasAttribute('role') &&
-        SUPPORTED_ARIA_ROLES.includes(element.getAttribute('role'))))
+        SUPPORTED_ARIA_ROLES.includes(element.getAttribute('role')!)))
   )
 }
 
-export function toBeRequired(element) {
+export function toBeRequired<T>(this: T) {
+  const context = (this as unknown) as jest.MatcherContext
+  const element = arguments[0] as HTMLElement
   checkHtmlElement(element, toBeRequired, this)
 
   const isRequired =
@@ -60,7 +62,11 @@ export function toBeRequired(element) {
     message: () => {
       const is = isRequired ? 'is' : 'is not'
       return [
-        matcherHint(`${this.isNot ? '.not' : ''}.toBeRequired`, 'element', ''),
+        matcherHint(
+          `${context.isNot ? '.not' : ''}.toBeRequired`,
+          'element',
+          '',
+        ),
         '',
         `Received element ${is} required:`,
         `  ${printReceived(element.cloneNode(false))}`,
diff --git a/src/to-be-visible.js b/src/to-be-visible.ts
similarity index 57%
rename from src/to-be-visible.js
rename to src/to-be-visible.ts
index 43c6362b..bf359fe0 100644
--- a/src/to-be-visible.js
+++ b/src/to-be-visible.ts
@@ -1,29 +1,34 @@
 import {matcherHint, printReceived} from 'jest-matcher-utils'
 import {checkHtmlElement} from './utils'
 
-function isStyleVisible(element) {
-  const {getComputedStyle} = element.ownerDocument.defaultView
+function isStyleVisible(element: HTMLElement) {
+  const {getComputedStyle} = element.ownerDocument!.defaultView!
 
   const {display, visibility, opacity} = getComputedStyle(element)
   return (
     display !== 'none' &&
     visibility !== 'hidden' &&
     visibility !== 'collapse' &&
-    opacity !== '0' &&
-    opacity !== 0
+    opacity !== '0'
   )
 }
 
-function isAttributeVisible(element, previousElement) {
+function isAttributeVisible(
+  element: HTMLElement,
+  previousElement?: HTMLElement,
+) {
   return (
     !element.hasAttribute('hidden') &&
-    (element.nodeName === 'DETAILS' && previousElement.nodeName !== 'SUMMARY'
+    (element.nodeName === 'DETAILS' && previousElement!.nodeName !== 'SUMMARY'
       ? element.hasAttribute('open')
       : true)
   )
 }
 
-function isElementVisible(element, previousElement) {
+function isElementVisible(
+  element: HTMLElement,
+  previousElement?: HTMLElement,
+): boolean {
   return (
     isStyleVisible(element) &&
     isAttributeVisible(element, previousElement) &&
@@ -31,7 +36,9 @@ function isElementVisible(element, previousElement) {
   )
 }
 
-export function toBeVisible(element) {
+export function toBeVisible<T>(this: T) {
+  const context = (this as unknown) as jest.MatcherContext
+  const element = arguments[0] as HTMLElement
   checkHtmlElement(element, toBeVisible, this)
   const isVisible = isElementVisible(element)
   return {
@@ -39,7 +46,11 @@ export function toBeVisible(element) {
     message: () => {
       const is = isVisible ? 'is' : 'is not'
       return [
-        matcherHint(`${this.isNot ? '.not' : ''}.toBeVisible`, 'element', ''),
+        matcherHint(
+          `${context.isNot ? '.not' : ''}.toBeVisible`,
+          'element',
+          '',
+        ),
         '',
         `Received element ${is} visible:`,
         `  ${printReceived(element.cloneNode(false))}`,
diff --git a/src/to-contain-element.js b/src/to-contain-element.ts
similarity index 63%
rename from src/to-contain-element.js
rename to src/to-contain-element.ts
index fdaf06af..2944fd42 100644
--- a/src/to-contain-element.js
+++ b/src/to-contain-element.ts
@@ -5,7 +5,14 @@ import {
 } from 'jest-matcher-utils'
 import {checkHtmlElement} from './utils'
 
-export function toContainElement(container, element) {
+export function toContainElement<T>(
+  this: T,
+  _element: Element | null | undefined,
+) {
+  const context = (this as unknown) as jest.MatcherContext
+  const container = arguments[0] as HTMLElement
+  const element = arguments[1] as HTMLElement
+
   checkHtmlElement(container, toContainElement, this)
 
   if (element !== null) {
@@ -17,13 +24,13 @@ export function toContainElement(container, element) {
     message: () => {
       return [
         matcherHint(
-          `${this.isNot ? '.not' : ''}.toContainElement`,
+          `${context.isNot ? '.not' : ''}.toContainElement`,
           'element',
           'element',
         ),
         '',
         receivedColor(`${stringify(container.cloneNode(false))} ${
-          this.isNot ? 'contains:' : 'does not contain:'
+          context.isNot ? 'contains:' : 'does not contain:'
         } ${stringify(element ? element.cloneNode(false) : element)}
         `),
       ].join('\n')
diff --git a/src/to-contain-html.js b/src/to-contain-html.ts
similarity index 52%
rename from src/to-contain-html.js
rename to src/to-contain-html.ts
index cfcede1e..98471533 100644
--- a/src/to-contain-html.js
+++ b/src/to-contain-html.ts
@@ -1,14 +1,21 @@
 import {matcherHint, printReceived} from 'jest-matcher-utils'
 import {checkHtmlElement} from './utils'
 
-export function toContainHTML(container, htmlText) {
+export function toContainHTML<T>(this: T, _htmlText: string) {
+  const context = (this as unknown) as jest.MatcherContext
+  const container = arguments[0] as HTMLElement
+  const htmlText = arguments[1] as string
   checkHtmlElement(container, toContainHTML, this)
 
   return {
     pass: container.outerHTML.includes(htmlText),
     message: () => {
       return [
-        matcherHint(`${this.isNot ? '.not' : ''}.toContainHTML`, 'element', ''),
+        matcherHint(
+          `${context.isNot ? '.not' : ''}.toContainHTML`,
+          'element',
+          '',
+        ),
         '',
         'Received:',
         `  ${printReceived(container.cloneNode(true))}`,
diff --git a/src/to-have-attribute.js b/src/to-have-attribute.ts
similarity index 67%
rename from src/to-have-attribute.js
rename to src/to-have-attribute.ts
index bd56d7cd..f376dc88 100644
--- a/src/to-have-attribute.js
+++ b/src/to-have-attribute.ts
@@ -1,32 +1,41 @@
 import {matcherHint, stringify, printExpected} from 'jest-matcher-utils'
 import {checkHtmlElement, getMessage} from './utils'
 
-function printAttribute(name, value) {
+function printAttribute(name: string, value: string | undefined | null) {
   return value === undefined ? name : `${name}=${stringify(value)}`
 }
 
-function getAttributeComment(name, value) {
+function getAttributeComment(name: string, value: string | undefined) {
   return value === undefined
     ? `element.hasAttribute(${stringify(name)})`
     : `element.getAttribute(${stringify(name)}) === ${stringify(value)}`
 }
 
-export function toHaveAttribute(htmlElement, name, expectedValue) {
+export function toHaveAttribute<T>(
+  this: T,
+  _name: string,
+  _expectedValue?: string,
+) {
+  const context = (this as unknown) as jest.MatcherContext
+  const htmlElement = arguments[0] as HTMLElement
+  const name = arguments[1] as string
+  const expectedValue = arguments[2] as string
+
   checkHtmlElement(htmlElement, toHaveAttribute, this)
   const isExpectedValuePresent = expectedValue !== undefined
   const hasAttribute = htmlElement.hasAttribute(name)
   const receivedValue = htmlElement.getAttribute(name)
   return {
     pass: isExpectedValuePresent
-      ? hasAttribute && this.equals(receivedValue, expectedValue)
+      ? hasAttribute && context.equals(receivedValue, expectedValue)
       : hasAttribute,
     message: () => {
-      const to = this.isNot ? 'not to' : 'to'
+      const to = context.isNot ? 'not to' : 'to'
       const receivedAttribute = hasAttribute
         ? printAttribute(name, receivedValue)
         : null
       const matcher = matcherHint(
-        `${this.isNot ? '.not' : ''}.toHaveAttribute`,
+        `${context.isNot ? '.not' : ''}.toHaveAttribute`,
         'element',
         printExpected(name),
         {
diff --git a/src/to-have-class.js b/src/to-have-class.ts
similarity index 75%
rename from src/to-have-class.js
rename to src/to-have-class.ts
index 99b58892..558515c6 100644
--- a/src/to-have-class.js
+++ b/src/to-have-class.ts
@@ -1,8 +1,8 @@
 import {matcherHint, printExpected} from 'jest-matcher-utils'
 import {checkHtmlElement, getMessage} from './utils'
 
-function getExpectedClassNamesAndOptions(params) {
-  const lastParam = params.pop()
+function getExpectedClassNamesAndOptions(params: string[]) {
+  const lastParam = params.pop()!
   let expectedClassNames, options
 
   if (typeof lastParam === 'object') {
@@ -10,37 +10,40 @@ function getExpectedClassNamesAndOptions(params) {
     options = lastParam
   } else {
     expectedClassNames = params.concat(lastParam)
-    options = { exact: false }
+    options = {exact: false}
   }
   return {expectedClassNames, options}
 }
 
-function splitClassNames(str) {
+function splitClassNames(str: string | null) {
   if (!str) {
     return []
   }
   return str.split(/\s+/).filter(s => s.length > 0)
 }
 
-function isSubset(subset, superset) {
+function isSubset<T>(subset: T[], superset: T[]) {
   return subset.every(item => superset.includes(item))
 }
 
-export function toHaveClass(htmlElement, ...params) {
+export function toHaveClass<T>(this: T, ...args: any[]) {
+  const context = (this as unknown) as jest.MatcherContext
+  const [htmlElement, ...params] = args
+
   checkHtmlElement(htmlElement, toHaveClass, this)
   const {expectedClassNames, options} = getExpectedClassNamesAndOptions(params)
 
   const received = splitClassNames(htmlElement.getAttribute('class'))
   const expected = expectedClassNames.reduce(
     (acc, className) => acc.concat(splitClassNames(className)),
-    [],
+    [] as string[],
   )
 
   if (options.exact) {
     return {
       pass: isSubset(expected, received) && expected.length === received.length,
       message: () => {
-        const to = this.isNot ? 'not to' : 'to'
+        const to = context.isNot ? 'not to' : 'to'
         return getMessage(
           `Expected the element ${to} have EXACTLY defined classes`,
           expected.join(' '),
@@ -55,10 +58,10 @@ export function toHaveClass(htmlElement, ...params) {
     ? {
         pass: isSubset(expected, received),
         message: () => {
-          const to = this.isNot ? 'not to' : 'to'
+          const to = context.isNot ? 'not to' : 'to'
           return getMessage(
             matcherHint(
-              `${this.isNot ? '.not' : ''}.toHaveClass`,
+              `${context.isNot ? '.not' : ''}.toHaveClass`,
               'element',
               printExpected(expected.join(' ')),
             ),
@@ -70,9 +73,9 @@ export function toHaveClass(htmlElement, ...params) {
         },
       }
     : {
-        pass: this.isNot ? received.length > 0 : false,
+        pass: context.isNot ? received.length > 0 : false,
         message: () =>
-          this.isNot
+          context.isNot
             ? getMessage(
                 matcherHint('.not.toHaveClass', 'element', ''),
                 'Expected the element to have classes',
diff --git a/src/to-have-display-value.js b/src/to-have-display-value.js
deleted file mode 100644
index c59d7181..00000000
--- a/src/to-have-display-value.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import {matcherHint} from 'jest-matcher-utils'
-
-import {checkHtmlElement, getMessage} from './utils'
-
-export function toHaveDisplayValue(htmlElement, expectedValue) {
-  checkHtmlElement(htmlElement, toHaveDisplayValue, this)
-  const tagName = htmlElement.tagName.toLowerCase()
-
-  if (!['select', 'input', 'textarea'].includes(tagName)) {
-    throw new Error(
-      '.toHaveDisplayValue() currently supports only input, textarea or select elements, try with another matcher instead.',
-    )
-  }
-
-  if (tagName === 'input' && ['radio', 'checkbox'].includes(htmlElement.type)) {
-    throw new Error(
-      `.toHaveDisplayValue() currently does not support input[type="${htmlElement.type}"], try with another matcher instead.`,
-    )
-  }
-
-  const value =
-    tagName === 'select'
-      ? Array.from(htmlElement)
-          .filter(option => option.selected)
-          .map(option => option.textContent)
-          .toString()
-      : htmlElement.value
-
-  return {
-    pass: value === expectedValue.toString(),
-    message: () =>
-      getMessage(
-        matcherHint(
-          `${this.isNot ? '.not' : ''}.toHaveDisplayValue`,
-          'element',
-          '',
-        ),
-        `Expected element ${this.isNot ? 'not ' : ''}to have display value`,
-        expectedValue,
-        'Received',
-        value,
-      ),
-  }
-}
diff --git a/src/to-have-display-value.ts b/src/to-have-display-value.ts
new file mode 100644
index 00000000..bc8189e2
--- /dev/null
+++ b/src/to-have-display-value.ts
@@ -0,0 +1,58 @@
+import {matcherHint} from 'jest-matcher-utils'
+
+import {
+  checkHtmlElement,
+  getMessage,
+  isInputElement,
+  isSelectElement,
+} from './utils'
+
+export function toHaveDisplayValue<T>(
+  this: T,
+  _expectedValue: string | string[],
+) {
+  const context = (this as unknown) as jest.MatcherContext
+  const htmlElement = arguments[0] as HTMLElement
+  const expectedValue = arguments[1] as string
+
+  checkHtmlElement(htmlElement, toHaveDisplayValue, this)
+  const tagName = htmlElement.tagName.toLowerCase()
+
+  if (!['select', 'input', 'textarea'].includes(tagName)) {
+    throw new Error(
+      '.toHaveDisplayValue() currently supports only input, textarea or select elements, try with another matcher instead.',
+    )
+  }
+
+  if (
+    isInputElement(htmlElement) &&
+    ['radio', 'checkbox'].includes(htmlElement.type)
+  ) {
+    throw new Error(
+      `.toHaveDisplayValue() currently does not support input[type="${htmlElement.type}"], try with another matcher instead.`,
+    )
+  }
+
+  const value = isSelectElement(htmlElement)
+    ? Array.from(htmlElement)
+        .filter(option => (option as HTMLOptionElement).selected)
+        .map(option => option.textContent)
+        .toString()
+    : (htmlElement as {value?: string}).value
+
+  return {
+    pass: value === expectedValue.toString(),
+    message: () =>
+      getMessage(
+        matcherHint(
+          `${context.isNot ? '.not' : ''}.toHaveDisplayValue`,
+          'element',
+          '',
+        ),
+        `Expected element ${context.isNot ? 'not ' : ''}to have display value`,
+        expectedValue,
+        'Received',
+        value,
+      ),
+  }
+}
diff --git a/src/to-have-focus.js b/src/to-have-focus.js
deleted file mode 100644
index 0d653d44..00000000
--- a/src/to-have-focus.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import {matcherHint, printReceived, printExpected} from 'jest-matcher-utils'
-import {checkHtmlElement} from './utils'
-
-export function toHaveFocus(element) {
-  checkHtmlElement(element, toHaveFocus, this)
-
-  return {
-    pass: element.ownerDocument.activeElement === element,
-    message: () => {
-      return [
-        matcherHint(`${this.isNot ? '.not' : ''}.toHaveFocus`, 'element', ''),
-        '',
-        'Expected',
-        `  ${printExpected(element)}`,
-        'Received:',
-        `  ${printReceived(element.ownerDocument.activeElement)}`,
-      ].join('\n')
-    },
-  }
-}
diff --git a/src/to-have-focus.ts b/src/to-have-focus.ts
new file mode 100644
index 00000000..f5059fa7
--- /dev/null
+++ b/src/to-have-focus.ts
@@ -0,0 +1,27 @@
+import {matcherHint, printReceived, printExpected} from 'jest-matcher-utils'
+import {checkHtmlElement} from './utils'
+
+export function toHaveFocus<T>(this: T) {
+  const context = (this as unknown) as jest.MatcherContext
+  const element = arguments[0] as HTMLElement
+  checkHtmlElement(element, toHaveFocus, this)
+
+  const activeElement = element.ownerDocument!.activeElement!
+  return {
+    pass: activeElement === element,
+    message: () => {
+      return [
+        matcherHint(
+          `${context.isNot ? '.not' : ''}.toHaveFocus`,
+          'element',
+          '',
+        ),
+        '',
+        'Expected',
+        `  ${printExpected(element)}`,
+        'Received:',
+        `  ${printReceived(activeElement)}`,
+      ].join('\n')
+    },
+  }
+}
diff --git a/src/to-have-form-values.js b/src/to-have-form-values.ts
similarity index 71%
rename from src/to-have-form-values.js
rename to src/to-have-form-values.ts
index 0a571fd2..ab5421bd 100644
--- a/src/to-have-form-values.js
+++ b/src/to-have-form-values.ts
@@ -2,6 +2,7 @@ import {matcherHint} from 'jest-matcher-utils'
 import jestDiff from 'jest-diff'
 import isEqualWith from 'lodash/isEqualWith'
 import uniq from 'lodash/uniq'
+// @ts-ignore
 import escape from 'css.escape'
 import {
   checkHtmlElement,
@@ -11,7 +12,7 @@ import {
 
 // Returns the combined value of several elements that have the same name
 // e.g. radio buttons or groups of checkboxes
-function getMultiElementValue(elements) {
+function getMultiElementValue(elements: HTMLInputElement[]) {
   const types = uniq(elements.map(element => element.type))
   if (types.length !== 1) {
     throw new Error(
@@ -33,8 +34,11 @@ function getMultiElementValue(elements) {
   }
 }
 
-function getFormValue(container, name) {
-  const elements = [...container.querySelectorAll(`[name="${escape(name)}"]`)]
+function getFormValue(container: HTMLFormElement, name: string) {
+  const elements = [
+    ...container.querySelectorAll(`[name="${escape(name)}"]`),
+  ] as HTMLInputElement[]
+
   /* istanbul ignore if */
   if (elements.length === 0) {
     return undefined // shouldn't happen, but just in case
@@ -48,12 +52,14 @@ function getFormValue(container, name) {
 }
 
 // Strips the `[]` suffix off a form value name
-function getPureName(name) {
+function getPureName(name: string) {
   return /\[\]$/.test(name) ? name.slice(0, -2) : name
 }
 
-function getAllFormValues(container) {
-  const names = Array.from(container.elements).map(element => element.name)
+function getAllFormValues(container: HTMLFormElement): Record<string, string> {
+  const names = Array.from(container.elements).map(
+    element => (element as HTMLInputElement).name,
+  )
   return names.reduce(
     (obj, name) => ({
       ...obj,
@@ -63,7 +69,16 @@ function getAllFormValues(container) {
   )
 }
 
-export function toHaveFormValues(formElement, expectedValues) {
+type ExpectedValue = string | number | boolean | string[] | null | undefined
+
+export function toHaveFormValues<T>(
+  this: T,
+  _expectedValues: Record<string, ExpectedValue>,
+) {
+  const context = (this as unknown) as jest.MatcherContext
+  const formElement = arguments[0] as HTMLFormElement
+  const expectedValues = arguments[1] as Record<string, ExpectedValue>
+
   checkHtmlElement(formElement, toHaveFormValues, this)
   if (!formElement.elements) {
     // TODO: Change condition to use instanceof against the appropriate element classes instead
@@ -75,8 +90,8 @@ export function toHaveFormValues(formElement, expectedValues) {
       isEqualWith(formValues[name], expectedValue, compareArraysAsSet),
     ),
     message: () => {
-      const to = this.isNot ? 'not to' : 'to'
-      const matcher = `${this.isNot ? '.not' : ''}.toHaveFormValues`
+      const to = context.isNot ? 'not to' : 'to'
+      const matcher = `${context.isNot ? '.not' : ''}.toHaveFormValues`
       const commonKeyValues = Object.keys(formValues)
         .filter(key => expectedValues.hasOwnProperty(key))
         .reduce((obj, key) => ({...obj, [key]: formValues[key]}), {})
diff --git a/src/to-have-style.js b/src/to-have-style.ts
similarity index 58%
rename from src/to-have-style.js
rename to src/to-have-style.ts
index 3e8a155b..91e9fea8 100644
--- a/src/to-have-style.js
+++ b/src/to-have-style.ts
@@ -2,21 +2,27 @@ import {matcherHint} from 'jest-matcher-utils'
 import jestDiff from 'jest-diff'
 import chalk from 'chalk'
 import {checkHtmlElement, parseCSS, parseJStoCSS} from './utils'
+import {Declaration} from 'css'
 
-function getStyleDeclaration(document, css) {
-  const styles = {}
+function getStyleDeclaration(document: Document, css: Declaration) {
+  const styles: Record<string, string> = {}
 
   // The next block is necessary to normalize colors
   const copy = document.createElement('div')
   Object.keys(css).forEach(property => {
+    // @ts-ignore
     copy.style[property] = css[property]
+    // @ts-ignore
     styles[property] = copy.style[property]
   })
 
   return styles
 }
 
-function isSubset(styles, computedStyle) {
+function isSubset(
+  styles: Record<string, string>,
+  computedStyle: CSSStyleDeclaration,
+) {
   return (
     !!Object.keys(styles).length &&
     Object.entries(styles).every(
@@ -26,7 +32,7 @@ function isSubset(styles, computedStyle) {
   )
 }
 
-function printoutStyles(styles) {
+function printoutStyles(styles: Record<string, string>) {
   return Object.keys(styles)
     .sort()
     .map(prop => `${prop}: ${styles[prop]};`)
@@ -35,7 +41,10 @@ function printoutStyles(styles) {
 
 // Highlights only style rules that were expected but were not found in the
 // received computed styles
-function expectedDiff(expected, computedStyles) {
+function expectedDiff(
+  expected: Record<string, string>,
+  computedStyles: CSSStyleDeclaration,
+) {
   const received = Array.from(computedStyles)
     .filter(prop => expected[prop])
     .reduce(
@@ -48,26 +57,36 @@ function expectedDiff(expected, computedStyles) {
     printoutStyles(received),
   )
   // Remove the "+ Received" annotation because this is a one-way diff
-  return diffOutput.replace(`${chalk.red('+ Received')}\n`, '')
+  return diffOutput!.replace(`${chalk.red('+ Received')}\n`, '')
 }
 
-function getCSStoParse(document, css) {
+function getCSStoParse(
+  document: Document,
+  css: string | Partial<CSSStyleDeclaration>,
+) {
   return typeof css === 'object' ? parseJStoCSS(document, css) : css
 }
 
-export function toHaveStyle(htmlElement, css) {
+export function toHaveStyle<T>(
+  this: T,
+  _css: string | Partial<CSSStyleDeclaration>,
+) {
+  const context = (this as unknown) as jest.MatcherContext
+  const htmlElement = arguments[0] as HTMLElement
+  const css = arguments[1] as string | Partial<CSSStyleDeclaration>
+
   checkHtmlElement(htmlElement, toHaveStyle, this)
-  const cssToParse = getCSStoParse(htmlElement.ownerDocument, css)
-  const parsedCSS = parseCSS(cssToParse, toHaveStyle, this)
-  const {getComputedStyle} = htmlElement.ownerDocument.defaultView
+  const cssToParse = getCSStoParse(htmlElement.ownerDocument!, css)
+  const parsedCSS = parseCSS(cssToParse, toHaveStyle, context)
+  const {getComputedStyle} = htmlElement.ownerDocument!.defaultView!
 
-  const expected = getStyleDeclaration(htmlElement.ownerDocument, parsedCSS)
+  const expected = getStyleDeclaration(htmlElement.ownerDocument!, parsedCSS)
   const received = getComputedStyle(htmlElement)
 
   return {
     pass: isSubset(expected, received),
     message: () => {
-      const matcher = `${this.isNot ? '.not' : ''}.toHaveStyle`
+      const matcher = `${context.isNot ? '.not' : ''}.toHaveStyle`
       return [
         matcherHint(matcher, 'element', ''),
         expectedDiff(expected, received),
diff --git a/src/to-have-text-content.js b/src/to-have-text-content.js
deleted file mode 100644
index 9c480100..00000000
--- a/src/to-have-text-content.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import {matcherHint} from 'jest-matcher-utils'
-import {checkHtmlElement, getMessage, matches, normalize} from './utils'
-
-export function toHaveTextContent(
-  htmlElement,
-  checkWith,
-  options = {normalizeWhitespace: true},
-) {
-  checkHtmlElement(htmlElement, toHaveTextContent, this)
-
-  const textContent = options.normalizeWhitespace
-    ? normalize(htmlElement.textContent)
-    : htmlElement.textContent.replace(/\u00a0/g, ' ') // Replace &nbsp; with normal spaces
-
-  const checkingWithEmptyString = textContent !== '' && checkWith === ''
-
-  return {
-    pass: !checkingWithEmptyString && matches(textContent, checkWith),
-    message: () => {
-      const to = this.isNot ? 'not to' : 'to'
-      return getMessage(
-        matcherHint(
-          `${this.isNot ? '.not' : ''}.toHaveTextContent`,
-          'element',
-          '',
-        ),
-        checkingWithEmptyString
-          ? `Checking with empty string will always match, use .toBeEmpty() instead`
-          : `Expected element ${to} have text content`,
-        checkWith,
-        'Received',
-        textContent,
-      )
-    },
-  }
-}
diff --git a/src/to-have-text-content.ts b/src/to-have-text-content.ts
new file mode 100644
index 00000000..b10b4169
--- /dev/null
+++ b/src/to-have-text-content.ts
@@ -0,0 +1,45 @@
+import {matcherHint} from 'jest-matcher-utils'
+import {checkHtmlElement, getMessage, matches, normalize} from './utils'
+
+type Options = {
+  normalizeWhitespace?: boolean
+}
+
+export function toHaveTextContent<T>(
+  this: T,
+  _matcher: string | RegExp | number,
+  _options?: Options,
+) {
+  const context = (this as unknown) as jest.MatcherContext
+  const htmlElement = arguments[0] as HTMLElement
+  const matcher = arguments[1] as string | RegExp | number
+  const options = (arguments[2] || {normalizeWhitespace: true}) as Options
+
+  checkHtmlElement(htmlElement, toHaveTextContent, this)
+
+  const textContent = options.normalizeWhitespace
+    ? normalize(htmlElement.textContent!)
+    : htmlElement.textContent!.replace(/\u00a0/g, ' ') // Replace &nbsp; with normal spaces
+
+  const checkingWithEmptyString = textContent !== '' && matcher === ''
+
+  return {
+    pass: !checkingWithEmptyString && matches(textContent, matcher),
+    message: () => {
+      const to = context.isNot ? 'not to' : 'to'
+      return getMessage(
+        matcherHint(
+          `${context.isNot ? '.not' : ''}.toHaveTextContent`,
+          'element',
+          '',
+        ),
+        checkingWithEmptyString
+          ? `Checking with empty string will always match, use .toBeEmpty() instead`
+          : `Expected element ${to} have text content`,
+        matcher,
+        'Received',
+        textContent,
+      )
+    },
+  }
+}
diff --git a/src/to-have-value.js b/src/to-have-value.ts
similarity index 70%
rename from src/to-have-value.js
rename to src/to-have-value.ts
index fa1a101f..ba04629d 100644
--- a/src/to-have-value.js
+++ b/src/to-have-value.ts
@@ -5,13 +5,19 @@ import {
   compareArraysAsSet,
   getMessage,
   getSingleElementValue,
+  isInputElement,
 } from './utils'
 
-export function toHaveValue(htmlElement, expectedValue) {
-  checkHtmlElement(htmlElement, toHaveValue, this)
+type ExpectedValue = string | number | string[] | null
+
+export function toHaveValue<T>(this: T, _expectedValue?: ExpectedValue) {
+  const context = (this as unknown) as jest.MatcherContext
+  const htmlElement = arguments[0] as HTMLElement
+  const expectedValue = arguments[1] as ExpectedValue
+  checkHtmlElement(htmlElement, toHaveValue, context)
 
   if (
-    htmlElement.tagName.toLowerCase() === 'input' &&
+    isInputElement(htmlElement) &&
     ['checkbox', 'radio'].includes(htmlElement.type)
   ) {
     throw new Error(
@@ -34,11 +40,11 @@ export function toHaveValue(htmlElement, expectedValue) {
       ? isEqualWith(receivedValue, expectedValue, compareArraysAsSet)
       : Boolean(receivedValue),
     message: () => {
-      const to = this.isNot ? 'not to' : 'to'
+      const to = context.isNot ? 'not to' : 'to'
       const matcher = matcherHint(
-        `${this.isNot ? '.not' : ''}.toHaveValue`,
+        `${context.isNot ? '.not' : ''}.toHaveValue`,
         'element',
-        expectedValue,
+        expectedValue as string,
       )
       return getMessage(
         matcher,
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 00000000..f0d8365c
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,4 @@
+export type InvalidCssReceived = {
+  css: string
+  message: string
+}
diff --git a/src/utils.js b/src/utils.ts
similarity index 63%
rename from src/utils.js
rename to src/utils.ts
index c07a3037..8bc4feee 100644
--- a/src/utils.js
+++ b/src/utils.ts
@@ -7,11 +7,12 @@ import {
   printReceived,
   stringify,
 } from 'jest-matcher-utils'
-import {parse} from 'css'
+import {parse, Rule, Declaration} from 'css'
 import isEqual from 'lodash/isEqual'
+import {InvalidCssReceived} from './types'
 
-class HtmlElementTypeError extends Error {
-  constructor(received, matcherFn, context) {
+class HtmlElementTypeError<C> extends Error {
+  constructor(received: Element, matcherFn: jest.CustomMatcher, context: C) {
     super()
 
     /* istanbul ignore next */
@@ -27,6 +28,7 @@ class HtmlElementTypeError extends Error {
     }
     this.message = [
       matcherHint(
+        // @ts-ignore
         `${context.isNot ? '.not' : ''}.${matcherFn.name}`,
         'received',
         '',
@@ -40,7 +42,10 @@ class HtmlElementTypeError extends Error {
   }
 }
 
-function checkHasWindow(htmlElement, ...args) {
+function checkHasWindow<C>(
+  htmlElement: Element,
+  ...args: [jest.CustomMatcher, C]
+) {
   if (
     !htmlElement ||
     !htmlElement.ownerDocument ||
@@ -50,12 +55,17 @@ function checkHasWindow(htmlElement, ...args) {
   }
 }
 
-function checkHtmlElement(htmlElement, ...args) {
+function checkHtmlElement<C>(
+  htmlElement: Element,
+  ...args: [jest.CustomMatcher, C]
+) {
   checkHasWindow(htmlElement, ...args)
-  const window = htmlElement.ownerDocument.defaultView
+  const window = htmlElement.ownerDocument!.defaultView
 
   if (
+    // @ts-ignore
     !(htmlElement instanceof window.HTMLElement) &&
+    // @ts-ignore
     !(htmlElement instanceof window.SVGElement)
   ) {
     throw new HtmlElementTypeError(htmlElement, ...args)
@@ -63,7 +73,11 @@ function checkHtmlElement(htmlElement, ...args) {
 }
 
 class InvalidCSSError extends Error {
-  constructor(received, matcherFn) {
+  constructor(
+    received: InvalidCssReceived,
+    matcherFn: jest.CustomMatcher,
+    _context: jest.MatcherContext,
+  ) {
     super()
 
     /* istanbul ignore next */
@@ -79,8 +93,11 @@ class InvalidCSSError extends Error {
   }
 }
 
-function parseCSS(css, ...args) {
-  const ast = parse(`selector { ${css} }`, {silent: true}).stylesheet
+function parseCSS(
+  css: string,
+  ...args: [jest.CustomMatcher, jest.MatcherContext]
+) {
+  const ast = parse(`selector { ${css} }`, {silent: true}).stylesheet!
 
   if (ast.parsingErrors && ast.parsingErrors.length > 0) {
     const {reason, line} = ast.parsingErrors[0]
@@ -94,25 +111,27 @@ function parseCSS(css, ...args) {
     )
   }
 
-  const parsedRules = ast.rules[0].declarations
+  const delarations = (ast.rules[0]! as Rule).declarations as Declaration[]
+  const parsedRules = delarations
     .filter(d => d.type === 'declaration')
     .reduce(
-      (obj, {property, value}) => Object.assign(obj, {[property]: value}),
+      (obj, {property, value}) =>
+        Object.assign(obj, {[String(property)]: value}),
       {},
     )
   return parsedRules
 }
 
-function display(value) {
+function display(value: string | unknown) {
   return typeof value === 'string' ? value : stringify(value)
 }
 
 function getMessage(
-  matcher,
-  expectedLabel,
-  expectedValue,
-  receivedLabel,
-  receivedValue,
+  matcher: string,
+  expectedLabel: string,
+  expectedValue: string | RegExp | number | null | string[],
+  receivedLabel: string,
+  receivedValue?: string | null,
 ) {
   return [
     `${matcher}\n`,
@@ -121,7 +140,7 @@ function getMessage(
   ].join('\n')
 }
 
-function matches(textToMatch, matcher) {
+function matches(textToMatch: string, matcher: RegExp | unknown) {
   if (matcher instanceof RegExp) {
     return matcher.test(textToMatch)
   } else {
@@ -129,7 +148,7 @@ function matches(textToMatch, matcher) {
   }
 }
 
-function deprecate(name, replacementText) {
+function deprecate(name: string, replacementText?: string) {
   // Notify user that they are using deprecated functionality.
   // eslint-disable-next-line no-console
   console.warn(
@@ -138,15 +157,15 @@ function deprecate(name, replacementText) {
   )
 }
 
-function normalize(text) {
+function normalize(text: string) {
   return text.replace(/\s+/g, ' ').trim()
 }
 
-function getTag(element) {
+function getTag(element: HTMLElement) {
   return element.tagName && element.tagName.toLowerCase()
 }
 
-function getSelectValue({multiple, options}) {
+function getSelectValue({multiple, options}: HTMLSelectElement) {
   const selectedOptions = [...options].filter(option => option.selected)
 
   if (multiple) {
@@ -159,7 +178,7 @@ function getSelectValue({multiple, options}) {
   return selectedOptions[0].value
 }
 
-function getInputValue(inputElement) {
+function getInputValue(inputElement: HTMLInputElement) {
   switch (inputElement.type) {
     case 'number':
       return inputElement.value === '' ? null : Number(inputElement.value)
@@ -170,29 +189,33 @@ function getInputValue(inputElement) {
   }
 }
 
-function getSingleElementValue(element) {
+function getSingleElementValue(element: HTMLElement) {
   /* istanbul ignore if */
   if (!element) {
     return undefined
   }
-  switch (element.tagName.toLowerCase()) {
-    case 'input':
-      return getInputValue(element)
-    case 'select':
-      return getSelectValue(element)
-    default:
-      return element.value
+
+  if (isInputElement(element)) {
+    return getInputValue(element)
+  } else if (isSelectElement(element)) {
+    return getSelectValue(element)
+  } else {
+    // @ts-ignore
+    return element.value
   }
 }
 
-function compareArraysAsSet(a, b) {
+function compareArraysAsSet<T, R>(a: T[], b: R[]) {
   if (Array.isArray(a) && Array.isArray(b)) {
     return isEqual(new Set(a), new Set(b))
   }
   return undefined
 }
 
-function parseJStoCSS(document, css) {
+function parseJStoCSS(
+  document: Document,
+  css: string | Partial<CSSStyleDeclaration>,
+) {
   const sandboxElement = document.createElement('div')
   Object.assign(sandboxElement.style, css)
   return sandboxElement.style.cssText
@@ -211,3 +234,15 @@ export {
   compareArraysAsSet,
   parseJStoCSS,
 }
+
+export const isInputElement = (
+  htmlElement: HTMLElement,
+): htmlElement is HTMLInputElement => {
+  return htmlElement.tagName.toLowerCase() === 'input'
+}
+
+export const isSelectElement = (
+  htmlElement: HTMLElement,
+): htmlElement is HTMLSelectElement => {
+  return htmlElement.tagName.toLowerCase() === 'select'
+}
diff --git a/tests/jest.config.dom.js b/tests/jest.config.dom.js
index 68fbf255..816bcf64 100644
--- a/tests/jest.config.dom.js
+++ b/tests/jest.config.dom.js
@@ -6,4 +6,8 @@ module.exports = {
   displayName: 'jsdom',
   testEnvironment: 'dom',
   ...config,
+  setupFilesAfterEnv: ['<rootDir>/tests/setup-env.ts'],
+  transform: {
+    '.ts': 'ts-jest',
+  },
 }
diff --git a/tests/jest.config.node.js b/tests/jest.config.node.js
index 91b44536..010c0511 100644
--- a/tests/jest.config.node.js
+++ b/tests/jest.config.node.js
@@ -6,4 +6,8 @@ module.exports = {
   displayName: 'node',
   testEnvironment: 'node',
   ...config,
+  setupFilesAfterEnv: ['<rootDir>/tests/setup-env.ts'],
+  transform: {
+    '.ts': 'ts-jest',
+  },
 }
diff --git a/tests/setup-env.d.ts b/tests/setup-env.d.ts
new file mode 100644
index 00000000..215992d0
--- /dev/null
+++ b/tests/setup-env.d.ts
@@ -0,0 +1 @@
+import '../src/extend-expect'
diff --git a/tests/setup-env.js b/tests/setup-env.ts
similarity index 100%
rename from tests/setup-env.js
rename to tests/setup-env.ts
diff --git a/tsconfig.build.json b/tsconfig.build.json
new file mode 100644
index 00000000..07dc2d1f
--- /dev/null
+++ b/tsconfig.build.json
@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "declaration": true
+  },
+  "exclude": ["tests", "dist", "src/__tests__"]
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000..2e44a929
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "commonjs",
+    "strict": true,
+    "esModuleInterop": true,
+    "outDir": "./dist",
+    "skipLibCheck": true
+  }
+}

From 8350da945335db8388458791180a879342a63fc9 Mon Sep 17 00:00:00 2001
From: Matej Snuderl <ematej.snuderl@gmail.com>
Date: Thu, 7 May 2020 16:36:47 +0200
Subject: [PATCH 2/8] disable cache for now

---
 .travis.yml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.travis.yml b/.travis.yml
index fdc18924..c758afa3 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,7 +1,6 @@
 language: node_js
 env:
   - FORCE_COLOR=true
-cache: npm
 notifications:
   email: false
 node_js:

From af64ebbcbff489d64b1b6006cfc0095008f3ed14 Mon Sep 17 00:00:00 2001
From: Matej Snuderl <ematej.snuderl@gmail.com>
Date: Thu, 7 May 2020 19:48:16 +0200
Subject: [PATCH 3/8] chore(ci): use yarn

---
 .travis.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index c758afa3..22efa9b7 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -7,9 +7,9 @@ node_js:
   - 10.14
   - 12
   - node
-install: npm install
+install: yarn install
 script:
-  - npm run validate
+  - yarn validate
   - npx codecov@3
 branches:
   only:

From df00f01662d3ccf40b1eed9dde4ec4d43466f04a Mon Sep 17 00:00:00 2001
From: Matej Snuderl <ematej.snuderl@gmail.com>
Date: Thu, 7 May 2020 19:51:10 +0200
Subject: [PATCH 4/8] chore(ci): bump node 10.x

---
 .travis.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.travis.yml b/.travis.yml
index 22efa9b7..a36af70c 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -4,7 +4,7 @@ env:
 notifications:
   email: false
 node_js:
-  - 10.14
+  - 10.18
   - 12
   - node
 install: yarn install

From 3cf97e2864c2c20671f3ae681619b5641f12584c Mon Sep 17 00:00:00 2001
From: Matej Snuderl <ematej.snuderl@gmail.com>
Date: Thu, 7 May 2020 19:59:29 +0200
Subject: [PATCH 5/8] chore(tests): 100% test coverage

---
 src/__tests__/helpers/test-utils.ts | 9 ---------
 tests/setup-env.ts                  | 2 +-
 2 files changed, 1 insertion(+), 10 deletions(-)

diff --git a/src/__tests__/helpers/test-utils.ts b/src/__tests__/helpers/test-utils.ts
index 28375829..65862e4c 100644
--- a/src/__tests__/helpers/test-utils.ts
+++ b/src/__tests__/helpers/test-utils.ts
@@ -1,5 +1,4 @@
 import document from './document'
-import * as extensions from '../../matchers'
 
 function render(html: string) {
   const container = document.createElement('div')
@@ -9,12 +8,4 @@ function render(html: string) {
   return {container, queryByTestId}
 }
 
-type Extensions = typeof extensions
-
-declare global {
-  namespace jest {
-    interface Matchers<R> extends Extensions {}
-  }
-}
-
 export {render}
diff --git a/tests/setup-env.ts b/tests/setup-env.ts
index a9325d25..151f6e7b 100644
--- a/tests/setup-env.ts
+++ b/tests/setup-env.ts
@@ -1,4 +1,4 @@
 import {plugins} from 'pretty-format'
-import '../src/extend-expect'
+import '../src/index'
 
 expect.addSnapshotSerializer(plugins.ConvertAnsi)

From 20ab1d98dcafb2a64157e0e0ca5e2007dc849f09 Mon Sep 17 00:00:00 2001
From: Matej Snuderl <ematej.snuderl@gmail.com>
Date: Thu, 7 May 2020 20:09:49 +0200
Subject: [PATCH 6/8] typings: handle direct exports

---
 extend-expect.d.ts  | 1 +
 matchers.d.ts       | 1 +
 package.json        | 4 +++-
 tsconfig.build.json | 3 ++-
 tsconfig.json       | 1 -
 5 files changed, 7 insertions(+), 3 deletions(-)
 create mode 100644 extend-expect.d.ts
 create mode 100644 matchers.d.ts

diff --git a/extend-expect.d.ts b/extend-expect.d.ts
new file mode 100644
index 00000000..7c063266
--- /dev/null
+++ b/extend-expect.d.ts
@@ -0,0 +1 @@
+import './dist/typings'
diff --git a/matchers.d.ts b/matchers.d.ts
new file mode 100644
index 00000000..4dbf6ca4
--- /dev/null
+++ b/matchers.d.ts
@@ -0,0 +1 @@
+export * from './dist/typings/matchers'
diff --git a/package.json b/package.json
index 2e597bf1..948b57e2 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,9 @@
   "files": [
     "dist",
     "extend-expect.js",
-    "matchers.js"
+    "extend-expect.d.ts",
+    "matchers.js",
+    "matchers.d.ts"
   ],
   "keywords": [
     "testing",
diff --git a/tsconfig.build.json b/tsconfig.build.json
index 07dc2d1f..05cd0883 100644
--- a/tsconfig.build.json
+++ b/tsconfig.build.json
@@ -1,7 +1,8 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "declaration": true
+    "declaration": true,
+    "outDir": "./dist/typings"
   },
   "exclude": ["tests", "dist", "src/__tests__"]
 }
diff --git a/tsconfig.json b/tsconfig.json
index 2e44a929..08c3ae90 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,7 +4,6 @@
     "module": "commonjs",
     "strict": true,
     "esModuleInterop": true,
-    "outDir": "./dist",
     "skipLibCheck": true
   }
 }

From bdd895a56df950e82c6b59ee5e9f416211e95891 Mon Sep 17 00:00:00 2001
From: Matej Snuderl <ematej.snuderl@gmail.com>
Date: Thu, 7 May 2020 20:53:45 +0200
Subject: [PATCH 7/8] chore: to-have-description to ts

---
 ...-description.js => to-have-description.ts} |  0
 ...-description.js => to-have-description.ts} | 27 ++++++++++++-------
 tests/setup-env.d.ts                          |  1 -
 3 files changed, 17 insertions(+), 11 deletions(-)
 rename src/__tests__/{to-have-description.js => to-have-description.ts} (100%)
 rename src/{to-have-description.js => to-have-description.ts} (56%)
 delete mode 100644 tests/setup-env.d.ts

diff --git a/src/__tests__/to-have-description.js b/src/__tests__/to-have-description.ts
similarity index 100%
rename from src/__tests__/to-have-description.js
rename to src/__tests__/to-have-description.ts
diff --git a/src/to-have-description.js b/src/to-have-description.ts
similarity index 56%
rename from src/to-have-description.js
rename to src/to-have-description.ts
index 1f1f769b..55802745 100644
--- a/src/to-have-description.js
+++ b/src/to-have-description.ts
@@ -1,11 +1,17 @@
 import {matcherHint, printExpected, printReceived} from 'jest-matcher-utils'
 import {checkHtmlElement, getMessage, normalize} from './utils'
 
+type Matcher = string | RegExp
+
 // See algoritm: https://www.w3.org/TR/accname-1.1/#mapping_additional_nd_description
-export function toHaveDescription(htmlElement, checkWith) {
+export function toHaveDescription<T>(this: T, _matcher?: Matcher) {
+  const context = (this as unknown) as jest.MatcherContext
+
+  const htmlElement = arguments[0] as HTMLElement
+  const matcher = arguments[1] as Matcher
   checkHtmlElement(htmlElement, toHaveDescription, this)
 
-  const expectsDescription = checkWith !== undefined
+  const expectsDescription = matcher !== undefined
 
   const descriptionIDRaw = htmlElement.getAttribute('aria-describedby') || ''
   const descriptionIDs = descriptionIDRaw.split(/\s+/).filter(Boolean)
@@ -13,27 +19,28 @@ export function toHaveDescription(htmlElement, checkWith) {
   if (descriptionIDs.length > 0) {
     const document = htmlElement.ownerDocument
     const descriptionEls = descriptionIDs
-      .map(descriptionID => document.getElementById(descriptionID))
+      .map(descriptionID => document!.getElementById(descriptionID))
       .filter(Boolean)
-    description = normalize(descriptionEls.map(el => el.textContent).join(' '))
+
+    description = normalize(descriptionEls.map(el => el!.textContent).join(' '))
   }
 
   return {
     pass: expectsDescription
-      ? checkWith instanceof RegExp
-        ? checkWith.test(description)
-        : this.equals(description, checkWith)
+      ? matcher instanceof RegExp
+        ? matcher.test(description)
+        : context.equals(description, matcher)
       : Boolean(description),
     message: () => {
-      const to = this.isNot ? 'not to' : 'to'
+      const to = context.isNot ? 'not to' : 'to'
       return getMessage(
         matcherHint(
-          `${this.isNot ? '.not' : ''}.toHaveDescription`,
+          `${context.isNot ? '.not' : ''}.toHaveDescription`,
           'element',
           '',
         ),
         `Expected the element ${to} have description`,
-        printExpected(checkWith),
+        printExpected(matcher),
         'Received',
         printReceived(description),
       )
diff --git a/tests/setup-env.d.ts b/tests/setup-env.d.ts
deleted file mode 100644
index 215992d0..00000000
--- a/tests/setup-env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-import '../src/extend-expect'

From 8a6dc04507a85ffadaa8a97add4fd7431ee21109 Mon Sep 17 00:00:00 2001
From: Matej Snuderl <ematej.snuderl@gmail.com>
Date: Thu, 7 May 2020 21:14:48 +0200
Subject: [PATCH 8/8] chore: try with npm

---
 .travis.yml                       |  5 +++--
 package.json                      |  2 +-
 src/__tests__/helpers/document.ts | 10 ++++++++++
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index a36af70c..f1c2c515 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,15 +1,16 @@
 language: node_js
 env:
   - FORCE_COLOR=true
+cache: npm
 notifications:
   email: false
 node_js:
   - 10.18
   - 12
   - node
-install: yarn install
+install: npm install
 script:
-  - yarn validate
+  - npm run validate
   - npx codecov@3
 branches:
   only:
diff --git a/package.json b/package.json
index 948b57e2..a6bf8f02 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,7 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.9.2",
-    "chalk": "^4.0.0",
+    "chalk": "^3.0.0",
     "css": "^2.2.4",
     "css.escape": "^1.5.1",
     "jest-diff": "^25.1.0",
diff --git a/src/__tests__/helpers/document.ts b/src/__tests__/helpers/document.ts
index aa6e58a2..0e317adf 100644
--- a/src/__tests__/helpers/document.ts
+++ b/src/__tests__/helpers/document.ts
@@ -1,3 +1,5 @@
+import * as extensions from '../../matchers'
+
 let document: Document
 
 const globalWithDocument = global as {
@@ -13,3 +15,11 @@ if (globalWithDocument.document) {
 }
 
 export default document
+
+type Extensions = typeof extensions
+
+declare global {
+  namespace jest {
+    interface Matchers<R, T> extends Extensions {}
+  }
+}