diff --git a/src/ui/components/VirtualList.js b/src/ui/components/VirtualList.tsx
similarity index 76%
rename from src/ui/components/VirtualList.js
rename to src/ui/components/VirtualList.tsx
index 8e8a2eb74..6dd97f12e 100644
--- a/src/ui/components/VirtualList.js
+++ b/src/ui/components/VirtualList.tsx
@@ -5,21 +5,25 @@
  * @format
  */
 
-import FlexColumn from './FlexColumn.js';
+import FlexColumn from './FlexColumn';
 import {Component} from 'react';
-import View from './View.tsx';
-import styled from '../styled/index.js';
+import View from './View';
+import styled from 'react-emotion';
+import React from 'react';
+import {HeightProperty, TopProperty} from 'csstype';
 
-const Inner = styled(FlexColumn)(({height}) => ({
-  alignItems: 'flex-start',
-  height,
-  minHeight: '100%',
-  minWidth: '100%',
-  overflow: 'visible',
-  width: '100%',
-}));
+const Inner = styled(FlexColumn)(
+  ({height}: {height: HeightProperty<number>}) => ({
+    alignItems: 'flex-start',
+    height,
+    minHeight: '100%',
+    minWidth: '100%',
+    overflow: 'visible',
+    width: '100%',
+  }),
+);
 
-const Content = styled(FlexColumn)(({top}) => ({
+const Content = styled(FlexColumn)(({top}: {top: TopProperty<number>}) => ({
   alignItems: 'flex-start',
   height: '100%',
   marginTop: top,
@@ -27,23 +31,23 @@ const Content = styled(FlexColumn)(({top}) => ({
   overflow: 'visible',
 }));
 
-type VirtualListProps = {|
-  data: Array<any>,
-  renderRow: (data: any, i: number) => any,
-  rowHeight: number,
-  overscanCount: number,
-  sync?: number,
-  wrapInner?: (data: any) => any,
-|};
+type VirtualListProps = {
+  data: Array<any>;
+  renderRow: (data: any, i: number) => any;
+  rowHeight: number;
+  overscanCount: number;
+  sync?: boolean;
+  wrapInner?: (data: any) => any;
+};
 
-type VirtualListState = {|
-  offset: number,
-  height: number,
-|};
+type VirtualListState = {
+  offset: number;
+  height: number;
+};
 
 export default class VirtualList extends Component<
   VirtualListProps,
-  VirtualListState,
+  VirtualListState
 > {
   constructor(props: VirtualListProps, context: Object) {
     super(props, context);
diff --git a/src/ui/index.js b/src/ui/index.js
index b47d1f101..0db390d31 100644
--- a/src/ui/index.js
+++ b/src/ui/index.js
@@ -88,7 +88,7 @@ export {default as ErrorBoundary} from './components/ErrorBoundary.js';
 export type {OrderableOrder} from './components/Orderable.tsx';
 export {default as Interactive} from './components/Interactive.js';
 export {default as Orderable} from './components/Orderable.tsx';
-export {default as VirtualList} from './components/VirtualList.js';
+export {default as VirtualList} from './components/VirtualList.tsx';
 
 // base components
 export {Component, PureComponent} from 'react';