feat: 添加typescript

package.json

@@ -23,6 +23,10 @@
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/preset-env": "^7.5.5",
     "@babel/preset-react": "^7.0.0",
+    "@types/loadable__component": "^5.10.0",
+    "@types/react": "^16.9.23",
+    "@types/react-dom": "^16.9.5",
+    "@types/react-router-dom": "^5.1.3",
     "autoprefixer": "^9.6.1",
     "babel-loader": "^8.0.6",
     "clean-webpack-plugin": "^3.0.0",
@@ -34,6 +38,9 @@
     "less-loader": "^5.0.0",
     "mini-css-extract-plugin": "^0.8.0",
     "postcss-loader": "^3.0.0",
+    "source-map-loader": "^0.2.4",
+    "ts-loader": "^6.2.1",
+    "typescript": "^3.8.2",
     "webpack": "^4.39.3",
     "webpack-cli": "^3.3.7",
     "webpack-dev-server": "^3.8.0"

src/index.js → src/index.tsx

@@ -14,7 +14,7 @@ function App() {
       <BrowserRouter basename={ basename }>
         <Switch>
               {
-                routes.map((route, index) => (
+                routes.map((route:any, index) => (
                   <Route path={ route.path } key={ index } render={ props => (
                     <route.component {...props} routes={route.routes} />
                   )} />
@@ -27,6 +27,6 @@ function App() {
 }
 
 ReactDOM.render(
-	<App />,
-	document.getElementById('app'),
+  <App />,
+  document.getElementById('app') as HTMLElement,
 )

src/router.js → src/router.ts

@@ -1,13 +1,13 @@
-import loadable from "@loadable/component"
+import loadable from '@loadable/component'
 
 const routes = [
   {
     path: '/hello',
-    component: loadable(() => import(/* webpackChunkName: "hello" */ './views/Hello.jsx')),
+    component: loadable(() => import(/* webpackChunkName: "hello" */ './views/Hello')),
   },
   {
     path: '/about',
-    component: loadable(() => import(/* webpackChunkName: "about" */ './views/About.jsx')),
+    component: loadable(() => import(/* webpackChunkName: "about" */ './views/About')),
   },
 ]
 

src/views/About.jsx → src/views/About.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Link } from "react-router-dom"
+import { Link } from 'react-router-dom'
 
 export default function About() {
     return (

tsconfig.json

@@ -0,0 +1,16 @@
+{
+    "compilerOptions": {
+        "outDir": "./dist/",
+        "sourceMap": true,
+        "strict": true,
+        "noImplicitReturns": true,
+        "noImplicitAny": true,
+        "allowSyntheticDefaultImports": true,
+        "module": "ESNext",
+        "moduleResolution": "node",
+        "target": "ES5",
+        "jsx": "react",
+        "allowJs": true
+    },
+    "include": ["./src/**/*"]
+}

webpack.config.js

@@ -44,8 +44,9 @@ if (IS_PRODUCTION) {
 
 module.exports = {
   mode: IS_PRODUCTION ? 'production' : 'development',
+  devtool: 'source-map',
   entry: {
-    entry: `${appDirName}/src/index.js`,
+    entry: `${appDirName}/src/index.tsx`,
   },
 	devServer: {
     contentBase: `${appDirName}/dist`,
@@ -64,6 +65,7 @@ module.exports = {
       '@': appDirName + '/src/',
       '@@': appDirName,
     },
+    extensions: ['.wasm', '.mjs', '.js', '.json', '.ts', '.tsx'],
   },
 	optimization: {
 		splitChunks: {
@@ -82,7 +84,21 @@ module.exports = {
 				test: /\.(js|jsx)$/,
 				exclude: /(node_modules|bower_components)/,
 				loader: 'babel-loader',
-			},
+      },
+      {
+        test: /\.ts(x?)$/,
+        exclude: /node_modules/,
+        use: [
+            {
+              loader: 'ts-loader',
+            },
+        ],
+      },
+      {
+          enforce: "pre",
+          test: /\.js$/,
+          loader: 'source-map-loader',
+      },
       {
 				test: /\.(less|css)$/,
 				use: [