[fix] #26 Typescript導入 Vscode側で import Errorが起きる

.babelrc

@@ -1,10 +1,10 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "presets": ["@babel/preset-env", "@babel/preset-react","@babel/preset-typescript"],
   "plugins": [
     [
       "@babel/plugin-transform-react-jsx",
       {
-        "runtime": "automatic"    /* import React を自動化 */
+        "runtime": "automatic"
       }
     ]
   ]

package.json

@@ -2,11 +2,14 @@
   "name": "battle-vision",
   "version": "1.0.0",
   "description": "ポケモンのパーティ編成画面をブラウザで管理出来るツールです",
-  "main": "index.jsx",
+  "main": "test.tsx",
   "scripts": {
-    "build": "webpack --mode development",
-    "start": "webpack serve --mode development",
-    "build:pro": "webpack --mode production"
+    "build": "webpack --config ./webpack.config.dev.js",
+    "build:test": "webpack --config ./webpack.config.test.js",
+    "start": "webpack serve --config ./webpack.config.dev.js",
+    "start:test": "webpack serve --config ./webpack.config.test.js",
+    "build:pro": "webpack --mode production",
+    "tsc": "tsc"
   },
   "author": "",
   "license": "ISC",
@@ -20,20 +23,28 @@
     "@babel/plugin-transform-react-jsx": "^7.22.3",
     "@babel/preset-env": "^7.22.4",
     "@babel/preset-react": "^7.22.3",
+    "@babel/preset-typescript": "^7.21.5",
+    "@types/lodash": "^4.14.195",
+    "@types/node": "^20.2.5",
     "babel-loader": "^9.1.2",
     "css-loader": "^6.8.1",
     "file-loader": "^6.2.0",
     "html-loader": "^4.2.0",
     "html-webpack-plugin": "^5.5.1",
+    "lodash": "^4.17.21",
     "mini-css-extract-plugin": "^2.7.6",
     "sass": "^1.62.1",
     "sass-loader": "^13.3.1",
+    "ts-loader": "^9.4.3",
+    "typescript": "^5.1.3",
     "url-loader": "^4.1.1",
     "webpack": "^5.85.0",
     "webpack-cli": "^5.1.1",
     "webpack-dev-server": "^4.15.0"
   },
   "dependencies": {
+    "@types/react": "^18.2.9",
+    "@types/react-dom": "^18.2.4",
     "axios": "^1.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

src/frontend/ts/decs.d.ts

@@ -0,0 +1,3 @@
+declare module "react";
+declare module "react-dom";
+declare module "react/jsx-runtime"

src/frontend/ts/test.tsx

@@ -0,0 +1,11 @@
+import * as _ from 'lodash';
+
+function component() {
+  const element = document.createElement('div');
+
+  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
+  console.log(element);
+  return element;
+}
+
+document.body.appendChild(component());

tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "noImplicitAny": true,
+    "module": "es6",
+    "target": "es5",
+    "jsx": "react",
+    "allowJs": true,
+    "moduleResolution": "node",
+    "types": [
+      "node"
+    ],
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true
+  }
+}

webpack.config.js → webpack.config.dev.js

@@ -8,7 +8,7 @@ const HTML_WEBPACK_PLUGIN = require('html-webpack-plugin');
 const MINI_CSS_EXTRACT_PLUGIN = require('mini-css-extract-plugin');
 
 module.exports = {
-  entry: './src/frontend/js/index.jsx',
+  entry: './src/frontend/ts/index.tsx',
   output: {
     // jsx は対応していない
     //filename: '[name]_[hash].js',
@@ -21,9 +21,11 @@ module.exports = {
       {
         test: /\.js?x$/,
         exclude: /node_modules/,
-        use: {
-          loader: 'babel-loader'
-        }
+        loader: 'babel-loader'
+      },
+      {
+        test: /\.ts?x$/,
+        use: 'ts-loader'
       },
       {
         test: /\.html$/,
@@ -48,7 +50,7 @@ module.exports = {
     ]
   },
   resolve: {
-    extensions: [".js",".jsx"]
+    extensions: [".ts",".tsx",".js",".jsx",".json"]
   },
   plugins: [
     new HTML_WEBPACK_PLUGIN({
@@ -63,5 +65,7 @@ module.exports = {
     static: {
       directory: PATH.join(__dirname, DIST_PATH)
     }
-  }
+  },
+  target: ["web", "es5"],
+  mode: "development"
 };

webpack.config.test.js

@@ -0,0 +1,43 @@
+module.exports = {
+  // モード値を production に設定すると最適化された状態で、
+  // development に設定するとソースマップ有効でJSファイルが出力される
+  mode: "development",
+
+  // メインとなるJavaScriptファイル（エントリーポイント）
+  entry: {
+    main: {
+      import: './src/frontend/ts/test.tsx',
+      dependOn: 'shared'
+    },
+    shared: ['lodash']
+  },
+  // ファイルの出力設定
+  output: {
+    //  出力ファイルのディレクトリ名
+    path: `${__dirname}/dist`,
+    // 出力ファイル名
+    filename: "[name].js",
+  },
+  module: {
+    rules: [
+      {
+        // 拡張子 .ts もしくは .tsx の場合
+        test: /\.tsx?$/,
+        // TypeScript をコンパイルする
+        use: "ts-loader",
+        exclude: /node_modules/
+      },
+    ],
+  },
+  // import 文で .ts や .tsx ファイルを解決するため
+  resolve: {
+    extensions: [".ts", ".tsx", ".js", ".json"],
+  },
+  // ES5(IE11等)向けの指定
+  target: ["web", "es5"],
+  devServer: {
+    static: {
+      directory: `${__dirname}/dist`
+    }
+  },
+};