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

comments powered by Disqus
Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.