Revision history [back]

To incorporate TypeScript into an already existing create-react-app application, you can follow these steps:

1. Install TypeScript and the required dependencies:

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

1. Create a tsconfig.json file in the root directory of your project. This file determines how TypeScript transpiles your code. Here's a simple example of what could go in your tsconfig.json file:

{
  "compilerOptions": {
    "target": "es5", // This is the version of JavaScript you are targeting
    "module": "commonjs",
    "jsx": "react",
    "sourceMap": true,
    "strict": true // Enables strict type-checking
  },
  "include": ["src"] // This tells TypeScript which files and directories to include in transpiling
}

1. Rename your .js files to .tsx files. This will ease the transition from JavaScript to TypeScript.

2. Update your App.tsx file to include type annotations for your props and state. Here's an example of what your App.tsx file could look like:

import React from 'react';

interface AppProps {
  name: string;
}

interface AppState {
  count: number;
}

class App extends React.Component<AppProps, AppState> {
  state = {
    count: 0,
  };

  render() {
    const { name } = this.props;
    const { count } = this.state;

    return (
      <div>
        <h1>Hello, {name}!</h1>
        <p>You clicked {count} times</p>
        <button onClick={() => this.setState({ count: count + 1 })}>Click me</button>
      </div>
    );
  }
}

export default App;

1. Update your index.tsx file to import and render your App component. Here's an example of what your index.tsx file could look like:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App name="TypeScript" />
  </React.StrictMode>,
  document.getElementById('root')
);

1. Start your app using the following command:

npm start

That's it! Your create-react-app application is now using TypeScript.