Given typescriptreact (html end tags):
  <div>
  name="cat"
  value={value}
  onclick={() => {
  console.log('hello');
  }}
  onremove={() => console.log('bye')}
  </div>

Do (indent the block):
  gg=G

Expect typescriptreact indented block:
  <div>
  	name="cat"
  	value={value}
  	onclick={() => {
  		console.log('hello');
  	}}
  	onremove={() => console.log('bye')}
  </div>

Given typescriptreact (badly indented component):
  class MyComponent {
  	public render() {
  	return (
  	<Table disableHeader={false}
  		key1="123123"
  		key2="423123"
  	headerHeight={50}
  	rowCount={this.state.data.length}
  	ref="Table"
  	rowGetter={(row) => this.state.data[row.index]}
  	rowHeight={30}>
  	<Column
  	label="Age"
  		rowHeight={30}
  	width={90}
  	height={100} />
  	<Column
  	width={210}
  	label="Title"
  	height={100}
  	/>
  	<Column
  	width={210}
  		label="Title"
  	height={100} />

  	</Table>
  	);
  		}
  }

Do (indent the block):
  gg=G

Expect typescriptreact indented blocks:
  class MyComponent {
  	public render() {
  		return (
  			<Table disableHeader={false}
  				key1="123123"
  				key2="423123"
  				headerHeight={50}
  				rowCount={this.state.data.length}
  				ref="Table"
  				rowGetter={(row) => this.state.data[row.index]}
  				rowHeight={30}>
  				<Column
  					label="Age"
  					rowHeight={30}
  					width={90}
  					height={100} />
  				<Column
  					width={210}
  					label="Title"
  					height={100}
  				/>
  				<Column
  					width={210}
  					label="Title"
  					height={100} />

  			</Table>
  		);
  	}
  }

Given typescriptreact (badly indented component + non tsx):
    interface MyComponentProps {
  first: string;
    second: boolean;
             third: {
                [key: string]: string | number;
        count: number;
                };
        }

  class MyComponent {
  	public render() {
  	return (
  	<Table disableHeader={false}
  		key1="123123"
  		key2="423123"
  	headerHeight={50}
  	rowCount={this.state.data.length}
  	ref="Table"
  	rowGetter={(row) => this.state.data[row.index]}
  	rowHeight={30}>
  	<Column
  	label="Age"
  		rowHeight={30}
  	width={90}
  	height={100} />
  	<Column
  	width={210}
  	label="Title"
  	height={100}
  	/>
  	<Column
  	width={210}
  		label="Title"
  	height={100} />

  	</Table>
  	);
  		}
  }

Do (indent the block):
  gg=G

Expect typescriptreact indented blocks:
  interface MyComponentProps {
  	first: string;
  	second: boolean;
  	third: {
  		[key: string]: string | number;
  		count: number;
  	};
  }

  class MyComponent {
  	public render() {
  		return (
  			<Table disableHeader={false}
  				key1="123123"
  				key2="423123"
  				headerHeight={50}
  				rowCount={this.state.data.length}
  				ref="Table"
  				rowGetter={(row) => this.state.data[row.index]}
  				rowHeight={30}>
  				<Column
  					label="Age"
  					rowHeight={30}
  					width={90}
  					height={100} />
  				<Column
  					width={210}
  					label="Title"
  					height={100}
  				/>
  				<Column
  					width={210}
  					label="Title"
  					height={100} />

  			</Table>
  		);
  	}
  }