fix: apply new state/props type safety constraints on all dependand packages

types/create-react-class/create-react-class-tests.ts

@@ -56,7 +56,7 @@ const ClassicComponent: React.ClassicComponentClass<Props> = createReactClass<Pr
     shouldComponentUpdate(this: React.ClassicComponent<Props, State>, nextProps, nextState) {
         const newFoo: string = nextProps.foo;
         const newBar: number = nextState.bar;
-        return newFoo !== this.props.foo && newBar !== this.state.bar;
+        return newFoo !== this.props.foo && newBar !== this.state!.bar;
     },
     statics: {
         test: 1

types/draft-js/draft-js-tests.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import { Map } from "immutable";
 
 import {
   ContentBlock,
@@ -48,154 +47,141 @@ class HandleSpan extends React.Component {
 }
 
 class RichEditorExample extends React.Component<{}, { editorState: EditorState }> {
-  constructor() {
-    super({});
+    static initState() {
+        const sampleMarkup =
+            '<b>Bold text</b>, <i>Italic text</i><br/ ><br />' +
+            '<a href="http://www.facebook.com">Example link</a><br /><br/ >' +
+            '<img src="image.png" height="112" width="200" />';
+        const blocksFromHTML = convertFromHTML(sampleMarkup);
+        const state = ContentState.createFromBlockArray(blocksFromHTML.contentBlocks, blocksFromHTML.entityMap);
+        const decorator = new CompositeDecorator([
+            {
+                strategy: (
+                    block: ContentBlock,
+                    callback: (start: number, end: number) => void,
+                    contentState: ContentState
+                ) => {
+                    const text = block.getText();
+                    let matchArr, start;
+                    while ((matchArr = HANDLE_REGEX.exec(text)) !== null) {
+                        start = matchArr.index;
+                        callback(start, start + matchArr[0].length);
+                    }
+                },
+                component: HandleSpan
+            }
+        ]);
+        return { editorState: EditorState.createWithContent(state, decorator) };
+    }
+    state = RichEditorExample.initState()
 
-    const sampleMarkup =
-      '<b>Bold text</b>, <i>Italic text</i><br/ ><br />' +
-      '<a href="http://www.facebook.com">Example link</a><br /><br/ >' +
-      '<img src="image.png" height="112" width="200" />';
-    const blocksFromHTML = convertFromHTML(sampleMarkup);
-    const state = ContentState.createFromBlockArray(
-      blocksFromHTML.contentBlocks,
-      blocksFromHTML.entityMap,
-    );
-    const decorator = new CompositeDecorator([{
-      strategy: (
-        block: ContentBlock,
-        callback: (start: number, end: number) => void,
-        contentState: ContentState
-      ) => {
-        const text = block.getText();
-        let matchArr, start;
-        while ((matchArr = HANDLE_REGEX.exec(text)) !== null) {
-          start = matchArr.index;
-          callback(start, start + matchArr[0].length);
+    onChange: (editorState: EditorState) => void = (editorState: EditorState) => this.setState({ editorState });
+
+    keyBindingFn(e: SyntheticKeyboardEvent): string {
+        if (e.keyCode === KEYCODES.ENTER) {
+            const { editorState } = this.state;
+            const contentState = editorState.getCurrentContent();
+            const selectionState = editorState.getSelection();
+
+            // only split headers into header and unstyled if we press 'Enter'
+            // at the end of a header (without text selected)
+            if (selectionState.isCollapsed()) {
+                const endKey = selectionState.getEndKey();
+                const endOffset = selectionState.getEndOffset();
+                const endBlock = contentState.getBlockForKey(endKey);
+                if (isHeaderBlock(endBlock) && endOffset === endBlock.getText().length) {
+                    return SPLIT_HEADER_BLOCK;
+                }
+            }
         }
-      },
-      component: HandleSpan,
-    }]);
-    this.state = { editorState: EditorState.createWithContent(state, decorator) };
-  }
 
-  onChange: (editorState: EditorState) => void = (editorState: EditorState) => this.setState({ editorState });
+        return getDefaultKeyBinding(e);
+    }
 
-  keyBindingFn(e: SyntheticKeyboardEvent): string {
-    if (e.keyCode === KEYCODES.ENTER) {
-      const { editorState } = this.state;
-      const contentState = editorState.getCurrentContent();
-      const selectionState = editorState.getSelection();
-
-      // only split headers into header and unstyled if we press 'Enter'
-      // at the end of a header (without text selected)
-      if (selectionState.isCollapsed()) {
-        const endKey = selectionState.getEndKey();
-        const endOffset = selectionState.getEndOffset();
-        const endBlock = contentState.getBlockForKey(endKey);
-        if (isHeaderBlock(endBlock) && endOffset === endBlock.getText().length) {
-          return SPLIT_HEADER_BLOCK;
+    handleKeyCommand = (command: string, editorState: EditorState) => {
+        if (command === SPLIT_HEADER_BLOCK) {
+            this.onChange(this.splitHeaderToNewBlock());
+            return 'handled';
         }
-      }
+
+        const newState = RichUtils.handleKeyCommand(editorState, command);
+
+        if (newState) {
+            this.onChange(newState);
+            return 'handled';
+        }
+
+        return 'not-handled';
+    };
+
+    toggleBlockType: (blockType: string) => void = (blockType: string) => {
+        this.onChange(RichUtils.toggleBlockType(this.state.editorState, blockType));
+    };
+
+    toggleInlineStyle: (inlineStyle: string) => void = (inlineStyle: string) => {
+        this.onChange(RichUtils.toggleInlineStyle(this.state.editorState, inlineStyle));
+    };
+
+    splitHeaderToNewBlock(): EditorState {
+        const { editorState } = this.state;
+        const selection = editorState.getSelection();
+
+        // Add a new block after the cursor
+        const contentWithBlock = Modifier.splitBlock(editorState.getCurrentContent(), selection);
+
+        // Change the new block type to be normal 'unstyled' text,
+        const newBlock = contentWithBlock.getBlockAfter(selection.getEndKey());
+        const contentWithUnstyledBlock = Modifier.setBlockType(
+            contentWithBlock,
+            SelectionState.createEmpty(newBlock.getKey()),
+            'unstyled'
+        );
+
+        // push the new state with 'insert-characters' to preserve the undo/redo stack
+        const stateWithNewline = EditorState.push(editorState, contentWithUnstyledBlock, 'insert-characters');
+
+        // manually move the cursor to the next line (as expected)
+        const nextState = EditorState.forceSelection(stateWithNewline, SelectionState.createEmpty(newBlock.getKey()));
+
+        return nextState;
     }
 
-    return getDefaultKeyBinding(e);
-  }
+    render(): React.ReactElement<{}> {
+        // If the user changes block type before entering any text, we can
+        // either style the placeholder or hide it. Let's just hide it now.
+        let className = 'RichEditor-editor';
+        var contentState = this.state.editorState.getCurrentContent();
+        if (!contentState.hasText()) {
+            if (
+                contentState
+                    .getBlockMap()
+                    .first()
+                    .getType() !== 'unstyled'
+            ) {
+                className += ' RichEditor-hidePlaceholder';
+            }
+        }
 
-  handleKeyCommand = (command: string, editorState: EditorState) => {
-    if (command === SPLIT_HEADER_BLOCK) {
-      this.onChange(this.splitHeaderToNewBlock());
-      return 'handled';
-    }
-
-    const newState = RichUtils.handleKeyCommand(editorState, command);
-
-    if (newState) {
-      this.onChange(newState);
-      return "handled";
-    }
-
-    return "not-handled";
-    }
-
-  toggleBlockType: (blockType: string) => void = (blockType: string) => {
-    this.onChange(RichUtils.toggleBlockType(this.state.editorState, blockType));
-    }
-
-  toggleInlineStyle: (inlineStyle: string) => void = (inlineStyle: string) => {
-    this.onChange(RichUtils.toggleInlineStyle(this.state.editorState, inlineStyle));
-  }
-
-  splitHeaderToNewBlock(): EditorState {
-      const { editorState } = this.state;
-      const selection = editorState.getSelection();
-
-      // Add a new block after the cursor
-      const contentWithBlock = Modifier.splitBlock(
-        editorState.getCurrentContent(),
-        selection,
-      );
-
-      // Change the new block type to be normal 'unstyled' text,
-      const newBlock = contentWithBlock.getBlockAfter(selection.getEndKey());
-      const contentWithUnstyledBlock = Modifier.setBlockType(
-        contentWithBlock,
-        SelectionState.createEmpty(newBlock.getKey()),
-        'unstyled',
-      );
-
-      // push the new state with 'insert-characters' to preserve the undo/redo stack
-      const stateWithNewline = EditorState.push(
-        editorState,
-        contentWithUnstyledBlock,
-        'insert-characters'
-      );
-
-      // manually move the cursor to the next line (as expected)
-      const nextState = EditorState.forceSelection(
-        stateWithNewline,
-        SelectionState.createEmpty(newBlock.getKey()),
-      );
-
-      return nextState;
-  }
-
-  render(): React.ReactElement<{}> {
-    // If the user changes block type before entering any text, we can
-    // either style the placeholder or hide it. Let's just hide it now.
-    let className = 'RichEditor-editor';
-    var contentState = this.state.editorState.getCurrentContent();
-    if (!contentState.hasText()) {
-      if (contentState.getBlockMap().first().getType() !== 'unstyled') {
-        className += ' RichEditor-hidePlaceholder';
-      }
-    }
-
-            return (
-      <div className="RichEditor-root">
-        <BlockStyleControls
-          editorState={this.state.editorState}
-          onToggle={this.toggleBlockType}
-          />
-        <InlineStyleControls
-          editorState={this.state.editorState}
-          onToggle={this.toggleInlineStyle}
-          />
-        <div className={className}>
-          <Editor
-            blockStyleFn={getBlockStyle}
-            customStyleMap={styleMap}
-            editorState={this.state.editorState}
-            keyBindingFn={this.keyBindingFn}
-            handleKeyCommand={this.handleKeyCommand}
-            onChange={this.onChange}
-            placeholder="Tell a story..."
-            ref="editor"
-            spellCheck={true}
-            />
-        </div>
+        return (
+            <div className="RichEditor-root">
+                <BlockStyleControls editorState={this.state.editorState} onToggle={this.toggleBlockType} />
+                <InlineStyleControls editorState={this.state.editorState} onToggle={this.toggleInlineStyle} />
+                <div className={className}>
+                    <Editor
+                        blockStyleFn={getBlockStyle}
+                        customStyleMap={styleMap}
+                        editorState={this.state.editorState}
+                        keyBindingFn={this.keyBindingFn}
+                        handleKeyCommand={this.handleKeyCommand}
+                        onChange={this.onChange}
+                        placeholder="Tell a story..."
+                        ref="editor"
+                        spellCheck={true}
+                    />
                 </div>
-            );
-        }
+            </div>
+        );
+    }
 }
 
 // Custom overrides for "code" style.

types/expo__vector-icons/expo__vector-icons-tests.tsx

@@ -41,13 +41,9 @@ class Example extends React.Component {
 }
 
 class TabTest extends React.Component<{}, { selectedTab: string }> {
-  constructor() {
-    super({});
-
-    this.state = {
-      selectedTab: 'tab1'
-    };
-  }
+  state = {
+    selectedTab: 'tab1'
+  };
 
   render() {
     return (

types/fixed-data-table-2/fixed-data-table-2-tests.tsx

@@ -46,19 +46,15 @@ interface MyTable3State {
 }
 
 class MyTable3 extends React.Component<{}, MyTable3State> {
-    constructor(props: {}) {
-        super(props);
-
-        this.state = {
-            myTableData: [
-                { name: "Rylan" },
-                { name: "Amelia" },
-                { name: "Estevan" },
-                { name: "Florence" },
-                { name: "Tressa" },
-            ]
-        };
-    }
+    state = {
+        myTableData: [
+            { name: "Rylan" },
+            { name: "Amelia" },
+            { name: "Estevan" },
+            { name: "Florence" },
+            { name: "Tressa" },
+        ]
+    };
 
     render() {
         return (
@@ -130,18 +126,15 @@ interface MyTable4State {
 }
 
 class MyTable4 extends React.Component<{}, MyTable4State> {
-    constructor(props: {}) {
-        super(props);
-        this.state = {
-            tableData: [
-                { name: "Rylan", email: "Angelita_Weimann42@gmail.com" },
-                { name: "Amelia", email: "Dexter.Trantow57@hotmail.com" },
-                { name: "Estevan", email: "Aimee7@hotmail.com" },
-                { name: "Florence", email: "Jarrod.Bernier13@yahoo.com" },
-                { name: "Tressa", email: "Yadira1@hotmail.com" }
-            ]
-        };
-    }
+    state = {
+        tableData: [
+            { name: "Rylan", email: "Angelita_Weimann42@gmail.com" },
+            { name: "Amelia", email: "Dexter.Trantow57@hotmail.com" },
+            { name: "Estevan", email: "Aimee7@hotmail.com" },
+            { name: "Florence", email: "Jarrod.Bernier13@yahoo.com" },
+            { name: "Tressa", email: "Yadira1@hotmail.com" }
+        ]
+    };
 
     render() {
         return (

types/fixed-data-table/fixed-data-table-tests.tsx

@@ -41,19 +41,15 @@ interface MyTable3State {
 
 class MyTable3 extends React.Component<{}, MyTable3State> {
 
-      constructor(props: {}) {
-        super(props);
-
-        this.state = {
-            myTableData: [
-                {name: "Rylan"},
-                {name: "Amelia"},
-                {name: "Estevan"},
-                {name: "Florence"},
-                {name: "Tressa"},
-            ]
-        };
-    }
+    state = {
+        myTableData: [
+            {name: "Rylan"},
+            {name: "Amelia"},
+            {name: "Estevan"},
+            {name: "Florence"},
+            {name: "Tressa"},
+        ]
+    };
 
     render(): React.ReactElement<any> {
         return (
@@ -127,18 +123,15 @@ interface MyTable4State {
 
 class MyTable4 extends React.Component<{}, MyTable4State> {
 
-    constructor(props: {}) {
-        super(props);
-        this.state = {
-            tableData: [
-                {name: "Rylan", email: "Angelita_Weimann42@gmail.com"},
-                {name: "Amelia", email: "Dexter.Trantow57@hotmail.com"},
-                {name: "Estevan", email: "Aimee7@hotmail.com"},
-                {name: "Florence", email: "Jarrod.Bernier13@yahoo.com"},
-                {name: "Tressa", email: "Yadira1@hotmail.com"}
-            ]
-        };
-    }
+    state = {
+        tableData: [
+            {name: "Rylan", email: "Angelita_Weimann42@gmail.com"},
+            {name: "Amelia", email: "Dexter.Trantow57@hotmail.com"},
+            {name: "Estevan", email: "Aimee7@hotmail.com"},
+            {name: "Florence", email: "Jarrod.Bernier13@yahoo.com"},
+            {name: "Tressa", email: "Yadira1@hotmail.com"}
+        ]
+    };
 
     render(): React.ReactElement<any> {
         return (

types/jasmine-enzyme/jasmine-enzyme-tests.tsx

@@ -253,12 +253,9 @@ describe('toHaveRef', () => {
 
 describe('toHaveState', () => {
 	class Fixture extends React.Component {
-		constructor() {
-			super({});
-			this.state = {
-				foo: false,
-			};
-		}
+		state = {
+			foo: false,
+		};
 
 		render() {
 			return (

types/material-ui-pagination/material-ui-pagination-tests.tsx

@@ -17,12 +17,9 @@ interface PagerState {
 }
 
 class Pager extends React.Component<{}, PagerState> {
-	constructor() {
-		super({});
-		this.state = {
-			pageIndex: 0
-		};
-	}
+	state = {
+		pageIndex: 0
+	};
 	setPageIndex = (pageIndex: number) => {
 		this.setState({ pageIndex });
 	}

types/material-ui/material-ui-tests.tsx

@@ -2372,13 +2372,9 @@ const AppBarExampleIconMenu = () => (
 
 // "http://www.material-ui.com/#/components/auto-complete"
 export class AutoCompleteExampleSimple extends Component<{}, {dataSource: string[]}> {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      dataSource: [],
-    };
-  }
+  state = {
+    dataSource: [],
+  };
 
   handleUpdateInput = (value) => {
     this.setState({
@@ -2959,12 +2955,9 @@ const CardExampleWithoutAvatar = () => (
 );
 
 class CardExampleControlled extends Component<{}, {expanded: boolean}> {
-  constructor(props) {
-    super(props);
-    this.state = {
-      expanded: false,
-    };
-  }
+  state = {
+    expanded: false,
+  };
 
   handleExpandChange = (expanded) => {
     this.setState({expanded});
@@ -3082,95 +3075,90 @@ interface DatePickerExampleToggleState {
 }
 
 class DatePickerExampleToggle extends Component<{}, DatePickerExampleToggleState> {
-  constructor(props) {
-    super(props);
+    static initState() {
+        const minDate = new Date();
+        const maxDate = new Date();
+        minDate.setFullYear(minDate.getFullYear() - 1);
+        minDate.setHours(0, 0, 0, 0);
+        maxDate.setFullYear(maxDate.getFullYear() + 1);
+        maxDate.setHours(0, 0, 0, 0);
 
-    const minDate = new Date();
-    const maxDate = new Date();
-    minDate.setFullYear(minDate.getFullYear() - 1);
-    minDate.setHours(0, 0, 0, 0);
-    maxDate.setFullYear(maxDate.getFullYear() + 1);
-    maxDate.setHours(0, 0, 0, 0);
+        return {
+            minDate,
+            maxDate,
+            autoOk: false,
+            disableYearSelection: false
+        };
+    }
+    state = DatePickerExampleToggle.initState();
 
-    this.state = {
-      minDate,
-      maxDate,
-      autoOk: false,
-      disableYearSelection: false,
-    };
-  }
+    handleChangeMinDate = (event, date) => {
+        this.setState({
+            minDate: date
+        });
+    }
 
-  handleChangeMinDate = (event, date) => {
-    this.setState({
-      minDate: date,
-    });
-  }
+    handleChangeMaxDate = (event, date) => {
+        this.setState({
+            maxDate: date
+        });
+    }
 
-  handleChangeMaxDate = (event, date) => {
-    this.setState({
-      maxDate: date,
-    });
-  }
+    handleToggle = (event, toggled) => {
+        this.setState({
+            [event.target.name]: toggled
+        });
+    }
 
-  handleToggle = (event, toggled) => {
-    this.setState({
-      [event.target.name]: toggled,
-    });
-  }
-
-  render() {
-    return (
-      <div>
-        <DatePicker
-          floatingLabelText="Ranged Date Picker"
-          autoOk={this.state.autoOk}
-          minDate={this.state.minDate}
-          maxDate={this.state.maxDate}
-          disableYearSelection={this.state.disableYearSelection}
-        />
-        <div style={optionsStyle}>
-          <DatePicker
-            onChange={this.handleChangeMinDate}
-            autoOk={this.state.autoOk}
-            floatingLabelText="Min Date"
-            defaultDate={this.state.minDate}
-            disableYearSelection={this.state.disableYearSelection}
-          />
-          <DatePicker
-            onChange={this.handleChangeMaxDate}
-            autoOk={this.state.autoOk}
-            floatingLabelText="Max Date"
-            defaultDate={this.state.maxDate}
-            disableYearSelection={this.state.disableYearSelection}
-          />
-          <Toggle
-            name="autoOk"
-            value="autoOk"
-            label="Auto Ok"
-            toggled={this.state.autoOk}
-            onToggle={this.handleToggle}
-          />
-          <Toggle
-            name="disableYearSelection"
-            value="disableYearSelection"
-            label="Disable Year Selection"
-            toggled={this.state.disableYearSelection}
-            onToggle={this.handleToggle}
-          />
-        </div>
-      </div>
-    );
-  }
+    render() {
+        return (
+            <div>
+                <DatePicker
+                    floatingLabelText="Ranged Date Picker"
+                    autoOk={this.state.autoOk}
+                    minDate={this.state.minDate}
+                    maxDate={this.state.maxDate}
+                    disableYearSelection={this.state.disableYearSelection}
+                />
+                <div style={optionsStyle}>
+                    <DatePicker
+                        onChange={this.handleChangeMinDate}
+                        autoOk={this.state.autoOk}
+                        floatingLabelText="Min Date"
+                        defaultDate={this.state.minDate}
+                        disableYearSelection={this.state.disableYearSelection}
+                    />
+                    <DatePicker
+                        onChange={this.handleChangeMaxDate}
+                        autoOk={this.state.autoOk}
+                        floatingLabelText="Max Date"
+                        defaultDate={this.state.maxDate}
+                        disableYearSelection={this.state.disableYearSelection}
+                    />
+                    <Toggle
+                        name="autoOk"
+                        value="autoOk"
+                        label="Auto Ok"
+                        toggled={this.state.autoOk}
+                        onToggle={this.handleToggle}
+                    />
+                    <Toggle
+                        name="disableYearSelection"
+                        value="disableYearSelection"
+                        label="Disable Year Selection"
+                        toggled={this.state.disableYearSelection}
+                        onToggle={this.handleToggle}
+                    />
+                </div>
+            </div>
+        );
+    }
 }
 
 class DatePickerExampleControlled extends Component<{}, {controlledDate?: Date}> {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      controlledDate: null,
-    };
-  }
+  state = {
+    controlledDate: null,
+  };
 
   handleChange = (event, date) => {
     this.setState({
@@ -3545,10 +3533,7 @@ const DividerExampleMenu = () => (
 
 // "http://www.material-ui.com/#/components/drawer"
 class DrawerSimpleExample extends Component<{}, {open?: boolean}> {
-  constructor(props) {
-    super(props);
-    this.state = {open: false};
-  }
+  state = {open: false};
 
   handleToggle = () => this.setState({open: !this.state.open});
 
@@ -3569,10 +3554,7 @@ class DrawerSimpleExample extends Component<{}, {open?: boolean}> {
 }
 
 class DrawerUndockedExample extends Component<{}, {open?: boolean}> {
-  constructor(props) {
-    super(props);
-    this.state = {open: false};
-  }
+  state = {open: false};
 
   handleToggle = () => this.setState({open: !this.state.open});
 
@@ -3600,10 +3582,7 @@ class DrawerUndockedExample extends Component<{}, {open?: boolean}> {
 }
 
 class DrawerOpenRightExample extends Component<{}, {open?: boolean}> {
-  constructor(props) {
-    super(props);
-    this.state = {open: false};
-  }
+  state = {open: false};
 
   handleToggle = () => this.setState({open: !this.state.open});
 
@@ -4522,14 +4501,11 @@ interface IconMenuExampleControlledState {
 }
 
 class IconMenuExampleControlled extends Component<{}, IconMenuExampleControlledState> {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      valueSingle: '3',
-      valueMultiple: ['3', '5'],
-    };
-  }
+  state = {
+    valueSingle: '3',
+    valueMultiple: ['3', '5'],
+    openMenu: false
+  };
 
   handleChangeSingle = (event, value) => {
     this.setState({
@@ -4698,10 +4674,7 @@ const IconMenuExampleNested = () => (
 
 // "http://www.material-ui.com/#/components/dropdown-menu"
 class DropDownMenuSimpleExample extends Component<{}, {value?: number}> {
-  constructor(props) {
-    super(props);
-    this.state = {value: 1};
-  }
+  state = {value: 1};
 
   handleChange = (event, index, value) => this.setState({value});
 
@@ -4734,10 +4707,7 @@ class DropDownMenuSimpleExample extends Component<{}, {value?: number}> {
 }
 
 class DropDownMenuOpenImmediateExample extends Component<{}, {value?: number}> {
-  constructor(props) {
-    super(props);
-    this.state = {value: 2};
-  }
+  state = {value: 2};
 
   handleChange = (event, index, value) => this.setState({value});
 
@@ -4771,10 +4741,7 @@ for (let i = 0; i < 100; i++) {
 }
 
 class DropDownMenuLongMenuExample extends Component<{}, {value?: number}> {
-  constructor(props) {
-    super(props);
-    this.state = {value: 10};
-  }
+  state = {value: 10};
 
   handleChange = (event, index, value) => this.setState({value});
 
@@ -4788,10 +4755,7 @@ class DropDownMenuLongMenuExample extends Component<{}, {value?: number}> {
 }
 
 class DropDownMenuLabeledExample extends Component<{}, {value?: number}> {
-  constructor(props) {
-    super(props);
-    this.state = {value: 2};
-  }
+  state = {value: 2};
 
   handleChange = (event, index, value) => this.setState({value});
 
@@ -4840,13 +4804,10 @@ const PaperExampleCircle = () => (
 
 // "http://www.material-ui.com/#/components/popover"
 class PopoverExampleSimple extends Component<{}, {open?: boolean, anchorEl?: ReactInstance}> {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      open: false,
-    };
-  }
+  state = {
+    open: false,
+    anchorEl: null
+  };
 
   handleClick = (event) => {
     // This prevents ghost click.
@@ -4891,13 +4852,10 @@ class PopoverExampleSimple extends Component<{}, {open?: boolean, anchorEl?: Rea
 }
 
 class PopoverExampleAnimation extends Component<{}, {open?: boolean, anchorEl?: ReactInstance}> {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      open: false,
-    };
-  }
+  state = {
+    open: false,
+    anchorEl: null
+  };
 
   handleClick = (event) => {
     // This prevents ghost click.
@@ -4949,21 +4907,17 @@ interface PopoverExampleConfigurableState {
 }
 
 class PopoverExampleConfigurable extends Component<{}, PopoverExampleConfigurableState> {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      open: false,
-      anchorOrigin: {
+  state: PopoverExampleConfigurableState = {
+    open: false,
+    anchorOrigin: {
         horizontal: 'left',
         vertical: 'bottom',
-      },
-      targetOrigin: {
+    },
+    targetOrigin: {
         horizontal: 'left',
         vertical: 'top',
-      },
-    };
-  }
+    },
+  };
 
   handleClick = (event) => {
     // This prevents ghost click.
@@ -5110,13 +5064,9 @@ const CircularProgressExampleSimple = () => (
 class CircularProgressExampleDeterminate extends Component<{}, {completed?: number}> {
   private timer: number;
 
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      completed: 0,
-    };
-  }
+  state = {
+    completed: 0,
+  };
 
   componentDidMount() {
     this.timer = setTimeout(() => this.progress(5), 1000);
@@ -5155,13 +5105,9 @@ const LinearProgressExampleSimple = () => (
 class LinearProgressExampleDeterminate extends Component<{}, {completed?: number}> {
   private timer: number;
 
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      completed: 0,
-    };
-  }
+  state = {
+    completed: 0,
+  };
 
   componentDidMount() {
     this.timer = setTimeout(() => this.progress(5), 1000);
@@ -5250,10 +5196,7 @@ const RefreshIndicatorExampleLoading = () => (
 
 // "http://www.material-ui.com/#/components/select-field"
 class SelectFieldExampleSimple extends Component<{}, {value?: number}> {
-  constructor(props) {
-    super(props);
-    this.state = {value: 1};
-  }
+  state = {value: 1};
 
   handleChange = (event, index, value) => this.setState({value});
 
@@ -5302,10 +5245,7 @@ class SelectFieldExampleSimple extends Component<{}, {value?: number}> {
 }
 
 class SelectFieldLongMenuExample extends Component<{}, {value?: number}> {
-  constructor(props) {
-    super(props);
-    this.state = {value: 10};
-  }
+  state = {value: 10};
 
   handleChange = (event, index, value) => this.setState({value});
 
@@ -5319,10 +5259,7 @@ class SelectFieldLongMenuExample extends Component<{}, {value?: number}> {
 }
 
 class SelectFieldExampleCustomLabel extends Component<{}, {value?: number}> {
-  constructor(props) {
-    super(props);
-    this.state = {value: 1};
-  }
+  state = {value: 1};
 
   handleChange = (event, index, value) => this.setState({value});
 
@@ -5347,10 +5284,7 @@ const itemsPeriod = [
 ];
 
 export default class SelectFieldExampleFloatingLabel extends Component<{}, {value?: number}> {
-  constructor(props) {
-    super(props);
-    this.state = {value: null};
-  }
+  state = {value: null};
 
   handleChange = (event, index, value) => this.setState({value});
 
@@ -5380,10 +5314,7 @@ export default class SelectFieldExampleFloatingLabel extends Component<{}, {valu
 }
 
 class SelectFieldExampleError extends Component<{}, {value?: number}> {
-  constructor(props) {
-    super(props);
-    this.state = {value: null};
-  }
+  state = {value: null};
 
   handleChange = (event, index, value) => this.setState({value});
 
@@ -5429,10 +5360,7 @@ const names = [
 ];
 
 class SelectFieldExampleMultiSelect extends Component<{}, {values?: string[]}> {
-  constructor(props) {
-    super(props);
-    this.state = {values: []};
-  }
+  state = {values: []};
 
   handleChange = (event, index, values) => this.setState({values});
 
@@ -5477,10 +5405,7 @@ const persons = [
 ];
 
 class SelectFieldExampleSelectionRenderer extends Component<{}, {values?: string[]}> {
-  constructor(props) {
-    super(props);
-    this.state = {values: []};
-  }
+  state = {values: []};
 
   handleChange = (event, index, values) => this.setState({values});
 
@@ -5523,10 +5448,7 @@ class SelectFieldExampleSelectionRenderer extends Component<{}, {values?: string
 }
 
 class SelectFieldExampleDropDownMenu extends Component<{}, {value?: number}> {
-  constructor(props) {
-    super(props);
-    this.state = {value: null};
-  }
+  state = {value: null};
 
   handleChange = (event, index, value) => this.setState({value});
 
@@ -5735,12 +5657,7 @@ const ToggleExampleSimple = () => (
 
 // "http://material-ui.com/#/components/snackbar"
 class SnackbarExampleSimple extends Component<{}, {open?: boolean}> {
-  constructor(props) {
-    super(props);
-    this.state = {
-      open: false,
-    };
-  }
+  state = { open: false, };
 
   handleClick = () => {
     this.setState({
@@ -5774,14 +5691,11 @@ class SnackbarExampleSimple extends Component<{}, {open?: boolean}> {
 }
 
 class SnackbarExampleAction extends Component<{}, {open?: boolean, autoHideDuration?: number, message?: string}> {
-  constructor(props) {
-    super(props);
-    this.state = {
-      autoHideDuration: 4000,
-      message: 'Event added to your calendar',
-      open: false,
-    };
-  }
+  state = {
+    autoHideDuration: 4000,
+    message: 'Event added to your calendar',
+    open: false,
+  };
 
   handleClick = () => {
     this.setState({
@@ -5836,16 +5750,11 @@ class SnackbarExampleAction extends Component<{}, {open?: boolean, autoHideDurat
 }
 
 class SnackbarExampleTwice extends Component<{}, {open?: boolean, message?: string}> {
-  private timer: number;
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      message: 'Event 1 added to your calendar',
-      open: false,
-    };
-    this.timer = undefined;
-  }
+  state = {
+    message: 'Event 1 added to your calendar',
+    open: false,
+  };
+  private timer?: number;
 
   componentWillUnMount() {
     clearTimeout(this.timer);
@@ -6516,22 +6425,18 @@ interface TableExampleComplexState {
 }
 
 class TableExampleComplex extends Component<{}, TableExampleComplexState> {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      fixedHeader: true,
-      fixedFooter: true,
-      stripedRows: false,
-      showRowHover: false,
-      selectable: true,
-      multiSelectable: false,
-      enableSelectAll: false,
-      deselectOnClickaway: true,
-      showCheckboxes: true,
-      height: '300px',
-    };
-  }
+  state = {
+    fixedHeader: true,
+    fixedFooter: true,
+    stripedRows: false,
+    showRowHover: false,
+    selectable: true,
+    multiSelectable: false,
+    enableSelectAll: false,
+    deselectOnClickaway: true,
+    showCheckboxes: true,
+    height: '300px',
+  };
 
   handleToggle = (event, toggled) => {
     this.setState({
@@ -6711,12 +6616,9 @@ const TabsExampleSimple = () => (
 );
 
 class TabsExampleControlled extends Component<{}, {value?: string}> {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: 'a',
-    };
-  }
+  state = {
+    value: 'a',
+  };
 
   handleChange = (value) => {
     this.setState({
@@ -6916,13 +6818,9 @@ const TextFieldExampleDisabled = () => (
 );
 
 class TextFieldExampleControlled extends Component<{}, {value?: string}> {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      value: 'Property Value',
-    };
-  }
+  state = {
+    value: 'Property Value',
+  };
 
   handleChange = (event) => {
     this.setState({
@@ -6962,10 +6860,7 @@ const TimePickerExampleSimple = () => (
 );
 
 class TimePickerExampleComplex extends Component<{}, {value24?: Date, value12?: Date}> {
-  constructor(props) {
-    super(props);
-    this.state = {value24: null, value12: null};
-  }
+  state = {value24: null, value12: null};
 
   handleChangeTimePicker24 = (event, date) => {
     this.setState({value24: date});
@@ -7007,12 +6902,9 @@ const TimePickerInternational = () => (
 
 // "http://www.material-ui.com/#/components/toolbar"
 class ToolbarExamplesSimple extends Component<{}, {value?: number}> {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: 3,
-    };
-  }
+  state = {
+    value: 3
+  };
 
   handleChange = (event, index, value) => this.setState({value});
 
@@ -7056,12 +6948,9 @@ const componentWithWidth = withWidth()(ToolbarExamplesSimple);
 class BottomNavigationExample extends Component<{}, {
   index?: number
 }> {
-  constructor() {
-    super({});
-    this.state = {
-      index: 0
-    };
-  }
+  state = {
+    index: 0
+  };
   render() {
     return <BottomNavigation selectedIndex={this.state.index}>
       <BottomNavigationItem label='0' icon={<ActionHome/>} onClick={() => this.setState({index: 0})}/>

types/rc-tree/rc-tree-tests.tsx

@@ -13,24 +13,18 @@ interface State {
 }
 
 export class Demo extends React.Component<Props, State> {
-    constructor(props: Props) {
-        super(props);
-
-        const keys = this.props.keys;
-        this.state = {
+    static initState({keys}: Props) {
+        return {
             defaultExpandedKeys: keys,
             defaultSelectedKeys: keys,
             defaultCheckedKeys: keys,
             switchIt: true,
         };
     }
-
     static defaultProps: Props = {
         keys: ['0-0-0-0'],
     };
-
-    getInitialState() {
-    }
+    state = Demo.initState(this.props);
 
     onExpand(expandedKeys: string[]) {
         console.log('onExpand', expandedKeys, arguments);

types/react-aria-menubutton/react-aria-menubutton-tests.tsx

@@ -56,10 +56,7 @@ interface DemoOneState {
 }
 
 class DemoOne extends React.Component<{}, DemoOneState> {
-	constructor(props: any) {
-		super(props);
-		this.state = { selected: "", noMenu: false };
-	}
+	state = { selected: "", noMenu: false };
 
 	handleSelection(value: string) {
 		if (value === "destroy") {

types/react-autosuggest/react-autosuggest-tests.tsx

@@ -63,14 +63,10 @@ export class ReactAutosuggestBasicTest extends React.Component<any, any> {
         }
     ];
     // endregion region Constructor
-    constructor(props: any) {
-        super(props);
-
-        this.state = {
-            value: '',
-            suggestions: this.getSuggestions('')
-        };
-    }
+    state = {
+        value: '',
+        suggestions: this.getSuggestions('')
+    };
     // endregion region Rendering methods
     render(): JSX.Element {
         const {value, suggestions} = this.state;
@@ -189,14 +185,10 @@ export class ReactAutosuggestTypedTest extends React.Component<any, any> {
         }
     ];
     // endregion region Constructor
-    constructor(props: any) {
-        super(props);
-
-        this.state = {
-            value: '',
-            suggestions: this.getSuggestions('')
-        };
-    }
+    state = {
+        value: '',
+        suggestions: this.getSuggestions('')
+    };
     // endregion region Rendering methods
     render(): JSX.Element {
         const {value, suggestions} = this.state;
@@ -345,6 +337,8 @@ export class ReactAutosuggestMultipleTest extends React.Component<any, any> {
             ]
         }
     ];
+
+    state: any;
     // endregion region Constructor
     constructor(props: any) {
         super(props);
@@ -495,14 +489,10 @@ export class ReactAutosuggestCustomTest extends React.Component<any, any> {
         }
     ];
     // endregion region Constructor
-    constructor(props: any) {
-        super(props);
-
-        this.state = {
-            value: '',
-            suggestions: this.getSuggestions('')
-        };
-    }
+    state = {
+        value: '',
+        suggestions: this.getSuggestions('')
+    };
     // endregion region Rendering methods
     render(): JSX.Element {
         const {value, suggestions} = this.state;

types/react-beautiful-dnd/react-beautiful-dnd-tests.tsx

@@ -40,12 +40,11 @@ interface AppState {
 }
 
 class App extends React.Component<{}, AppState> {
+  state = {
+    items: getItems(10)
+  };
   constructor(props: any) {
     super(props);
-
-    this.state = {
-      items: getItems(10)
-    };
     this.onDragEnd = this.onDragEnd.bind(this);
   }
 

types/react-click-outside/react-click-outside-tests.tsx

@@ -11,10 +11,7 @@ interface State {
 }
 
 class StatefulComponent extends React.Component<Props, State> {
-    constructor(props: Props) {
-        super(props);
-        this.state = { isOpened: true };
-    }
+    state = { isOpened: true };
 
     handleClickOutside() {
         this.setState({ isOpened: false });

types/react-data-grid/react-data-grid-tests.tsx

@@ -10,13 +10,9 @@ var DropDownEditor = Editors.DropDownEditor;
 var { Selectors } = ReactDataGridPlugins.Data;
 
 class CustomFilterHeaderCell extends React.Component<any, any> {
-   constructor(props: any, context: any) {
-       super(props, context);
-
-       this.state = {
-           filterTerm: ""
-       };
-   }
+   state = {
+       filterTerm: ""
+   };
    handleChange(e: any) {
        let val = e.target.value;
        this.setState({filterTerm: val});

types/react-datepicker/react-datepicker-tests.tsx

@@ -5,12 +5,12 @@ import DatePicker from 'react-datepicker';
 class ReactDatePicker extends React.Component<{}, { startDate: moment.Moment; displayName: string; }> {
 	constructor(props: {}) {
 		super(props);
-		this.state = {
-			startDate: moment(),
-			displayName: 'Example'
-		};
 		this.handleChange = this.handleChange.bind(this);
 	}
+	state = {
+		startDate: moment(),
+		displayName: 'Example'
+	};
 
 	handleChange = function(date?: moment.Moment | null) {
 		this.setState({

types/react-daterange-picker/react-daterange-picker-tests.tsx

@@ -12,12 +12,6 @@ const moment = MomentRange.extendMoment(Moment);
 type AppProps = ReactDateRangePicker.Props;
 
 class App extends React.Component<AppProps, any> {
-    constructor(props: AppProps, context: any) {
-        super(props, context);
-
-        this.state = {};
-    }
-
     handleSelect(value: AppProps, states: any): void {
         this.setState({ value, states });
     }
@@ -44,12 +38,6 @@ class App extends React.Component<AppProps, any> {
 }
 
 class DateSinglePicker extends React.Component<AppProps, any> {
-    constructor(props: AppProps, context: any) {
-        super(props, context);
-
-        this.state = {};
-    }
-
     handleSelect(value: AppProps) {
         this.setState({ value });
     }

types/react-form/react-form-tests.tsx

@@ -23,10 +23,7 @@ import {
 
 // Form Api
 class FormApiMethods extends React.Component {
-	constructor(props: {}) {
-		super(props);
-		this.state = {};
-	}
+	state = {};
 
 	render() {
 		const FormContent = (props: { formApi?: FormApi }) => (
@@ -82,11 +79,6 @@ const statusOptions = [
 ];
 
 class BasicForm extends React.Component {
-	constructor(props: {}) {
-		super(props);
-		this.state = {};
-	}
-
 	render() {
 		return (
 			<div>
@@ -124,11 +116,6 @@ class BasicForm extends React.Component {
 
 // Form with Arrays
 class FormWithArrays extends React.Component {
-	constructor(props: {}) {
-		super(props);
-		this.state = {};
-	}
-
 	render() {
 		return (
 			<div>
@@ -169,11 +156,6 @@ const Friend = ({ i }: {i: number}) => (
 );
 
 class FormWithSpecialFieldSyntax extends React.Component {
-	constructor(props: {}) {
-		super(props);
-		this.state = {};
-	}
-
 	render() {
 		return (
 			<div>
@@ -215,11 +197,6 @@ const Questions = () => (
 );
 
 class NestedFormExample extends React.Component {
-	constructor(props: {}) {
-		super(props);
-		this.state = {};
-	}
-
 	render() {
 		return (
 			<div>
@@ -240,11 +217,6 @@ class NestedFormExample extends React.Component {
 
 // Dynamic Forms
 class DynamicForm extends React.Component {
-	constructor(props: {}) {
-		super(props);
-		this.state = {};
-	}
-
 	render() {
 		return (
 			<div>
@@ -297,11 +269,6 @@ const MyFriend = ({ i }: {i: number}) => (
 );
 
 class FormWithArrayOfNestedForms extends React.Component {
-	constructor(props: {}) {
-		super(props);
-		this.state = {};
-	}
-
 	render() {
 		return (
 			<div>
@@ -325,11 +292,6 @@ class FormWithArrayOfNestedForms extends React.Component {
 
 // Styled Form
 class StyledForm extends React.Component {
-	constructor(props: {}) {
-		super(props);
-		this.state = {};
-	}
-
 	errorValidator = (values: FormValues) => {
 		const validateFirstName = (firstName: string) => {
 			return !firstName ? 'First name is required.' : undefined;

types/react-image-crop/test/react-image-crop-global-tests.ts

@@ -1,13 +1,16 @@
 interface TestState {
     crop?: ReactCrop.Crop;
 }
+const initialState = {
+    crop: {
+        x: 0,
+        y: 0
+    }
+};
 
 // Basic use case
 class SimpleTest extends React.Component<{}, TestState> {
-    constructor(props: {}) {
-        super(props);
-        this.state = {};
-    }
+    state = initialState;
 
     onChange = (crop: ReactCrop.Crop) => {
         this.setState({ crop });
@@ -27,10 +30,7 @@ class SimpleTest extends React.Component<{}, TestState> {
 
 // Set an aspect ratio to crop
 class AspectRatioTest extends React.Component<{}, TestState> {
-    constructor(props: {}) {
-        super(props);
-        this.state = {};
-    }
+    state = initialState;
 
     onChange = (crop: ReactCrop.Crop) => {
         this.setState({ crop });
@@ -65,10 +65,7 @@ class AspectRatioTest extends React.Component<{}, TestState> {
 
 // All available props
 class CompleteTest extends React.Component<{}, TestState> {
-    constructor(props: {}) {
-        super(props);
-        this.state = {};
-    }
+    state = initialState;
 
     onChange = (crop: ReactCrop.Crop) => {
         this.setState({ crop });

types/react-image-crop/test/react-image-crop-module-tests.tsx

@@ -5,34 +5,29 @@ interface TestState {
     crop?: ReactCrop.Crop;
 }
 
+const initialState = {
+    crop: {
+        x: 100,
+        y: 200
+    }
+};
+
 // Basic use case
 class SimpleTest extends React.Component<{}, TestState> {
-    constructor(props: {}) {
-        super(props);
-        this.state = {};
-    }
+    state = initialState;
 
     onChange = (crop: ReactCrop.Crop) => {
         this.setState({ crop });
     }
 
     render() {
-        return (
-            <ReactCrop
-                src="imageSrc"
-                onChange={this.onChange}
-                crop={this.state.crop}
-            />
-        );
+        return <ReactCrop src="imageSrc" onChange={this.onChange} crop={this.state.crop} />;
     }
 }
 
 // Set an aspect ratio to crop
 class AspectRatioTest extends React.Component<{}, TestState> {
-    constructor(props: {}) {
-        super(props);
-        this.state = {};
-    }
+    state = initialState;
 
     onChange = (crop: ReactCrop.Crop) => {
         this.setState({ crop });
@@ -66,10 +61,7 @@ class AspectRatioTest extends React.Component<{}, TestState> {
 
 // All available props
 class CompleteTest extends React.Component<{}, TestState> {
-    constructor(props: {}) {
-        super(props);
-        this.state = {};
-    }
+    state = initialState;
 
     onChange = (crop: ReactCrop.Crop) => {
         this.setState({ crop });

types/react-infinite/react-infinite-tests.tsx

@@ -73,13 +73,10 @@ class ListItem extends React.Component<{ key: number; num: number }, {}> {
 }
 
 class InfiniteList extends React.Component<{}, { elements: React.ReactElement<any>[], isInfiniteLoading: boolean }> {
-    constructor(props?: {}, context?: any) {
-        super(props, context);
-        this.state = {
-            elements: this.buildElements(0, 20),
-            isInfiniteLoading: false
-        };
-    }
+    state = {
+        elements: this.buildElements(0, 20),
+        isInfiniteLoading: false
+    };
 
     buildElements(start: number, end: number) {
         var elements = [] as React.ReactElement<any>[];

types/react-lazyload/react-lazyload-tests.tsx

@@ -6,14 +6,16 @@ interface State {
 }
 
 class Normal extends React.Component<{}, State> {
-    constructor() {
-        super({});
+    static createArray = (items= 200) => {
         const arr: string[] = [];
-        for (let i = 0; i < 200; i++) {
+        for (let i = 0; i < items; i++) {
             arr.push(`${i}`);
         }
-        this.state = { arr };
+        return arr;
     }
+    state = {
+        arr: Normal.createArray()
+    };
 
     componentDidMount() {
         forceCheck();

types/react-native-datepicker/react-native-datepicker-tests.tsx

@@ -8,10 +8,7 @@ interface MyDatePickerState {
 export default class MyDatePicker extends React.Component<{}, MyDatePickerState> {
     datepicker: DatePicker | null;
 
-    constructor(props: {}) {
-        super(props);
-        this.state = {date: "2016-05-15"};
-    }
+    state = {date: "2016-05-15"};
 
     componentDidMount() {
         if (this.datepicker) {

types/react-native-drawer/react-native-drawer-tests.tsx

@@ -8,12 +8,9 @@ import {
 import Drawer from 'react-native-drawer';
 
 class DrawerTest extends React.Component<{}, {open: boolean}> {
-    constructor(props: {}) {
-      super(props);
-      this.state = {
+    state = {
         open: true
-      };
-    }
+    };
 
     render() {
         return (

types/react-native-material-ui/react-native-material-ui-tests.tsx

@@ -68,13 +68,9 @@ const DialogExample = () =>
     </Dialog>;
 
 class BottomNavigationExample extends React.Component<null, {active: string}> {
-    constructor() {
-        super(null);
-
-        this.state = {
-            active: 'today'
-        };
-    }
+    state = {
+        active: 'today'
+    };
 
     render() {
         return (

types/react-native-modalbox/react-native-modalbox-tests.tsx

@@ -23,16 +23,12 @@ class Example extends React.Component<{}, State> {
   modal4: Modal;
   modal6: Modal;
 
-  constructor() {
-    super({});
-
-    this.state = {
-      isOpen: false,
-      isDisabled: false,
-      swipeToClose: true,
-      sliderValue: 0.3
-    };
-  }
+  state = {
+    isOpen: false,
+    isDisabled: false,
+    swipeToClose: true,
+    sliderValue: 0.3
+  };
 
   onClose() {
     console.log('Modal just closed');

types/react-native-snap-carousel/react-native-snap-carousel-tests.tsx

@@ -65,10 +65,7 @@ class SnapCarouselTest extends React.Component {
 }
 
 class SnapCarouselWithPaginationTest extends React.Component<{}, {activeSlide: number}> {
-    constructor(props: {}) {
-        super(props);
-        this.state = { activeSlide: 0 };
-    }
+    state = { activeSlide: 0 };
 
     renderItem({ item }: { item: string }): React.ReactNode {
         return (

types/react-native-star-rating/react-native-star-rating-tests.tsx

@@ -6,13 +6,9 @@ interface State {
 }
 
 class GeneralStarExample extends React.Component<{}, State> {
-    constructor(props: {}) {
-        super(props);
-
-        this.state = {
-            starCount: 3.5
-        };
-    }
+    state = {
+        starCount: 3.5
+    };
 
     onStarRatingPress = (rating: number) => {
         this.setState({

types/react-native-tab-navigator/react-native-tab-navigator-tests.tsx

@@ -9,13 +9,9 @@ interface TabTestState {
 const tabBarImage = 'https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png';
 
 class TabTest extends React.Component<any, TabTestState> {
-    constructor() {
-        super({});
-
-        this.state = {
-            selectedTab: 'home'
-        };
-    }
+    state = {
+        selectedTab: 'home'
+    };
 
     render() {
         return (

types/react-native-vector-icons/react-native-vector-icons-tests.tsx

@@ -44,13 +44,9 @@ class Example extends React.Component {
 }
 
 class TabTest extends React.Component<{}, { selectedTab: string }> {
-  constructor() {
-    super({});
-
-    this.state = {
-      selectedTab: 'tab1'
-    };
-  }
+  state = {
+    selectedTab: 'tab1'
+  };
 
   render() {
     return (

types/react-onsenui/react-onsenui-tests.tsx

@@ -12,10 +12,7 @@ class AppState {
 interface AppProps {} // tslint:disable-line no-empty-interface
 
 export class App extends React.Component<AppProps, AppState> {
-    constructor(props: AppProps) {
-        super(props);
-        this.state = new AppState();
-    }
+    state = new AppState();
 
     hide() {
         this.setState({ isOpen: false });

types/react-sortable-hoc/react-sortable-hoc-tests.tsx

@@ -48,6 +48,7 @@ class SortableComponent extends React.Component<{}, SortableComponentState> {
         }
         return {width: 0, height: 0};
     }
+    state: SortableComponentState;
 
     constructor() {
         super({});

types/react-tagsinput/react-tagsinput-tests.tsx

@@ -6,10 +6,7 @@ interface StateI {
 }
 
 class Example extends React.Component<{}, StateI> {
-    constructor(props: {}) {
-        super(props);
-        this.state = {tags: []};
-    }
+    state = {tags: []};
 
     handleChange(tags: string[]) {
         this.setState({tags});

types/react-virtual-keyboard/react-virtual-keyboard-tests.tsx

@@ -6,6 +6,9 @@ export interface KbState {
 }
 
 export default class MyKeyboard extends React.Component<{}, KbState> {
+    state = {
+        textarea: ''
+    };
     onTextareaChanged = (newState: string) => {
         this.setState({ textarea: newState });
     }

types/react-virtualized/react-virtualized-tests.tsx

@@ -13,6 +13,7 @@ import {
 } from "react-virtualized";
 
 export class ArrowKeyStepperExample extends PureComponent<any, any> {
+    state: any;
     render() {
         const { mode } = this.state;
 
@@ -88,6 +89,7 @@ export class ArrowKeyStepperExample extends PureComponent<any, any> {
 import { List } from "react-virtualized";
 
 export class AutoSizerExample extends PureComponent<any, any> {
+    state: any;
     render() {
         const { list } = this.context;
         const { hideDescription } = this.state;
@@ -198,6 +200,7 @@ const GUTTER_SIZE = 3;
 const CELL_WIDTH = 75;
 
 export class CollectionExample extends PureComponent<any, any> {
+    state: any;
     _columnYMap: any;
 
     constructor(props: any, context: any) {
@@ -303,6 +306,7 @@ export class CollectionExample extends PureComponent<any, any> {
 import { ColumnSizer } from "react-virtualized";
 
 export class ColumnSizerExample extends PureComponent<any, any> {
+    state: any;
     render() {
         const { columnMaxWidth, columnMinWidth, columnCount } = this.state;
 
@@ -507,6 +511,8 @@ const STATUS_LOADING = 1;
 const STATUS_LOADED = 2;
 
 export class InfiniteLoaderExample extends PureComponent<any, any> {
+
+    state: any;
     _timeoutIds = new Set<number>();
 
     componentWillUnmount() {
@@ -613,6 +619,7 @@ export class InfiniteLoaderExample extends PureComponent<any, any> {
 }
 
 export class ListExample extends PureComponent<any, any> {
+    state: any;
     constructor(props: any, context: any) {
         super(props, context);
 
@@ -751,6 +758,8 @@ export class GridExample2 extends PureComponent<any, any> {
     _cellPositioner: Positioner;
     _masonry: Masonry;
 
+    state: any;
+
     constructor(props: any, context: any) {
         super(props, context);
 

types/reactstrap/reactstrap-tests.tsx

@@ -101,6 +101,7 @@ const Examplea = (props: any) => {
 };
 
 class AlertExample extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
 
@@ -277,6 +278,7 @@ const Example13 = (
 );
 
 class Example14 extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
 
@@ -325,6 +327,7 @@ class Example14 extends React.Component<any, any> {
 
 // ------------- Button Dropdown
 class Example15 extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
 
@@ -866,6 +869,7 @@ const Example36 = (props: any) => {
 // ------------------ Collapse
 
 class Example37 extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
     this.toggle = this.toggle.bind(this);
@@ -896,6 +900,7 @@ class Example37 extends React.Component<any, any> {
 }
 
 class Example38 extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
     this.onOpened = this.onOpened.bind(this);
@@ -940,6 +945,7 @@ class Example38 extends React.Component<any, any> {
 // ------- Dropdown
 
 class Example39 extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
 
@@ -1016,6 +1022,7 @@ const Example42 = (props: any) => (
 );
 
 class Example43 extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
 
@@ -1950,6 +1957,7 @@ const Example71 = () => {
 
 // --------------- Modal
 class ModalExample72 extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
     this.state = {
@@ -1989,6 +1997,7 @@ class ModalExample72 extends React.Component<any, any> {
 }
 
 class ModalExample73 extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
     this.state = {
@@ -2049,6 +2058,7 @@ class ModalExample73 extends React.Component<any, any> {
 }
 
 class ModalExample74 extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
     this.state = {
@@ -2106,6 +2116,7 @@ class ModalExample74 extends React.Component<any, any> {
 }
 
 class Example75 extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
 
@@ -2159,6 +2170,7 @@ class Example75 extends React.Component<any, any> {
 }
 
 class Example76 extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
 
@@ -2254,6 +2266,7 @@ class Example78 extends React.Component<any, any> {
 }
 
 class Example79 extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
 
@@ -2304,6 +2317,7 @@ class Example79 extends React.Component<any, any> {
 }
 
 class Example80 extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
 
@@ -2496,6 +2510,7 @@ class Example84 extends React.Component {
 
 // ------------------------- Popover
 class Example85 extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
 
@@ -2527,6 +2542,7 @@ class Example85 extends React.Component<any, any> {
 }
 
 class PopoverItem extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
 
@@ -2558,6 +2574,7 @@ class PopoverItem extends React.Component<any, any> {
 }
 
 class PopoverExampleMulti extends React.Component<any, {popovers: Array<{placement: string; text: string; }>}> {
+  state: {popovers: Array<{placement: string; text: string; }>};
   constructor(props: any) {
     super(props);
 
@@ -3060,6 +3077,7 @@ class Example100 extends React.Component {
 }
 
 class Example101 extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
 
@@ -3130,6 +3148,7 @@ class Example101 extends React.Component<any, any> {
 }
 
 class Example102 extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
 
@@ -3158,6 +3177,7 @@ class Example102 extends React.Component<any, any> {
 }
 
 class Example103 extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
 
@@ -3186,6 +3206,7 @@ class Example103 extends React.Component<any, any> {
 }
 
 class TooltipItem extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
 
@@ -3216,6 +3237,7 @@ class TooltipItem extends React.Component<any, any> {
 }
 
 class TooltipExampleMulti extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
 
@@ -3345,6 +3367,7 @@ class Example107 extends React.Component {
 }
 
 class Example108 extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
 
@@ -3381,6 +3404,7 @@ class Example108 extends React.Component<any, any> {
 }
 
 class Example109 extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
 
@@ -3417,7 +3441,8 @@ class Example109 extends React.Component<any, any> {
 }
 
 class Example110 extends React.Component<any, any> {
-  constructor(props: any) {
+   state: any;
+   constructor(props: any) {
     super(props);
 
     this.toggle = this.toggle.bind(this);
@@ -3453,6 +3478,7 @@ class Example110 extends React.Component<any, any> {
 }
 
 class Example111 extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
 
@@ -3489,6 +3515,7 @@ class Example111 extends React.Component<any, any> {
 }
 
 class Example112 extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
 
@@ -3540,24 +3567,25 @@ const Example113 = (props: any) => {
   };
 
 class Example114 extends React.Component<any, any> {
-private element: HTMLElement;
+    state: any;
+    private element: HTMLElement;
 
-refFn(r: HTMLElement | null) {
-    if (r) {
-        this.element = r;
+    refFn(r: HTMLElement | null) {
+        if (r) {
+            this.element = r;
+        }
     }
-}
 
-render() {
-    return (
-    <div>
-        <p>Somewhere in here is a <a href="#" ref={this.refFn}>tooltip</a>.</p>
-        <Tooltip placement="bottom-start" isOpen={this.state.tooltipOpen} target={this.element}>
-        Hello world!
-        </Tooltip>
-    </div>
-    );
-}
+    render() {
+        return (
+        <div>
+            <p>Somewhere in here is a <a href="#" ref={this.refFn}>tooltip</a>.</p>
+            <Tooltip placement="bottom-start" isOpen={this.state.tooltipOpen} target={this.element}>
+            Hello world!
+            </Tooltip>
+        </div>
+        );
+    }
 }
 
 class Example115 extends React.Component<any, any> {
@@ -3583,6 +3611,7 @@ class Example115 extends React.Component<any, any> {
 
     private animating: boolean;
 
+    state: any;
     constructor(props: any) {
       super(props);
       this.state = { activeIndex: 0 };
@@ -4202,6 +4231,7 @@ class Example121 extends React.Component<any, any> {
 }
 
 class Example122 extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
 

types/reactstrap/v4/reactstrap-tests.tsx

@@ -98,6 +98,9 @@ const Examplea = (props: any) => {
 };
 
 class AlertExample extends React.Component<any, any> {
+  state: {
+    visible: boolean
+  };
   constructor(props: any) {
     super(props);
 
@@ -274,6 +277,7 @@ const Example13 = (
 );
 
 class Example14 extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
 
@@ -322,6 +326,7 @@ class Example14 extends React.Component<any, any> {
 
 // ------------- Button Dropdown
 class Example15 extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
 
@@ -863,6 +868,7 @@ const Example36 = (props: any) => {
 // ------------------ Collapse
 
 class Example37 extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
     this.toggle = this.toggle.bind(this);
@@ -893,6 +899,7 @@ class Example37 extends React.Component<any, any> {
 }
 
 class Example38 extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
     this.onOpened = this.onOpened.bind(this);
@@ -937,6 +944,7 @@ class Example38 extends React.Component<any, any> {
 // ------- Dropdown
 
 class Example39 extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
 
@@ -1013,6 +1021,7 @@ const Example42 = (props: any) => (
 );
 
 class Example43 extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
 
@@ -1929,6 +1938,7 @@ const Example71 = () => {
 
 // --------------- Modal
 class ModalExample72 extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
     this.state = {
@@ -1968,6 +1978,7 @@ class ModalExample72 extends React.Component<any, any> {
 }
 
 class ModalExample73 extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
     this.state = {
@@ -2028,6 +2039,7 @@ class ModalExample73 extends React.Component<any, any> {
 }
 
 class ModalExample74 extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
     this.state = {
@@ -2085,6 +2097,7 @@ class ModalExample74 extends React.Component<any, any> {
 }
 
 class Example75 extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
 
@@ -2121,6 +2134,7 @@ class Example75 extends React.Component<any, any> {
 }
 
 class Example76 extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
 
@@ -2216,6 +2230,7 @@ class Example78 extends React.Component<any, any> {
 }
 
 class Example79 extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
 
@@ -2266,6 +2281,7 @@ class Example79 extends React.Component<any, any> {
 }
 
 class Example80 extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
 
@@ -2458,6 +2474,7 @@ class Example84 extends React.Component {
 
 // ------------------------- Popover
 class Example85 extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
 
@@ -2489,6 +2506,7 @@ class Example85 extends React.Component<any, any> {
 }
 
 class PopoverItem extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
 
@@ -2520,6 +2538,7 @@ class PopoverItem extends React.Component<any, any> {
 }
 
 class PopoverExampleMulti extends React.Component<any, {popovers: Array<{placement: string; text: string; }>}> {
+  state: {popovers: Array<{placement: string; text: string; }>};
   constructor(props: any) {
     super(props);
 
@@ -3022,6 +3041,7 @@ class Example100 extends React.Component {
 }
 
 class Example101 extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
 
@@ -3092,6 +3112,7 @@ class Example101 extends React.Component<any, any> {
 }
 
 class Example102 extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
 
@@ -3120,6 +3141,7 @@ class Example102 extends React.Component<any, any> {
 }
 
 class Example103 extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
 
@@ -3148,6 +3170,7 @@ class Example103 extends React.Component<any, any> {
 }
 
 class TooltipItem extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
 
@@ -3178,6 +3201,7 @@ class TooltipItem extends React.Component<any, any> {
 }
 
 class TooltipExampleMulti extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
 
@@ -3307,6 +3331,7 @@ class Example107 extends React.Component {
 }
 
 class Example108 extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
 
@@ -3343,6 +3368,7 @@ class Example108 extends React.Component<any, any> {
 }
 
 class Example109 extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
 
@@ -3379,6 +3405,7 @@ class Example109 extends React.Component<any, any> {
 }
 
 class Example110 extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
 
@@ -3415,6 +3442,7 @@ class Example110 extends React.Component<any, any> {
 }
 
 class Example111 extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
 
@@ -3451,6 +3479,7 @@ class Example111 extends React.Component<any, any> {
 }
 
 class Example112 extends React.Component<any, any> {
+  state: any;
   constructor(props: any) {
     super(props);
 

types/recharts/recharts-tests.tsx

@@ -13,12 +13,9 @@ interface ComponentState {
 }
 
 class Component extends React.Component<{}, ComponentState> {
-    constructor(props: any) {
-        super(props);
-        this.state = {
-            activeIndex: 0
-        };
-    }
+    state = {
+        activeIndex: 0
+    };
 
     private clickHandler(...args: any[]) {
         console.log(`Handling a click on a chart: ${JSON.stringify(args)}`);