diff --git a/src/components/views/elements/LabelledToggleSwitch.js b/src/components/views/elements/LabelledToggleSwitch.tsx
similarity index 63%
rename from src/components/views/elements/LabelledToggleSwitch.js
rename to src/components/views/elements/LabelledToggleSwitch.tsx
index ef60eeed7b..957e3dbc97 100644
--- a/src/components/views/elements/LabelledToggleSwitch.js
+++ b/src/components/views/elements/LabelledToggleSwitch.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
+Copyright 2019, 2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,38 +14,33 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
-import PropTypes from "prop-types";
+import React from "react";
+
 import ToggleSwitch from "./ToggleSwitch";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+interface IProps {
+    // The value for the toggle switch
+    value: boolean;
+    // The translated label for the switch
+    label: string;
+    // Whether or not to disable the toggle switch
+    disabled?: boolean;
+    // True to put the toggle in front of the label
+    // Default false.
+    toggleInFront?: boolean;
+    // Additional class names to append to the switch. Optional.
+    className?: string;
+    // The function to call when the value changes
+    onChange(checked: boolean): void;
+}
+
 @replaceableComponent("views.elements.LabelledToggleSwitch")
-export default class LabelledToggleSwitch extends React.Component {
-    static propTypes = {
-        // The value for the toggle switch
-        value: PropTypes.bool.isRequired,
-
-        // The function to call when the value changes
-        onChange: PropTypes.func.isRequired,
-
-        // The translated label for the switch
-        label: PropTypes.string.isRequired,
-
-        // Whether or not to disable the toggle switch
-        disabled: PropTypes.bool,
-
-        // True to put the toggle in front of the label
-        // Default false.
-        toggleInFront: PropTypes.bool,
-
-        // Additional class names to append to the switch. Optional.
-        className: PropTypes.string,
-    };
-
+export default class LabelledToggleSwitch extends React.PureComponent<IProps> {
     render() {
         // This is a minimal version of a SettingsFlag
 
-        let firstPart = <span className="mx_SettingsFlag_label">{this.props.label}</span>;
+        let firstPart = <span className="mx_SettingsFlag_label">{ this.props.label }</span>;
         let secondPart = <ToggleSwitch
             checked={this.props.value}
             disabled={this.props.disabled}
diff --git a/src/components/views/room_settings/RoomPublishSetting.js b/src/components/views/room_settings/RoomPublishSetting.tsx
similarity index 62%
rename from src/components/views/room_settings/RoomPublishSetting.js
rename to src/components/views/room_settings/RoomPublishSetting.tsx
index 6cc3ce26ba..24df5f1c84 100644
--- a/src/components/views/room_settings/RoomPublishSetting.js
+++ b/src/components/views/room_settings/RoomPublishSetting.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2020, 2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,20 +14,30 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React from "react";
+
 import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
-import {_t} from "../../../languageHandler";
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
-import {replaceableComponent} from "../../../utils/replaceableComponent";
+import { _t } from "../../../languageHandler";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+
+interface IProps {
+    roomId: string;
+    label?: string;
+    canSetCanonicalAlias?: boolean;
+}
+
+interface IState {
+    isRoomPublished: boolean;
+}
 
 @replaceableComponent("views.room_settings.RoomPublishSetting")
-export default class RoomPublishSetting extends React.PureComponent {
-    constructor(props) {
-        super(props);
-        this.state = {isRoomPublished: false};
-    }
+export default class RoomPublishSetting extends React.PureComponent<IProps, IState> {
+    public state = {
+        isRoomPublished: false,
+    };
 
-    onRoomPublishChange = (e) => {
+    private onRoomPublishChange = (e) => {
         const valueBefore = this.state.isRoomPublished;
         const newValue = !valueBefore;
         this.setState({isRoomPublished: newValue});
@@ -52,11 +62,14 @@ export default class RoomPublishSetting extends React.PureComponent {
     render() {
         const client = MatrixClientPeg.get();
 
-        return (<LabelledToggleSwitch value={this.state.isRoomPublished}
-            onChange={this.onRoomPublishChange}
-            disabled={!this.props.canSetCanonicalAlias}
-            label={_t("Publish this room to the public in %(domain)s's room directory?", {
-              domain: client.getDomain(),
-            })} />);
+        return (
+            <LabelledToggleSwitch value={this.state.isRoomPublished}
+                onChange={this.onRoomPublishChange}
+                disabled={!this.props.canSetCanonicalAlias}
+                label={_t("Publish this room to the public in %(domain)s's room directory?", {
+                  domain: client.getDomain(),
+                })}
+            />
+        );
     }
 }