Một ví dụ sử dụng typecsript && reactjs full (ok)

C:\Users\Administrator\Desktop\react.js\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">
        <p className="App-intro">
          <CounterOutput  counter={this.state.counterValue} onClick={this.counterHandler} />
        </p>
      </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\react.js\src\CounterOutput.tsx

import * as React from 'react';
import './App.css';
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;

C:\Users\Administrator\Desktop\react.js\tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "build/dist",
    "module": "esnext",
    "target": "es5",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "importHelpers": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ]
}

C:\Users\Administrator\Desktop\react.js\tsconfig.prod.json

{
  "extends": "./tsconfig.json"
}

C:\Users\Administrator\Desktop\react.js\tsconfig.test.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "commonjs"
  }
}

C:\Users\Administrator\Desktop\react.js\tslint.json

{
  "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
  "linterOptions": {
    "exclude": [
      "config/**/*.js",
      "node_modules/**/*.ts",
      "coverage/lcov-report/*.js"
    ]
  },
  "rules": {
    "jsx-no-lambda": false
  }
}