😆Nhận thấy dùng npx create-react-app test2 --template typescrip chạy không bị lỗi (ok)

https://create-react-app.dev/docs/getting-started

Getting Started | Create React App

C:\Users\Administrator\Desktop\test2\src\App.tsx

import * as React from 'react';
import './App.css';
import CounterOutput, { ECounterHandlers } from './CounterOutput';
interface IAppProps { [propName: string]: any }
interface IAppState {
  counterValue: number;
}
class App extends React.Component<IAppProps, IAppState> {
  public state = { counterValue: 0 }; // State is required to be public.
  public render() {
    return (
      <div className="App">
        <CounterOutput counter={this.state.counterValue} onClick={this.counterHandler} />
      </div>
    );
  }
  private counterHandler = (mode: ECounterHandlers) => {
    this.setState(prevState => {
      switch (mode) {
        case ECounterHandlers.Dec:
          return { counterValue: prevState.counterValue - 1 }
        case ECounterHandlers.Inc:
          return { counterValue: prevState.counterValue + 1 }
      }
    });
  }
}
export default App;

C:\Users\Administrator\Desktop\test2\src\CounterOutput.tsx

export enum ECounterHandlers {
  Inc,
  Dec
}
interface ICounterOutputProps {
  counter: number;
  onClick: (mode: ECounterHandlers) => void;
}
const counterOutput = (props: ICounterOutputProps) => {
  return (
    <div style={{ textAlign: 'center' }}>
      <p className='Counter'>{props.counter}</p>
      <button onClick={() => props.onClick(ECounterHandlers.Dec)} className='CounterButton'>Decrement</button>
      <button onClick={() => props.onClick(ECounterHandlers.Inc)} className='CounterButton'>Increment</button>
    </div>
  );
}
export default counterOutput;