From 13701382c0d599dbb87ea70b45e4e60dec8bd735 Mon Sep 17 00:00:00 2001 From: Irisloverain <56682095+Irisloverain@users.noreply.github.com> Date: Thu, 7 Sep 2023 21:37:18 +0800 Subject: [PATCH] =?UTF-8?q?=E5=B0=8E=E5=85=A5TypeScript=20(#110)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Enya <26k1234o3@gmail.com> --- packages/frontend/js/components/App.jsx | 2 + packages/frontend/js/components/Hello.tsx | 17 +++++ packages/frontend/package-lock.json | 85 +++++++++++++++++++++-- packages/frontend/package.json | 5 ++ packages/frontend/tsconfig.json | 19 +++++ packages/frontend/webpack.config.js | 7 +- 6 files changed, 128 insertions(+), 7 deletions(-) create mode 100644 packages/frontend/js/components/Hello.tsx create mode 100644 packages/frontend/tsconfig.json diff --git a/packages/frontend/js/components/App.jsx b/packages/frontend/js/components/App.jsx index 18b750b8..790f624b 100644 --- a/packages/frontend/js/components/App.jsx +++ b/packages/frontend/js/components/App.jsx @@ -1,9 +1,11 @@ import getAPI from '../api/getAPI' +import Hello from './Hello' const App = () => { const { data } = getAPI() return ( <> +
title:{data.msg}
) diff --git a/packages/frontend/js/components/Hello.tsx b/packages/frontend/js/components/Hello.tsx new file mode 100644 index 00000000..becc1b6c --- /dev/null +++ b/packages/frontend/js/components/Hello.tsx @@ -0,0 +1,17 @@ +// src/components/Hello.tsx + +import React from 'react' + +interface Props { + name: string +} + +const Hello: React.FC = ({ name }) => { + return ( +
+

Hello, {name}!

