At some point in your development, you will want to write in TypeScript. Luckily, we know that TypeScript is just another file format, and our webpack configuration can easily handle it.
First, we'll need the types for react, so let's do the following:
This way, TypeScript can resolve types for React.
npm install --save-dev @types/react @types/react-dom
Next, let's install our TypeScript loader in webpack. We will use ts-loader. To use it, we also need to have typescript installed (typescript provides us with the "tsc" command that can turn any JavaScript file into a JavaScript file; ts-loader uses this "tsc" command internally).
npm install --save-dev ts-loader typescript.
Next, we tell webpack how to resolve files with a .ts or .tsx extension like so:
...
{
test:/\.(ts|tsx)$/,
include: path.resolve('./'),
loader: 'ts-loader',
exclude: /node_modules/
}
...
Finally, we add a tsconfig.json to the top-level of our project, next to our webpack.config.js. I will not get super deep into this configuration file, but do know that it is what your tsc command (and ts-loader internally) uses to process your TypeScript files. It is infinitely configurable, but that is a talk for another day.