diff --git a/src/App.js b/src/App.tsx
similarity index 82%
rename from src/App.js
rename to src/App.tsx
index 2cdc875cbf..45818f841e 100755
--- a/src/App.js
+++ b/src/App.tsx
@@ -1,6 +1,9 @@
-import React, { Component } from 'react';
+import React, { Component, ReactNode } from 'react';
+
 import { Container } from 'reactstrap';
+
 import PanelList from './PanelList';
+
 import './App.css';
 
 class App extends Component {
diff --git a/src/DataTable.tsx b/src/DataTable.tsx
index beeb01c3dc..21bd171b43 100644
--- a/src/DataTable.tsx
+++ b/src/DataTable.tsx
@@ -47,7 +47,7 @@ class DataTable extends PureComponent<QueryResult> {
     return series;
   }
 
-  render(): ReactNode {
+  render() {
     const data = this.props.data;
 
     if (data === null) {
diff --git a/src/ExpressionInput.js b/src/ExpressionInput.js
index 85829a9c0f..02602f3be2 100644
--- a/src/ExpressionInput.js
+++ b/src/ExpressionInput.js
@@ -47,7 +47,7 @@ class ExpressionInput extends Component {
       return null;
     }
 
-    let matches = fuzzy.filter(downshift.inputValue.replace(/ /g, ''), this.props.metrics, {
+    let matches = fuzzy.filter(downshift.inputValue.replace(/ /g, ''), this.props.metricNames, {
       pre: "<strong>",
       post: "</strong>",
     });
diff --git a/src/Panel.js b/src/Panel.js
index 7a1ff45ccf..8337ef1063 100644
--- a/src/Panel.js
+++ b/src/Panel.js
@@ -211,7 +211,7 @@ class Panel extends Component {
               onChange={this.handleExpressionChange}
               executeQuery={this.executeQuery}
               loading={this.state.loading}
-              metrics={this.props.metrics}
+              metricNames={this.props.metricNames}
             />
           </Col>
         </Row>
diff --git a/src/PanelList.js b/src/PanelList.tsx
similarity index 79%
rename from src/PanelList.js
rename to src/PanelList.tsx
index 07bb182531..d64e41f995 100644
--- a/src/PanelList.js
+++ b/src/PanelList.tsx
@@ -4,19 +4,29 @@ import { Alert, Button, Col, Row } from 'reactstrap';
 
 import Panel from './Panel';
 
-class PanelList extends Component {
-  constructor(props) {
+interface PanelListState {
+  panels: {
+    key: string,
+  }[],
+  metricNames: string[],
+  fetchMetricsError: string | null,
+  timeDriftError: string | null,
+}
+
+class PanelList extends Component<any, PanelListState> {
+  key: number;
+
+  constructor(props: []) {
     super(props);
+
     this.state = {
       panels: [],
-      metrics: [],
+      metricNames: [],
       fetchMetricsError: null,
       timeDriftError: null,
     };
-    this.key = 0;
 
-    this.addPanel = this.addPanel.bind(this);
-    this.removePanel = this.removePanel.bind(this);
+    this.key = 0;
   }
 
   componentDidMount() {
@@ -30,8 +40,8 @@ class PanelList extends Component {
         throw new Error('Unexpected response status when fetching metric names: ' + resp.statusText); // TODO extract error
       }
     })
-    .then(json => this.setState({ metrics: json.data }))
-    .catch(error => this.setState({fetchMetricsError: error.message}));
+    .then(json => this.setState({ metricNames: json.data }))
+    .catch(error => this.setState({ fetchMetricsError: error.message }));
 
     const browserTime = new Date().getTime() / 1000;
     fetch("http://demo.robustperception.io:9090/api/v1/query?query=time()", {cache: "no-store"})
@@ -50,21 +60,21 @@ class PanelList extends Component {
         throw new Error('Detected ' + delta + ' seconds time difference between your browser and the server. Prometheus relies on accurate time and time drift might cause unexpected query results.');
       }
     })
-    .catch(error => this.setState({timeDriftError: error.message}));
+    .catch(error => this.setState({ timeDriftError: error.message }));
   }
 
-  getKey() {
+  getKey(): string {
     return (this.key++).toString();
   }
 
-  addPanel() {
+  addPanel = (): void => {
     const panels = this.state.panels.slice();
     const key = this.getKey();
     panels.push({key: key});
     this.setState({panels: panels});
   }
 
-  removePanel(key) {
+  removePanel = (key: string): void => {
     const panels = this.state.panels.filter(panel => {
       return panel.key !== key;
     });
@@ -85,7 +95,7 @@ class PanelList extends Component {
           </Col>
         </Row>
         {this.state.panels.map(p =>
-          <Panel key={p.key} removePanel={() => this.removePanel(p.key)} metrics={this.state.metrics}/>
+          <Panel key={p.key} removePanel={() => this.removePanel(p.key)} metricNames={this.state.metricNames}/>
         )}
         <Button color="primary" className="add-panel-btn" onClick={this.addPanel}>Add Panel</Button>
       </>
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
new file mode 100644
index 0000000000..6431bc5fc6
--- /dev/null
+++ b/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />