diff --git a/web/ui/react-app/src/contexts/PathPrefixContext.tsx b/web/ui/react-app/src/contexts/PathPrefixContext.tsx
index 38e4eec096..7877628144 100644
--- a/web/ui/react-app/src/contexts/PathPrefixContext.tsx
+++ b/web/ui/react-app/src/contexts/PathPrefixContext.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 const PathPrefixContext = React.createContext('');
 
-function usePathPrefix() {
+function usePathPrefix(): string {
   return React.useContext(PathPrefixContext);
 }
 
diff --git a/web/ui/react-app/src/contexts/ThemeContext.tsx b/web/ui/react-app/src/contexts/ThemeContext.tsx
index d8cfe12de1..9ee84cf5ec 100644
--- a/web/ui/react-app/src/contexts/ThemeContext.tsx
+++ b/web/ui/react-app/src/contexts/ThemeContext.tsx
@@ -17,6 +17,6 @@ export const ThemeContext = React.createContext<ThemeCtx>({
   setTheme: (s: themeSetting) => {},
 });
 
-export const useTheme = () => {
+export const useTheme = (): ThemeCtx => {
   return React.useContext(ThemeContext);
 };
diff --git a/web/ui/react-app/src/hooks/useMedia.ts b/web/ui/react-app/src/hooks/useMedia.ts
index 17314d2207..e0c8495ff3 100644
--- a/web/ui/react-app/src/hooks/useMedia.ts
+++ b/web/ui/react-app/src/hooks/useMedia.ts
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 
 // A hook to determine whether a CSS media query finds any matches.
-const useMedia = (query: string) => {
+const useMedia = (query: string): boolean => {
   const mediaQuery = window.matchMedia(query);
   const [matches, setMatches] = useState(mediaQuery.matches);
 
diff --git a/web/ui/react-app/src/pages/graph/ExpressionInput.tsx b/web/ui/react-app/src/pages/graph/ExpressionInput.tsx
index 6c2eac7ce8..b87346870a 100644
--- a/web/ui/react-app/src/pages/graph/ExpressionInput.tsx
+++ b/web/ui/react-app/src/pages/graph/ExpressionInput.tsx
@@ -37,34 +37,34 @@ class ExpressionInput extends Component<ExpressionInputProps, ExpressionInputSta
     };
   }
 
-  componentDidMount() {
+  componentDidMount(): void {
     this.setHeight();
   }
 
-  setHeight = () => {
+  setHeight = (): void => {
     const { offsetHeight, clientHeight, scrollHeight } = this.exprInputRef.current!;
     const offset = offsetHeight - clientHeight; // Needed in order for the height to be more accurate.
     this.setState({ height: scrollHeight + offset });
   };
 
-  handleInput = () => {
+  handleInput = (): void => {
     this.setValue(this.exprInputRef.current!.value);
   };
 
-  setValue = (value: string) => {
+  setValue = (value: string): void => {
     const { onExpressionChange } = this.props;
     onExpressionChange(value);
     this.setState({ height: 'auto' }, this.setHeight);
   };
 
-  componentDidUpdate(prevProps: ExpressionInputProps) {
+  componentDidUpdate(prevProps: ExpressionInputProps): void {
     const { value } = this.props;
     if (value !== prevProps.value) {
       this.setValue(value);
     }
   }
 
-  handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
+  handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>): void => {
     const { executeQuery } = this.props;
     if (event.key === 'Enter' && !event.shiftKey) {
       executeQuery();
@@ -72,7 +72,7 @@ class ExpressionInput extends Component<ExpressionInputProps, ExpressionInputSta
     }
   };
 
-  getSearchMatches = (input: string, expressions: string[]) => {
+  getSearchMatches = (input: string, expressions: string[]): FuzzyResult[] => {
     return fuz.filter(input.replace(/ /g, ''), expressions);
   };
 
@@ -84,9 +84,9 @@ class ExpressionInput extends Component<ExpressionInputProps, ExpressionInputSta
     };
     let index = 0;
     const sections =
-      inputValue!.length && this.props.enableAutocomplete
+      inputValue?.length && this.props.enableAutocomplete
         ? Object.entries(autocompleteSections).reduce((acc, [title, items]) => {
-            const matches = this.getSearchMatches(inputValue!, items);
+            const matches = this.getSearchMatches(inputValue, items);
             return !matches.length
               ? acc
               : [
@@ -131,19 +131,19 @@ class ExpressionInput extends Component<ExpressionInputProps, ExpressionInputSta
     );
   };
 
-  openMetricsExplorer = () => {
+  openMetricsExplorer = (): void => {
     this.setState({
       showMetricsExplorer: true,
     });
   };
 
-  updateShowMetricsExplorer = (show: boolean) => {
+  updateShowMetricsExplorer = (show: boolean): void => {
     this.setState({
       showMetricsExplorer: show,
     });
   };
 
-  insertAtCursor = (value: string) => {
+  insertAtCursor = (value: string): void => {
     if (!this.exprInputRef.current) return;
 
     const startPosition = this.exprInputRef.current.selectionStart;
diff --git a/web/ui/react-app/src/pages/graph/Graph.tsx b/web/ui/react-app/src/pages/graph/Graph.tsx
index f2aba0088b..d347054518 100644
--- a/web/ui/react-app/src/pages/graph/Graph.tsx
+++ b/web/ui/react-app/src/pages/graph/Graph.tsx
@@ -102,7 +102,7 @@ class Graph extends PureComponent<GraphProps, GraphState> {
     }
   }
 
-  componentDidMount() {
+  componentDidMount(): void {
     this.plot();
 
     $(`.graph-${this.props.id}`).bind('plotclick', (event, pos, item) => {
@@ -130,7 +130,7 @@ class Graph extends PureComponent<GraphProps, GraphState> {
     });
   }
 
-  componentWillUnmount() {
+  componentWillUnmount(): void {
     this.destroyPlot();
   }
 
@@ -143,7 +143,7 @@ class Graph extends PureComponent<GraphProps, GraphState> {
     this.$chart = $.plot($(this.chartRef.current), data, getOptions(this.props.stacked, this.props.useLocalTime));
   };
 
-  destroyPlot = () => {
+  destroyPlot = (): void => {
     if (isPresent(this.$chart)) {
       this.$chart.destroy();
     }
@@ -151,14 +151,14 @@ class Graph extends PureComponent<GraphProps, GraphState> {
 
   plotSetAndDraw(
     data: (GraphSeries | GraphExemplar)[] = [...this.state.chartData.series, ...this.state.chartData.exemplars]
-  ) {
+  ): void {
     if (isPresent(this.$chart)) {
       this.$chart.setData(data);
       this.$chart.draw();
     }
   }
 
-  handleSeriesSelect = (selected: number[], selectedIndex: number) => {
+  handleSeriesSelect = (selected: number[], selectedIndex: number): void => {
     const { chartData } = this.state;
     this.plot(
       this.selectedSeriesIndexes.length === 1 && this.selectedSeriesIndexes.includes(selectedIndex)
@@ -181,7 +181,7 @@ class Graph extends PureComponent<GraphProps, GraphState> {
     this.selectedSeriesIndexes = selected;
   };
 
-  handleSeriesHover = (index: number) => () => {
+  handleSeriesHover = (index: number) => (): void => {
     if (this.rafID) {
       cancelAnimationFrame(this.rafID);
     }
@@ -193,12 +193,12 @@ class Graph extends PureComponent<GraphProps, GraphState> {
     });
   };
 
-  handleLegendMouseOut = () => {
+  handleLegendMouseOut = (): void => {
     cancelAnimationFrame(this.rafID);
     this.plotSetAndDraw();
   };
 
-  handleResize = () => {
+  handleResize = (): void => {
     if (isPresent(this.$chart)) {
       this.plot(this.$chart.getData() as (GraphSeries | GraphExemplar)[]);
     }
diff --git a/web/ui/react-app/src/pages/graph/Panel.tsx b/web/ui/react-app/src/pages/graph/Panel.tsx
index 02ef0a9a42..d7e49170b5 100644
--- a/web/ui/react-app/src/pages/graph/Panel.tsx
+++ b/web/ui/react-app/src/pages/graph/Panel.tsx
@@ -84,7 +84,7 @@ class Panel extends Component<PanelProps, PanelState> {
     };
   }
 
-  componentDidUpdate({ options: prevOpts }: PanelProps) {
+  componentDidUpdate({ options: prevOpts }: PanelProps): void {
     const { endTime, range, resolution, showExemplars, type } = this.props.options;
     if (
       prevOpts.endTime !== endTime ||
@@ -97,7 +97,7 @@ class Panel extends Component<PanelProps, PanelState> {
     }
   }
 
-  componentDidMount() {
+  componentDidMount(): void {
     this.executeQuery();
   }
 
@@ -230,15 +230,15 @@ class Panel extends Component<PanelProps, PanelState> {
     return this.props.options.endTime;
   };
 
-  handleChangeEndTime = (endTime: number | null) => {
+  handleChangeEndTime = (endTime: number | null): void => {
     this.setOptions({ endTime: endTime });
   };
 
-  handleChangeResolution = (resolution: number | null) => {
+  handleChangeResolution = (resolution: number | null): void => {
     this.setOptions({ resolution: resolution });
   };
 
-  handleChangeType = (type: PanelType) => {
+  handleChangeType = (type: PanelType): void => {
     if (this.props.options.type === type) {
       return;
     }
@@ -247,15 +247,15 @@ class Panel extends Component<PanelProps, PanelState> {
     this.setOptions({ type: type });
   };
 
-  handleChangeStacking = (stacked: boolean) => {
+  handleChangeStacking = (stacked: boolean): void => {
     this.setOptions({ stacked: stacked });
   };
 
-  handleChangeShowExemplars = (show: boolean) => {
+  handleChangeShowExemplars = (show: boolean): void => {
     this.setOptions({ showExemplars: show });
   };
 
-  handleTimeRangeSelection = (startTime: number, endTime: number) => {
+  handleTimeRangeSelection = (startTime: number, endTime: number): void => {
     this.setOptions({ range: endTime - startTime, endTime: endTime });
   };
 
diff --git a/web/ui/react-app/src/pages/graph/TimeInput.tsx b/web/ui/react-app/src/pages/graph/TimeInput.tsx
index 21db711829..c1404e81b2 100644
--- a/web/ui/react-app/src/pages/graph/TimeInput.tsx
+++ b/web/ui/react-app/src/pages/graph/TimeInput.tsx
@@ -39,7 +39,7 @@ class TimeInput extends Component<TimeInputProps> {
     return this.props.time || moment().valueOf();
   };
 
-  calcShiftRange = () => this.props.range / 2;
+  calcShiftRange = (): number => this.props.range / 2;
 
   increaseTime = (): void => {
     const time = this.getBaseTime() + this.calcShiftRange();
@@ -59,7 +59,7 @@ class TimeInput extends Component<TimeInputProps> {
     return this.props.useLocalTime ? moment.tz.guess() : 'UTC';
   };
 
-  componentDidMount() {
+  componentDidMount(): void {
     this.$time = $(this.timeInputRef.current!);
 
     this.$time.datetimepicker({
@@ -87,11 +87,11 @@ class TimeInput extends Component<TimeInputProps> {
     });
   }
 
-  componentWillUnmount() {
+  componentWillUnmount(): void {
     this.$time.datetimepicker('destroy');
   }
 
-  componentDidUpdate(prevProps: TimeInputProps) {
+  componentDidUpdate(prevProps: TimeInputProps): void {
     const { time, useLocalTime } = this.props;
     if (prevProps.time !== time) {
       this.$time.datetimepicker('date', time ? moment(time) : null);
diff --git a/web/ui/react-app/src/pages/serviceDiscovery/Services.tsx b/web/ui/react-app/src/pages/serviceDiscovery/Services.tsx
index a6d35852a6..5fc2a12f08 100644
--- a/web/ui/react-app/src/pages/serviceDiscovery/Services.tsx
+++ b/web/ui/react-app/src/pages/serviceDiscovery/Services.tsx
@@ -48,7 +48,7 @@ export const processSummary = (activeTargets: Target[], droppedTargets: DroppedT
   return targets;
 };
 
-export const processTargets = (activeTargets: Target[], droppedTargets: DroppedTarget[]) => {
+export const processTargets = (activeTargets: Target[], droppedTargets: DroppedTarget[]): Record<string, TargetLabels[]> => {
   const labels: Record<string, TargetLabels[]> = {};
 
   for (const target of activeTargets) {
diff --git a/web/ui/react-app/src/utils/index.ts b/web/ui/react-app/src/utils/index.ts
index 076f3df6ee..c15ff25d13 100644
--- a/web/ui/react-app/src/utils/index.ts
+++ b/web/ui/react-app/src/utils/index.ts
@@ -3,11 +3,11 @@ import moment from 'moment-timezone';
 import { PanelOptions, PanelType, PanelDefaultOptions } from '../pages/graph/Panel';
 import { PanelMeta } from '../pages/graph/PanelList';
 
-export const generateID = () => {
+export const generateID = (): string => {
   return `_${Math.random().toString(36).substr(2, 9)}`;
 };
 
-export const byEmptyString = (p: string) => p.length > 0;
+export const byEmptyString = (p: string): boolean => p.length > 0;
 
 export const isPresent = <T>(obj: T): obj is NonNullable<T> => obj !== null && obj !== undefined;
 
@@ -26,7 +26,7 @@ export const escapeHTML = (str: string): string => {
   });
 };
 
-export const metricToSeriesName = (labels: { [key: string]: string }) => {
+export const metricToSeriesName = (labels: { [key: string]: string }): string => {
   if (labels === null) {
     return 'scalar';
   }
@@ -237,11 +237,11 @@ export const toQueryString = ({ key, options }: PanelMeta) => {
   return urlParams.filter(byEmptyString).join('&');
 };
 
-export const encodePanelOptionsToQueryString = (panels: PanelMeta[]) => {
+export const encodePanelOptionsToQueryString = (panels: PanelMeta[]): string => {
   return `?${panels.map(toQueryString).join('&')}`;
 };
 
-export const createExpressionLink = (expr: string) => {
+export const createExpressionLink = (expr: string): string => {
   return `../graph?g0.expr=${encodeURIComponent(expr)}&g0.tab=1&g0.stacked=0&g0.show_exemplars=0.g0.range_input=1h.`;
 };
 export const mapObjEntries = <T, key extends keyof T, Z>(
@@ -256,7 +256,7 @@ export const callAll =
     fns.filter(Boolean).forEach((fn) => fn.apply(null, args));
   };
 
-export const parsePrometheusFloat = (value: string) => {
+export const parsePrometheusFloat = (value: string): number | string => {
   if (isNaN(Number(value))) {
     return value;
   } else {