diff --git a/components/widgets/settings/bool_setting.test.jsx b/components/widgets/settings/bool_setting.test.tsx
similarity index 97%
rename from components/widgets/settings/bool_setting.test.jsx
rename to components/widgets/settings/bool_setting.test.tsx
index 00c8ec565ab9..3c7c95f0c590 100644
--- a/components/widgets/settings/bool_setting.test.jsx
+++ b/components/widgets/settings/bool_setting.test.tsx
@@ -3,7 +3,7 @@
 import React from 'react';
 import {shallow} from 'enzyme';
 
-import BoolSetting from './bool_setting.jsx';
+import BoolSetting from './bool_setting';
 
 describe('components/widgets/settings/BoolSetting', () => {
     test('render component with required props', () => {
diff --git a/components/widgets/settings/bool_setting.jsx b/components/widgets/settings/bool_setting.tsx
similarity index 64%
rename from components/widgets/settings/bool_setting.jsx
rename to components/widgets/settings/bool_setting.tsx
index 8310dd7a803c..461ac3dce4b1 100644
--- a/components/widgets/settings/bool_setting.jsx
+++ b/components/widgets/settings/bool_setting.tsx
@@ -1,33 +1,32 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import PropTypes from 'prop-types';
 import React from 'react';
 
-import Setting from './setting.jsx';
+import Setting from './setting';
 
-export default class BoolSetting extends React.Component {
-    static propTypes = {
-        id: PropTypes.string.isRequired,
-        label: PropTypes.node.isRequired,
-        labelClassName: PropTypes.string,
-        helpText: PropTypes.node,
-        placeholder: PropTypes.string.isRequired,
-        value: PropTypes.bool.isRequired,
-        inputClassName: PropTypes.string,
-        onChange: PropTypes.func,
-    };
+type Props = {
+    id: string;
+    label: React.ReactNode;
+    labelClassName: string;
+    helpText?: React.ReactNode;
+    placeholder: string;
+    value: boolean;
+    inputClassName: string;
+    onChange(name: string, value: any): void; // value is any since onChange is a common func for inputs and checkboxes
+}
 
-    static defaultProps = {
+export default class BoolSetting extends React.Component<Props> {
+    public static defaultProps: Partial<Props> = {
         labelClassName: '',
         inputClassName: '',
     };
 
-    handleChange = (e) => {
+    private handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
         this.props.onChange(this.props.id, e.target.checked);
     }
 
-    render() {
+    public render(): JSX.Element {
         return (
             <Setting
                 label={this.props.label}
diff --git a/components/widgets/settings/radio_setting.test.jsx b/components/widgets/settings/radio_setting.test.tsx
similarity index 98%
rename from components/widgets/settings/radio_setting.test.jsx
rename to components/widgets/settings/radio_setting.test.tsx
index b9b6f909e466..222ce96f75d7 100644
--- a/components/widgets/settings/radio_setting.test.jsx
+++ b/components/widgets/settings/radio_setting.test.tsx
@@ -3,7 +3,7 @@
 import React from 'react';
 import {shallow} from 'enzyme';
 
-import RadioSetting from './radio_setting.jsx';
+import RadioSetting from './radio_setting';
 
 describe('components/widgets/settings/RadioSetting', () => {
     test('render component with required props', () => {
diff --git a/components/widgets/settings/radio_setting.jsx b/components/widgets/settings/radio_setting.tsx
similarity index 70%
rename from components/widgets/settings/radio_setting.jsx
rename to components/widgets/settings/radio_setting.tsx
index 55fe756e25f8..19a145e7db9e 100644
--- a/components/widgets/settings/radio_setting.jsx
+++ b/components/widgets/settings/radio_setting.tsx
@@ -1,37 +1,34 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import PropTypes from 'prop-types';
 import React from 'react';
 
-import Setting from './setting.jsx';
+import Setting from './setting';
 
-export default class RadioSetting extends React.Component {
-    static propTypes = {
-        id: PropTypes.string.isRequired,
-        options: PropTypes.arrayOf(PropTypes.shape({
-            text: PropTypes.string,
-            value: PropTypes.string,
-        })),
-        label: PropTypes.node.isRequired,
-        onChange: PropTypes.func.isRequired,
-        value: PropTypes.string,
-        labelClassName: PropTypes.string,
-        inputClassName: PropTypes.string,
-        helpText: PropTypes.node,
-    };
+type Props = {
+    id: string;
+    options: {text: string;value: string}[];
+    label: React.ReactNode;
+    onChange(name: string, value: any): void;
+    value?: string;
+    labelClassName?: string;
+    inputClassName?: string;
+    helpText?: React.ReactNode;
+
+}
 
-    static defaultProps = {
+export default class RadioSetting extends React.Component<Props> {
+    public static defaultProps: Partial<Props> = {
         labelClassName: '',
         inputClassName: '',
         options: [],
     };
 
-    handleChange = (e) => {
+    private handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
         this.props.onChange(this.props.id, e.target.value);
     }
 
-    render() {
+    public render(): JSX.Element {
         return (
             <Setting
                 label={this.props.label}
diff --git a/components/widgets/settings/setting.jsx b/components/widgets/settings/setting.tsx
similarity index 56%
rename from components/widgets/settings/setting.jsx
rename to components/widgets/settings/setting.tsx
index 43382ba05a22..3ee6cecc3c40 100644
--- a/components/widgets/settings/setting.jsx
+++ b/components/widgets/settings/setting.tsx
@@ -2,19 +2,26 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import PropTypes from 'prop-types';
 
-const Setting = (props) => {
-    const {
-        children,
-        footer,
-        helpText,
-        inputId,
-        label,
-        labelClassName,
-        inputClassName,
-    } = props;
+type Props = {
+    inputId?: string;
+    label: React.ReactNode;
+    labelClassName?: string;
+    inputClassName?: string;
+    children: React.ReactNode;
+    helpText?: React.ReactNode;
+    footer?: React.ReactNode;
+}
 
+const Setting: React.FC<Props> = ({
+    inputId,
+    label,
+    labelClassName,
+    inputClassName,
+    children,
+    footer,
+    helpText,
+}: Props) => {
     return (
         <div className='form-group'>
             <label
@@ -34,14 +41,4 @@ const Setting = (props) => {
     );
 };
 
-Setting.propTypes = {
-    inputId: PropTypes.string,
-    label: PropTypes.node.isRequired,
-    labelClassName: PropTypes.string,
-    inputClassName: PropTypes.string,
-    children: PropTypes.node.isRequired,
-    helpText: PropTypes.node,
-    footer: PropTypes.node,
-};
-
 export default Setting;
\ No newline at end of file
diff --git a/components/widgets/settings/text_setting.test.jsx b/components/widgets/settings/text_setting.test.tsx
similarity index 51%
rename from components/widgets/settings/text_setting.test.jsx
rename to components/widgets/settings/text_setting.test.tsx
index 0f0e77507b09..55db9a78e684 100644
--- a/components/widgets/settings/text_setting.test.jsx
+++ b/components/widgets/settings/text_setting.test.tsx
@@ -3,99 +3,67 @@
 import React from 'react';
 import {shallow} from 'enzyme';
 
-import TextSetting from './text_setting.jsx';
+import TextSetting from './text_setting';
 
 describe('components/widgets/settings/TextSetting', () => {
     test('render component with required props', () => {
+        const onChange = jest.fn();
         const wrapper = shallow(
             <TextSetting
                 id='string.id'
                 label='some label'
                 value='some value'
+                onChange={onChange}
             />
         );
         expect(wrapper).toMatchInlineSnapshot(`
-<Setting
-  inputClassName=""
-  inputId="string.id"
-  label="some label"
-  labelClassName=""
->
-  <input
-    className="form-control"
-    id="string.id"
-    maxLength={null}
-    onChange={[Function]}
-    type="input"
-    value="some value"
-  />
-</Setting>
-`);
+          <Setting
+            inputClassName=""
+            inputId="string.id"
+            label="some label"
+            labelClassName=""
+          >
+            <input
+              className="form-control"
+              id="string.id"
+              maxLength={-1}
+              onChange={[Function]}
+              type="input"
+              value="some value"
+            />
+          </Setting>
+        `);
     });
 
     test('render with textarea type', () => {
+        const onChange = jest.fn();
         const wrapper = shallow(
             <TextSetting
                 id='string.id'
                 label='some label'
                 value='some value'
                 type='textarea'
+                onChange={onChange}
             />
         );
         expect(wrapper).toMatchInlineSnapshot(`
-<Setting
-  inputClassName=""
-  inputId="string.id"
-  label="some label"
-  labelClassName=""
->
-  <textarea
-    className="form-control"
-    id="string.id"
-    maxLength={null}
-    onChange={[Function]}
-    rows="5"
-    style={Object {}}
-    value="some value"
-  />
-</Setting>
-`);
-    });
-
-    test('render with bad type', () => {
-        console.originalError = console.error;
-        console.error = jest.fn();
-
-        const wrapper = shallow(
-            <TextSetting
-                id='string.id'
-                label='some label'
-                value='some value'
-                type='junk'
+          <Setting
+            inputClassName=""
+            inputId="string.id"
+            label="some label"
+            labelClassName=""
+          >
+            <textarea
+              className="form-control"
+              id="string.id"
+              maxLength={-1}
+              onChange={[Function]}
+              rows={5}
+              style={Object {}}
+              value="some value"
             />
-        );
-
-        expect(console.error).toBeCalledTimes(1);
-
-        console.error = console.originalError;
-
-        expect(wrapper).toMatchInlineSnapshot(`
-<Setting
-  inputClassName=""
-  inputId="string.id"
-  label="some label"
-  labelClassName=""
->
-  <input
-    className="form-control"
-    id="string.id"
-    maxLength={null}
-    onChange={[Function]}
-    type="input"
-    value="some value"
-  />
-</Setting>
-`);
+          </Setting>
+        `);
     });
 
     test('onChange', () => {
diff --git a/components/widgets/settings/text_setting.jsx b/components/widgets/settings/text_setting.tsx
similarity index 64%
rename from components/widgets/settings/text_setting.jsx
rename to components/widgets/settings/text_setting.tsx
index 4008828f8812..9f35220ec2ff 100644
--- a/components/widgets/settings/text_setting.jsx
+++ b/components/widgets/settings/text_setting.tsx
@@ -1,49 +1,43 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import PropTypes from 'prop-types';
 import React from 'react';
 
-import Setting from './setting.jsx';
+import Setting from './setting';
 
-export default class TextSetting extends React.Component {
-    static validTypes = [
-        'input',
-        'textarea',
-        'number',
-        'email',
-        'tel',
-        'url',
-        'password',
-    ];
-    static propTypes = {
-        id: PropTypes.string.isRequired,
-        label: PropTypes.node.isRequired,
-        labelClassName: PropTypes.string,
-        placeholder: PropTypes.string,
-        helpText: PropTypes.node,
-        footer: PropTypes.node,
-        value: PropTypes.oneOfType([
-            PropTypes.string,
-            PropTypes.number,
-        ]).isRequired,
-        inputClassName: PropTypes.string,
-        maxLength: PropTypes.number,
-        resizable: PropTypes.bool,
-        onChange: PropTypes.func,
-        disabled: PropTypes.bool,
-        type: PropTypes.oneOf(TextSetting.validTypes),
-    };
+type InputTypes = 'input' | 'textarea' | 'number' | 'email' | 'tel' | 'url' | 'password'
+
+type Props = {
+    id: string;
+    label: React.ReactNode;
+    labelClassName: string;
+    placeholder?: string;
+    helpText?: React.ReactNode;
+    footer?: React.ReactNode;
+    value: string | number;
+    inputClassName: string;
+    maxLength: number;
+    resizable: boolean;
+    onChange(name: string, value: any): void;
+    disabled?: boolean;
+    type: InputTypes;
+}
+
+// Since handle change is read from input and textarea element
+type HandleChangeTypes = React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>
+
+export default class TextSetting extends React.Component<Props> {
+    public static validTypes: string[] = ['input', 'textarea', 'number', 'email', 'tel', 'url', 'password'];
 
-    static defaultProps = {
+    public static defaultProps: Partial<Props> = {
         labelClassName: '',
         inputClassName: '',
         type: 'input',
-        maxLength: null,
+        maxLength: -1, // A negative number allows for values of any length
         resizable: true,
     };
 
-    handleChange = (e) => {
+    private handleChange: HandleChangeTypes = (e) => {
         if (this.props.type === 'number') {
             this.props.onChange(this.props.id, parseInt(e.target.value, 10));
         } else {
@@ -51,15 +45,15 @@ export default class TextSetting extends React.Component {
         }
     }
 
-    render() {
+    public render(): JSX.Element {
         const {resizable} = this.props;
         let {type} = this.props;
         let input = null;
 
         if (type === 'textarea') {
-            const style = {};
+            let style = {};
             if (!resizable) {
-                style.resize = 'none';
+                style = Object.assign({}, {resize: 'none'});
             }
 
             input = (
@@ -67,7 +61,7 @@ export default class TextSetting extends React.Component {
                     id={this.props.id}
                     style={style}
                     className='form-control'
-                    rows='5'
+                    rows={5}
                     placeholder={this.props.placeholder}
                     value={this.props.value}
                     maxLength={this.props.maxLength}