Getting started with TypeScript, WebPack, and React

typescript Sep 6, 2017

We've been integrating TypeScript more and more into our workflow at Lonely Planet.

I wanted to just quickly share how easy it is to get started working with TypeScript and Webpack!

It takes a very simple webpack.config...

module.exports = {
  entry: "./src/index.tsx",
  devtool: "source-map",
  output: {
    filename: "./dist/bundle.js",
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".jsx"],
  },
  module: {
    rules: [{
      test: /\.tsx?$/,
      loader: "ts-loader"
    }],
  },
};

And a few npm installs...

"devDependencies": {
  "@types/react": "^16.0.5",
  "@types/react-dom": "^15.5.4",
  "react": "^15.6.1",
  "react-dom": "^15.6.1",
  "ts-loader": "^2.3.4",
  "typescript": "^2.5.2",
  "webpack": "^3.5.5",
  "webpack-dev-server": "^2.7.1"
}

Then start writing TypeScript and React!

Full code of the starter at https://github.com/jcreamer898/typescript-webpack-react.

Tags