diff --git a/package-lock.json b/package-lock.json
index 4e86afa8..40f20ada 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -77,6 +77,7 @@
         "@types/react": "^16.14.52",
         "@types/react-aria-modal": "^4.0.9",
         "@types/react-autocomplete": "^1.8.9",
+        "@types/react-collapse": "^5.0.4",
         "@types/react-color": "^3.0.10",
         "@types/react-dom": "^16.9.24",
         "@types/react-file-reader-input": "^2.0.4",
@@ -4906,6 +4907,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-collapse": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@types/react-collapse/-/react-collapse-5.0.4.tgz",
+      "integrity": "sha512-tM5cVB6skGLneNYnRK2E3R56VOHguSeJQHslGPTIMC58ytL3oelT8L/l1onkwHGn5vSEs2BEq2Olzrur+YdliA==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-color": {
       "version": "3.0.10",
       "resolved": "https://registry.npmjs.org/@types/react-color/-/react-color-3.0.10.tgz",
diff --git a/package.json b/package.json
index 1d8d73ef..eea99ee4 100644
--- a/package.json
+++ b/package.json
@@ -106,6 +106,7 @@
     "@types/react": "^16.14.52",
     "@types/react-aria-modal": "^4.0.9",
     "@types/react-autocomplete": "^1.8.9",
+    "@types/react-collapse": "^5.0.4",
     "@types/react-color": "^3.0.10",
     "@types/react-dom": "^16.9.24",
     "@types/react-file-reader-input": "^2.0.4",
diff --git a/src/components/Collapse.jsx b/src/components/Collapse.tsx
similarity index 65%
rename from src/components/Collapse.jsx
rename to src/components/Collapse.tsx
index df854c34..945f143d 100644
--- a/src/components/Collapse.jsx
+++ b/src/components/Collapse.tsx
@@ -1,15 +1,15 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import { Collapse as ReactCollapse } from 'react-collapse'
-import {reducedMotionEnabled} from '../../libs/accessibility'
+import {reducedMotionEnabled} from '../libs/accessibility'
 
 
-export default class Collapse extends React.Component {
-  static propTypes = {
-    isActive: PropTypes.bool.isRequired,
-    children: PropTypes.element.isRequired
-  }
+type CollapseProps = {
+  isActive: boolean
+  children: React.ReactElement
+};
 
+
+export default class Collapse extends React.Component<CollapseProps> {
   static defaultProps = {
     isActive: true
   }
diff --git a/src/components/Collapser.jsx b/src/components/Collapser.tsx
similarity index 61%
rename from src/components/Collapser.jsx
rename to src/components/Collapser.tsx
index b2b413bb..bca8e529 100644
--- a/src/components/Collapser.jsx
+++ b/src/components/Collapser.tsx
@@ -1,13 +1,12 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import {MdArrowDropDown, MdArrowDropUp} from 'react-icons/md'
 
-export default class Collapser extends React.Component {
-  static propTypes = {
-    isCollapsed: PropTypes.bool.isRequired,
-    style: PropTypes.object,
-  }
+type CollapserProps = {
+  isCollapsed: boolean
+  style?: object
+};
 
+export default class Collapser extends React.Component<CollapserProps> {
   render() {
     const iconStyle = {
       width: 20,
diff --git a/src/components/FieldAutocomplete.jsx b/src/components/FieldAutocomplete.jsx
deleted file mode 100644
index da63105e..00000000
--- a/src/components/FieldAutocomplete.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import Block from './Block'
-import InputAutocomplete from './InputAutocomplete'
-
-
-export default class FieldAutocomplete extends React.Component {
-  static propTypes = {
-    ...InputAutocomplete.propTypes,
-  }
-
-  render() {
-    const {props} = this;
-
-    return <Block label={props.label}>
-      <InputAutocomplete {...props} />
-    </Block>
-  }
-}
-
diff --git a/src/components/FieldAutocomplete.tsx b/src/components/FieldAutocomplete.tsx
new file mode 100644
index 00000000..dd9cc81e
--- /dev/null
+++ b/src/components/FieldAutocomplete.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import Block from './Block'
+import InputAutocomplete, { InputAutocompleteProps } from './InputAutocomplete'
+
+
+type FieldAutocompleteProps = InputAutocompleteProps & {
+  label?: string;
+};
+
+
+export default class FieldAutocomplete extends React.Component<FieldAutocompleteProps> {
+  render() {
+    const {props} = this;
+
+    return <Block label={props.label}>
+      <InputAutocomplete {...props} />
+    </Block>
+  }
+}
+
diff --git a/src/components/FieldComment.jsx b/src/components/FieldComment.tsx
similarity index 72%
rename from src/components/FieldComment.jsx
rename to src/components/FieldComment.tsx
index 9c6125ec..a455d096 100644
--- a/src/components/FieldComment.jsx
+++ b/src/components/FieldComment.tsx
@@ -1,15 +1,14 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
 import Block from './Block'
 import InputString from './InputString'
 
-export default class FieldComment extends React.Component {
-  static propTypes = {
-    value: PropTypes.string,
-    onChange: PropTypes.func.isRequired,
-  }
+type FieldCommentProps = {
+  value?: string
+  onChange(...args: unknown[]): unknown
+};
 
+export default class FieldComment extends React.Component<FieldCommentProps> {
   render() {
     const fieldSpec = {
       doc: "Comments for the current layer. This is non-standard and not in the spec."
diff --git a/src/libs/accessibility.ts b/src/libs/accessibility.ts
index e2bc5b79..84091653 100644
--- a/src/libs/accessibility.ts
+++ b/src/libs/accessibility.ts
@@ -1,8 +1,8 @@
 import throttle from 'lodash.throttle'
 
-export default {
-  // Throttle for 3 seconds so when a user enables it they don't have to refresh the page.
-  reducedMotionEnabled: throttle(() => {
-    return window.matchMedia("(prefers-reduced-motion: reduce)").matches
-  }, 3000)
-}
+// Throttle for 3 seconds so when a user enables it they don't have to refresh the page.
+const reducedMotionEnabled = throttle(() => {
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches
+}, 3000)
+
+export { reducedMotionEnabled }