diff --git a/packages/grafana-ui/package.json b/packages/grafana-ui/package.json
index 333d5b4aeb7..8a4aa9e137a 100644
--- a/packages/grafana-ui/package.json
+++ b/packages/grafana-ui/package.json
@@ -149,6 +149,7 @@
     "@types/react-calendar": "3.5.1",
     "@types/react-color": "3.0.6",
     "@types/react-dom": "17.0.14",
+    "@types/react-highlight-words": "0.16.4",
     "@types/react-router-dom": "5.3.3",
     "@types/react-table": "7.7.12",
     "@types/react-test-renderer": "17.0.1",
diff --git a/packages/grafana-ui/src/components/BrowserLabel/Label.tsx b/packages/grafana-ui/src/components/BrowserLabel/Label.tsx
index a93a1cd06b4..8cd9e0eab0a 100644
--- a/packages/grafana-ui/src/components/BrowserLabel/Label.tsx
+++ b/packages/grafana-ui/src/components/BrowserLabel/Label.tsx
@@ -1,6 +1,5 @@
 import { cx, css } from '@emotion/css';
 import React, { forwardRef, HTMLAttributes, useCallback } from 'react';
-// @ts-ignore
 import Highlighter from 'react-highlight-words';
 
 import { GrafanaTheme2 } from '@grafana/data';
diff --git a/packages/grafana-ui/src/components/Logs/LogMessageAnsi.tsx b/packages/grafana-ui/src/components/Logs/LogMessageAnsi.tsx
index 918ff631cc3..a9a1fde3d52 100644
--- a/packages/grafana-ui/src/components/Logs/LogMessageAnsi.tsx
+++ b/packages/grafana-ui/src/components/Logs/LogMessageAnsi.tsx
@@ -1,6 +1,5 @@
 import ansicolor from 'ansicolor';
 import React, { PureComponent } from 'react';
-// @ts-ignore
 import Highlighter from 'react-highlight-words';
 
 import { findHighlightChunksInText, GrafanaTheme2 } from '@grafana/data';
diff --git a/packages/grafana-ui/src/components/Logs/LogRowMessage.tsx b/packages/grafana-ui/src/components/Logs/LogRowMessage.tsx
index 8f48ff45249..6b7d753f1bd 100644
--- a/packages/grafana-ui/src/components/Logs/LogRowMessage.tsx
+++ b/packages/grafana-ui/src/components/Logs/LogRowMessage.tsx
@@ -1,7 +1,6 @@
 import { css, cx } from '@emotion/css';
 import memoizeOne from 'memoize-one';
 import React, { PureComponent } from 'react';
-// @ts-ignore
 import Highlighter from 'react-highlight-words';
 import tinycolor from 'tinycolor2';
 
diff --git a/packages/grafana-ui/src/components/Typeahead/TypeaheadItem.tsx b/packages/grafana-ui/src/components/Typeahead/TypeaheadItem.tsx
index d3ac4b61f53..71db99ebf2b 100644
--- a/packages/grafana-ui/src/components/Typeahead/TypeaheadItem.tsx
+++ b/packages/grafana-ui/src/components/Typeahead/TypeaheadItem.tsx
@@ -1,6 +1,5 @@
 import { css, cx } from '@emotion/css';
 import React from 'react';
-// @ts-ignore
 import Highlighter from 'react-highlight-words';
 
 import { GrafanaTheme } from '@grafana/data';
diff --git a/public/app/features/alerting/AlertRuleItem.tsx b/public/app/features/alerting/AlertRuleItem.tsx
index a1b1f93e2bc..e396df60efe 100644
--- a/public/app/features/alerting/AlertRuleItem.tsx
+++ b/public/app/features/alerting/AlertRuleItem.tsx
@@ -1,5 +1,4 @@
 import React, { useCallback } from 'react';
-// @ts-ignore
 import Highlighter from 'react-highlight-words';
 
 import { Icon, IconName, Button, LinkButton, Card } from '@grafana/ui';
diff --git a/public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx b/public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx
index f23f470a786..cf9b0bb44fe 100644
--- a/public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx
@@ -1,6 +1,5 @@
 import { css, cx } from '@emotion/css';
 import React from 'react';
-// @ts-ignore
 import Highlighter from 'react-highlight-words';
 
 import {
diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx
index 97906d5d2bb..80f39987675 100644
--- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx
@@ -1,5 +1,4 @@
 import React, { ReactNode } from 'react';
-// @ts-ignore
 import Highlighter from 'react-highlight-words';
 
 import { selectors } from '@grafana/e2e-selectors';
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/MetricSelect.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/MetricSelect.tsx
index 8b69f2cfbcd..111fc529fe5 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/components/MetricSelect.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/components/MetricSelect.tsx
@@ -1,6 +1,5 @@
 import { css } from '@emotion/css';
 import React, { useCallback, useState } from 'react';
-// @ts-ignore
 import Highlighter from 'react-highlight-words';
 
 import { SelectableValue, toOption, GrafanaTheme2 } from '@grafana/data';
diff --git a/yarn.lock b/yarn.lock
index 8ead62a9ac7..2c589fe207f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5231,6 +5231,7 @@ __metadata:
     "@types/react-calendar": 3.5.1
     "@types/react-color": 3.0.6
     "@types/react-dom": 17.0.14
+    "@types/react-highlight-words": 0.16.4
     "@types/react-router-dom": 5.3.3
     "@types/react-table": 7.7.12
     "@types/react-test-renderer": 17.0.1