typescript init

config/webpack.common.config.js

@@ -2,16 +2,24 @@ const path = require('path');
 
 module.exports = {
   entry: {
-    index: './src/index.js',
+    index: './src/index.tsx',
     framework: ['react', 'react-dom'],
   },
   output: {
     filename: 'js/bundle.js',
     path: path.resolve(__dirname, '../dist'),
   },
-
+  devtool: 'source-map',
+  resolve: {
+    // Add '.ts' and '.tsx' as resolvable extensions.
+    extensions: ['.ts', '.tsx', '.js', '.json'],
+  },
   module: {
     rules: [
+      {
+        test: /\.tsx?$/,
+        loader: 'awesome-typescript-loader',
+      },
       {
         test: /\.(js|jsx)$/,
         use: 'babel-loader',

package.json

@@ -11,6 +11,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@types/react": "^16.9.34",
+    "@types/react-dom": "^16.9.7",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"
   },
@@ -19,6 +21,7 @@
     "@babel/preset-env": "^7.9.6",
     "@babel/preset-react": "^7.9.4",
     "autoprefixer": "^9.7.6",
+    "awesome-typescript-loader": "^5.2.1",
     "babel-loader": "^8.1.0",
     "clean-webpack-plugin": "^3.0.0",
     "css-loader": "^3.5.3",
@@ -29,7 +32,9 @@
     "mini-css-extract-plugin": "^0.9.0",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
     "postcss-loader": "^3.0.0",
+    "source-map-loader": "^0.2.4",
     "style-loader": "^1.2.1",
+    "typescript": "^3.8.3",
     "uglifyjs-webpack-plugin": "^2.2.0",
     "url-loader": "^4.1.0",
     "webpack": "^4.43.0",

src/app.jsx → src/app.tsx

@@ -1,15 +1,21 @@
-import React from 'react';
+import * as React from 'react';
 import './app.less';
 import background from './images/background.jpg';
+// const background = require('./images/background.jpg');
+import { Hello } from './views/Hello';
 
 function App() {
-  console.log(background);
-
+  // console.log(background);
+  console.log(8888888);
   return (
     <div className="App">
       <h1>I am changed</h1>
       <div>{background}</div>
+      <h2>14</h2>
       <img className="background" src={background} alt="" />
+      <div>
+        <Hello compiler="TypeScript" framework="React" />
+      </div>
     </div>
   );
 }

src/index.js

@@ -1,5 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './app.jsx';
-
-ReactDOM.render(<App />, document.getElementById('root'));

src/index.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import App from './app';
+
+ReactDOM.render(<App />, document.getElementById('root'));

src/typings.d.ts

@@ -0,0 +1,4 @@
+declare module '*.png';
+declare module '*.jpg';
+declare module '*.json';
+declare module '*.svg';

src/views/hello.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+export interface HelloProps {
+  compiler: string;
+  framework: string;
+}
+
+export class Hello extends React.Component<HelloProps, {}> {
+  render() {
+    return (
+      <h1>
+        Hello from {this.props.compiler} and {this.props.framework}!
+      </h1>
+    );
+  }
+}

tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "jsx": "react",
+    "module": "commonjs",
+    "noImplicitAny": true,
+    "outDir": "./build/",
+    "preserveConstEnums": true,
+    "removeComments": true,
+    "sourceMap": true,
+    "target": "es5"
+  },
+  "include": ["./src/**/*"]
+}