typescript w/o babel example

Author: theKashey

examples/typescript-no-babel/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["env", "react"],
+  "plugins": ["transform-class-properties"]
+}

examples/typescript-no-babel/.gitignore

@@ -0,0 +1 @@
+node_modules

examples/typescript-no-babel/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "hot-pure-typescript",
+  "version": "1.0.0",
+  "license": "MIT",
+  "scripts": {
+    "start": "webpack-dev-server --hot"
+  },
+  "devDependencies": {
+    "awesome-typescript-loader": "^3.4.1",
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.1",
+    "html-webpack-plugin": "^2.30.1",
+    "typescript": "^2.6.2",
+    "webpack": "^3.10.0",
+    "webpack-dev-server": "^2.9.7"
+  },
+  "dependencies": {
+    "@types/react": "^16.0.31",
+    "@types/react-dom": "^16.0.3",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-hot-loader": "^4.0.1"
+  }
+}

examples/typescript-no-babel/src/App.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react'
+import { hot } from 'react-hot-loader'
+import Counter from './Counter'
+
+const App = () => (
+  <h1>
+    Hello, world!<br />
+    You can update this text, and it will work
+    <Counter />
+  </h1>
+)
+
+export default hot(module)(App)

examples/typescript-no-babel/src/Counter.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react'
+
+class Counter extends React.Component<{}, { count: number }> {
+  interval: number;
+
+  constructor(props : any) {
+    super(props)
+    this.state = { count: 0 }
+  }
+
+  componentDidMount() {
+    this.interval = window.setInterval(
+      () => this.setState(prevState => ({ count: prevState.count + 1 })),
+      200,
+    )
+  }
+
+  generateString1() {
+    // you can update this method, and it will work
+    return "1";
+  }
+
+  generateString2 = ()  => {
+    // this one will not
+    return "1";
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval)
+  }
+
+  render() {
+    return <span>{this.state.count} - {this.generateString1()} - {this.generateString2()}</span>
+  }
+}
+
+export default Counter

examples/typescript-no-babel/src/index.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react'
+import { render } from 'react-dom'
+import App from './App'
+
+const root = document.createElement('div')
+document.body.appendChild(root)
+
+render(<App />, root)

examples/typescript-no-babel/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "sourceMap": true,
+    "noImplicitAny": true,
+    "module": "commonjs",
+    "target": "es6",
+    "jsx": "react"
+  },
+  "include": ["./src/**/*"]
+}

examples/typescript-no-babel/webpack.config.babel.js

@@ -0,0 +1,24 @@
+/* eslint-disable */
+const path = require('path')
+const webpack = require('webpack')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+  entry: ['./src/index'],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: ['awesome-typescript-loader'],
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.jsx'],
+  },
+  plugins: [new HtmlWebpackPlugin(), new webpack.NamedModulesPlugin()],
+}