diff --git a/src/components/views/elements/Spoiler.js b/src/components/views/elements/Spoiler.tsx
similarity index 82%
rename from src/components/views/elements/Spoiler.js
rename to src/components/views/elements/Spoiler.tsx
index 802c6cf841..4779a7d90e 100644
--- a/src/components/views/elements/Spoiler.js
+++ b/src/components/views/elements/Spoiler.tsx
@@ -17,25 +17,34 @@
 import React from 'react';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
+interface IProps {
+    reason?: string;
+    contentHtml: string;
+}
+
+interface IState {
+    visible: boolean;
+}
+
 @replaceableComponent("views.elements.Spoiler")
-export default class Spoiler extends React.Component {
-    constructor(props) {
+export default class Spoiler extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
         super(props);
         this.state = {
             visible: false,
         };
     }
 
-    toggleVisible(e) {
+    private toggleVisible = (e: React.MouseEvent): void => {
         if (!this.state.visible) {
             // we are un-blurring, we don't want this click to propagate to potential child pills
             e.preventDefault();
             e.stopPropagation();
         }
         this.setState({ visible: !this.state.visible });
-    }
+    };
 
-    render() {
+    public render(): JSX.Element {
         const reason = this.props.reason ? (
             <span className="mx_EventTile_spoiler_reason">{ "(" + this.props.reason + ")" }</span>
         ) : null;
@@ -43,7 +52,7 @@ export default class Spoiler extends React.Component {
         // as such, we pass the this.props.contentHtml instead and then set the raw
         // HTML content. This is secure as the contents have already been parsed previously
         return (
-            <span className={"mx_EventTile_spoiler" + (this.state.visible ? " visible" : "")} onClick={this.toggleVisible.bind(this)}>
+            <span className={"mx_EventTile_spoiler" + (this.state.visible ? " visible" : "")} onClick={this.toggleVisible}>
                 { reason }
                 &nbsp;
                 <span className="mx_EventTile_spoiler_content" dangerouslySetInnerHTML={{ __html: this.props.contentHtml }} />