+
+ ) +} + +export default Hello diff --git a/packages/frontend/package-lock.json b/packages/frontend/package-lock.json index 27d0da05..8d480d19 100644 --- a/packages/frontend/package-lock.json +++ b/packages/frontend/package-lock.json @@ -17,6 +17,9 @@ "react-redux": "^8.1.0" }, "devDependencies": { + "@types/prop-types": "^15.7.5", + "@types/react": "^18.2.21", + "@types/react-dom": "^18.2.7", "clean-webpack-plugin": "^4.0.0", "css-loader": "^6.8.1", "cypress": "^12.14.0", @@ -44,6 +47,8 @@ "sass": "^1.63.4", "sass-loader": "^13.3.2", "style-loader": "^3.3.3", + "ts-loader": "^9.4.4", + "typescript": "^5.2.2", "webpack": "^5.87.0", "webpack-cli": "^5.1.4", "webpack-dev-server": "^4.15.1" @@ -1016,15 +1021,24 @@ "dev": true }, "node_modules/@types/react": { - "version": "18.2.12", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.12.tgz", - "integrity": "sha512-ndmBMLCgn38v3SntMeoJaIrO6tGHYKMEBohCUmw8HoLLQdRMOIGXfeYaBTLe2lsFaSB3MOK1VXscYFnmLtTSmw==", + "version": "18.2.21", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.21.tgz", + "integrity": "sha512-neFKG/sBAwGxHgXiIxnbm3/AAVQ/cMRS93hvBpg8xYRbeQSPVABp9U2bRnPf0iI4+Ucdv3plSxKK+3CW2ENJxA==", "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", "csstype": "^3.0.2" } }, + "node_modules/@types/react-dom": { + "version": "18.2.7", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.7.tgz", + "integrity": "sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==", + "devOptional": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/retry": { "version": "0.12.0", "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz", @@ -8723,6 +8737,25 @@ "node": ">=0.8" } }, + "node_modules/ts-loader": { + "version": "9.4.4", + "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.4.4.tgz", + "integrity": "sha512-MLukxDHBl8OJ5Dk3y69IsKVFRA/6MwzEqBgh+OXMPB/OD01KQuWPFd1WAQP8a5PeSCAxfnkhiuWqfmFJzJQt9w==", + "dev": true, + "dependencies": { + "chalk": "^4.1.0", + "enhanced-resolve": "^5.0.0", + "micromatch": "^4.0.0", + "semver": "^7.3.4" + }, + "engines": { + "node": ">=12.0.0" + }, + "peerDependencies": { + "typescript": "*", + "webpack": "^5.0.0" + } + }, "node_modules/tsconfig-paths": { "version": "3.14.2", "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz", @@ -8822,6 +8855,19 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/typescript": { + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz", + "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==", + "dev": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=14.17" + } + }, "node_modules/unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", @@ -10143,15 +10189,24 @@ "dev": true }, "@types/react": { - "version": "18.2.12", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.12.tgz", - "integrity": "sha512-ndmBMLCgn38v3SntMeoJaIrO6tGHYKMEBohCUmw8HoLLQdRMOIGXfeYaBTLe2lsFaSB3MOK1VXscYFnmLtTSmw==", + "version": "18.2.21", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.21.tgz", + "integrity": "sha512-neFKG/sBAwGxHgXiIxnbm3/AAVQ/cMRS93hvBpg8xYRbeQSPVABp9U2bRnPf0iI4+Ucdv3plSxKK+3CW2ENJxA==", "requires": { "@types/prop-types": "*", "@types/scheduler": "*", "csstype": "^3.0.2" } }, + "@types/react-dom": { + "version": "18.2.7", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.7.tgz", + "integrity": "sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==", + "devOptional": true, + "requires": { + "@types/react": "*" + } + }, "@types/retry": { "version": "0.12.0", "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz", @@ -15769,6 +15824,18 @@ "punycode": "^2.1.1" } }, + "ts-loader": { + "version": "9.4.4", + "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.4.4.tgz", + "integrity": "sha512-MLukxDHBl8OJ5Dk3y69IsKVFRA/6MwzEqBgh+OXMPB/OD01KQuWPFd1WAQP8a5PeSCAxfnkhiuWqfmFJzJQt9w==", + "dev": true, + "requires": { + "chalk": "^4.1.0", + "enhanced-resolve": "^5.0.0", + "micromatch": "^4.0.0", + "semver": "^7.3.4" + } + }, "tsconfig-paths": { "version": "3.14.2", "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz", @@ -15849,6 +15916,12 @@ "is-typed-array": "^1.1.9" } }, + "typescript": { + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz", + "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==", + "dev": true + }, "unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", diff --git a/packages/frontend/package.json b/packages/frontend/package.json index f165272f..0a447fd8 100644 --- a/packages/frontend/package.json +++ b/packages/frontend/package.json @@ -13,6 +13,9 @@ "author": "", "license": "ISC", "devDependencies": { + "@types/prop-types": "^15.7.5", + "@types/react": "^18.2.21", + "@types/react-dom": "^18.2.7", "clean-webpack-plugin": "^4.0.0", "css-loader": "^6.8.1", "cypress": "^12.14.0", @@ -40,6 +43,8 @@ "sass": "^1.63.4", "sass-loader": "^13.3.2", "style-loader": "^3.3.3", + "ts-loader": "^9.4.4", + "typescript": "^5.2.2", "webpack": "^5.87.0", "webpack-cli": "^5.1.4", "webpack-dev-server": "^4.15.1" diff --git a/packages/frontend/tsconfig.json b/packages/frontend/tsconfig.json new file mode 100644 index 00000000..c3c22c93 --- /dev/null +++ b/packages/frontend/tsconfig.json @@ -0,0 +1,19 @@ +{ + "compilerOptions": { + "target": "es2015", // 目標編譯到的ECMAScript版本（這裡是ES6） + "lib": ["dom", "dom.iterable", "esnext"], // 要包含的JavaScript標準庫 + "jsx": "react", // 設定React JSX語法支援 + "module": "esnext", // ES模組 + "moduleResolution": "node", // 模組解析策略，使用Node.js解析 + "strict": true, // 啟用嚴格模式，提供更多的類型檢查 + "esModuleInterop": true, // 啟用導入/導出Interop支援 + "skipLibCheck": true, // 跳過檢查宣告文件的型別檢查 + "forceConsistentCasingInFileNames": true, // 強制文件名大小寫一致 + "noEmit": false, // 不生成任何輸出文件，用於純類型檢查 + "strictNullChecks": true, // 啟用嚴格的空值檢查 + "noImplicitAny": true, // 不允許隱式的any型別 + "allowJs": true // 允許編譯JavaScript文件（用於混合專案） + }, + "include": ["js/**/*.ts", "js/**/*.tsx", "js/*.ts"], // TypeScript編譯包括的文件 + "exclude": ["node_modules"] // TypeScript編譯排除的文件夾 +} diff --git a/packages/frontend/webpack.config.js b/packages/frontend/webpack.config.js index e644416b..8a409bb4 100644 --- a/packages/frontend/webpack.config.js +++ b/packages/frontend/webpack.config.js @@ -16,6 +16,11 @@ module.exports = function () { }, module: { rules: [ + { + test: /\.(js|jsx|ts|tsx)$/, + loader: 'ts-loader', + exclude: /node_modules/ + }, { test: /\.(js|jsx)$/, loader: 'esbuild-loader', @@ -57,7 +62,7 @@ module.exports = function () { ] }, resolve: { - extensions: ['.js', '.jsx'] + extensions: ['.js', '.jsx', '.ts', '.tsx'] }, plugins: [ // 提取CSS文件, 和style-loader無法共存