diff --git a/src/components/side-panel/map-style-panel/map-layer-selector.js b/src/components/side-panel/map-style-panel/map-layer-selector.tsx
similarity index 87%
rename from src/components/side-panel/map-style-panel/map-layer-selector.js
rename to src/components/side-panel/map-style-panel/map-layer-selector.tsx
index e8133ebbe4..369d5e0d01 100644
--- a/src/components/side-panel/map-style-panel/map-layer-selector.js
+++ b/src/components/side-panel/map-style-panel/map-layer-selector.tsx
@@ -32,6 +32,7 @@ import {
 } from 'components/common/styled-components';
 import {FormattedMessage} from 'localization';
 import {camelize} from 'utils/utils';
+import {VisibleLayerGroups} from 'reducers';
 
 const StyledInteractionPanel = styled.div`
   padding-bottom: 12px;
@@ -51,13 +52,31 @@ const StyledLayerGroupItem = styled.div`
   }
 `;
 
-const LayerLabel = styled(PanelLabelBold)`
+interface LayerLabelProps {
+  active: boolean;
+}
+
+const LayerLabel = styled<LayerLabelProps>(PanelLabelBold)`
   color: ${props => (props.active ? props.theme.textColor : props.theme.labelColor)};
 `;
 
+type LayerGroupSelectorProps = {
+  layers: VisibleLayerGroups;
+  editableLayers: string[];
+  onChange: (payload: {
+    visibleLayerGroups?: VisibleLayerGroups;
+    topLayerGroups?: VisibleLayerGroups;
+  }) => void;
+  topLayers: VisibleLayerGroups;
+  actionIcons: {
+    visible?: typeof EyeSeen;
+    hidden?: typeof EyeUnseen;
+  };
+};
+
 LayerGroupSelectorFactory.deps = [PanelHeaderActionFactory];
 
-function LayerGroupSelectorFactory(PanelHeaderAction) {
+function LayerGroupSelectorFactory(PanelHeaderAction: ReturnType<typeof PanelHeaderActionFactory>) {
   const defaultActionIcons = {
     visible: EyeSeen,
     hidden: EyeUnseen
@@ -68,7 +87,7 @@ function LayerGroupSelectorFactory(PanelHeaderAction) {
     onChange,
     topLayers,
     actionIcons = defaultActionIcons
-  }) => (
+  }: LayerGroupSelectorProps) => (
     <StyledInteractionPanel className="map-style__layer-group__selector">
       <div className="layer-group__header">
         <PanelLabel>
diff --git a/src/components/side-panel/map-style-panel/map-style-selector.js b/src/components/side-panel/map-style-panel/map-style-selector.tsx
similarity index 90%
rename from src/components/side-panel/map-style-panel/map-style-selector.js
rename to src/components/side-panel/map-style-panel/map-style-selector.tsx
index d23e2dddce..53d3782413 100644
--- a/src/components/side-panel/map-style-panel/map-style-selector.js
+++ b/src/components/side-panel/map-style-panel/map-style-selector.tsx
@@ -31,6 +31,7 @@ import {
   StyledPanelHeader
 } from 'components/common/styled-components';
 import {FormattedMessage} from 'localization';
+import {MapStyle} from 'reducers';
 
 const StyledMapDropdown = styled(StyledPanelHeader)`
   height: 48px;
@@ -60,9 +61,20 @@ const StyledMapDropdown = styled(StyledPanelHeader)`
     width: 40px;
   }
 `;
+
+type MapStyleSelectorProps = {
+  mapStyle: MapStyle;
+  onChange: (payload: string) => void;
+  toggleActive: () => void;
+  isSelecting: boolean;
+  actionIcons: {
+    arrowDown?: typeof ArrowDown;
+  };
+};
+
 MapStyleSelectorFactory.deps = [PanelHeaderActionFactory];
 
-function MapStyleSelectorFactory(PanelHeaderAction) {
+function MapStyleSelectorFactory(PanelHeaderAction: ReturnType<typeof PanelHeaderActionFactory>) {
   const defaultActionIcons = {
     arrowDown: ArrowDown
   };
@@ -72,7 +84,7 @@ function MapStyleSelectorFactory(PanelHeaderAction) {
     toggleActive,
     isSelecting,
     actionIcons = defaultActionIcons
-  }) => (
+  }: MapStyleSelectorProps) => (
     <div>
       <PanelLabel>
         <FormattedMessage id={'mapManager.mapStyle'} />
diff --git a/src/components/side-panel/panel-header-action.js b/src/components/side-panel/panel-header-action.tsx
similarity index 80%
rename from src/components/side-panel/panel-header-action.js
rename to src/components/side-panel/panel-header-action.tsx
index 007c5c5259..cc4ecffdb8 100644
--- a/src/components/side-panel/panel-header-action.js
+++ b/src/components/side-panel/panel-header-action.tsx
@@ -18,14 +18,20 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
+import React, {Component, ComponentType} from 'react';
 import classnames from 'classnames';
 import styled from 'styled-components';
 import {FormattedMessage} from 'localization';
 import {Tooltip} from 'components/common/styled-components';
 
-const HeaderActionWrapper = styled.div`
+interface HeaderActionWrapperProps {
+  flush?: boolean;
+  active?: boolean;
+  hoverColor?: boolean;
+}
+
+
+const HeaderActionWrapper = styled.div<HeaderActionWrapperProps>`
   margin-left: ${props => (props.flush ? 0 : 8)}px;
   display: flex;
   align-items: center;
@@ -44,22 +50,23 @@ const HeaderActionWrapper = styled.div`
   }
 `;
 
+interface PanelHeaderActionProps {
+  id?: string;
+  flush?: boolean;
+  tooltip?: string;
+  onClick?: Function;
+  active?: boolean;
+  disabled?: boolean;
+  hoverColor?: string | null;
+  className?: string;
+  tooltipType?: string;
+  IconComponent: any;
+}
+
 PanelHeaderActionFactory.deps = [];
 // Need to use react class to access props.component
-export default function PanelHeaderActionFactory() {
-  class PanelHeaderAction extends Component {
-    static propTypes = {
-      id: PropTypes.string,
-      flush: PropTypes.bool,
-      tooltip: PropTypes.string,
-      onClick: PropTypes.func,
-      active: PropTypes.bool,
-      disabled: PropTypes.bool,
-      hoverColor: PropTypes.string,
-      className: PropTypes.string,
-      tooltipType: PropTypes.string
-    };
-
+export default function PanelHeaderActionFactory(): ComponentType<PanelHeaderActionProps> {
+  class PanelHeaderAction extends Component<PanelHeaderActionProps> {
     static defaultProps = {
       onClick: () => {},
       hoverColor: null,
@@ -80,7 +87,7 @@ export default function PanelHeaderActionFactory() {
       } = this.props;
       return (
         <HeaderActionWrapper
-          className={classnames('panel--header__action', {disabled, [className]: className})}
+          className={classnames('panel--header__action', {disabled, [className!]: className})}
           active={active}
           hoverColor={hoverColor}
           flush={flush}