導入TypeScript (#110)

Co-authored-by: Enya <[email protected]>
Game-as-a-Service · Sep 7, 2023 · 1370138 · 1370138
1 parent 9fb653d
commit 1370138
Show file tree

Hide file tree

Showing 6 changed files with 128 additions and 7 deletions.
diff --git 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 (
     <>
+      <Hello></Hello>
       <div>title:{data.msg}</div>
     </>
   )

diff --git a/packages/frontend/js/components/Hello.tsx 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<Props> = ({ name }) => {
+  return (
+    <div>
+      <h1>Hello, {name}!</h1>
+    </div>
+  )
+}
+
+export default Hello
diff --git a/packages/frontend/package-lock.json b/packages/frontend/package-lock.json
diff --git 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
@@ -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
@@ -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無法共存