chore: add typescript to project (#42)

* add typescript * add typescript * fix * fix * fix * add eslint ts * fix * fix eslint --------- Co-authored-by: Atipat Pankong <atipat.p@lmwn.com>
Noboomta · Jul 7, 2024 · f117f68 · f117f68
1 parent 8b3b910
commit f117f68
Show file tree

Hide file tree

Showing 24 changed files with 507 additions and 218 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-18
+lts/iron
diff --git a/eslint.config.js b/eslint.config.js
@@ -3,35 +3,52 @@ import path from 'node:path'
 
 import { fileURLToPath } from 'node:url'
 
-import js from '@eslint/js'
+import eslint from '@eslint/js'
 
 import { FlatCompat } from '@eslint/eslintrc'
 import { includeIgnoreFile } from '@eslint/compat'
-
+import tseslint from 'typescript-eslint'
+import eslintConfigPrettier from 'eslint-config-prettier'
 import pluginVue from 'eslint-plugin-vue'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
 
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-  recommendedConfig: js.configs.recommended,
-  allConfig: js.configs.all,
-})
-
 const gitignorePath = path.resolve(__dirname, '.gitignore')
 
 export default [
   includeIgnoreFile(gitignorePath),
-  ...compat.extends('eslint:recommended', 'prettier'),
+  eslint.configs.recommended,
+  ...tseslint.configs.recommended,
   ...pluginVue.configs['flat/recommended'],
+  {
+    plugins: {
+      'typescript-eslint': tseslint.plugin,
+    },
+    languageOptions: {
+      parserOptions: {
+        parser: tseslint.parser,
+        project: './tsconfig.json',
+        extraFileExtensions: ['.vue'],
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/ban-ts-comment': 'off',
+    },
+  },
+  {
+    files: ['**/*.js'],
+    extends: [tseslint.configs.disableTypeChecked],
+  },
   {
     files: ['src/**/*.(js|vue)'],
     languageOptions: {
       globals: {
         ...globals.node,
       },
     },
-    rules: {},
   },
+  eslintConfigPrettier,
 ]
diff --git a/index.html b/index.html
@@ -54,7 +54,7 @@
     </noscript>
     <div id="app"></div>
 
-    <script type="module" src="src/main.js"></script>
+    <script type="module" src="src/main.ts"></script>
     <!-- built files will be auto injected -->
     <div id="divadsensedisplaynone">
       <!-- put here all adsense code -->

diff --git a/jsconfig.json b/jsconfig.json
diff --git a/package.json b/package.json
@@ -8,13 +8,14 @@
     "build": "NODE_OPTIONS=--openssl-legacy-provider vite build",
     "serve": "NODE_OPTIONS=--openssl-legacy-provider vite preview",
     "lint": "eslint --fix src",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "type-check": "vue-tsc --noEmit"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/vue-fontawesome": "^3.0.5",
-    "axios": "^0.21.1",
+    "axios": "^1.7.2",
     "k-progress-v3": "^1.0.0",
     "regenerator-runtime": "^0.14.1",
     "vue": "^3.3.9",
@@ -23,8 +24,11 @@
     "vuex": "^4.1.0"
   },
   "devDependencies": {
+    "@babel/types": "^7.24.7",
     "@eslint/compat": "^1.1.0",
+    "@types/node": "^20.14.8",
     "@vitejs/plugin-vue": "^5.0.5",
+    "@vue/tsconfig": "^0.5.1",
     "autoprefixer": "^10.4.19",
     "eslint": "^9.5.0",
     "eslint-config-prettier": "^9.1.0",
@@ -35,7 +39,9 @@
     "prettier": "^3.3.2",
     "tailwindcss": "^3.4.4",
     "typescript": "^5.5.2",
-    "vite": "^5.3.1"
+    "typescript-eslint": "^7.13.1",
+    "vite": "^5.3.1",
+    "vue-tsc": "^2.0.22"
   },
   "browserslist": [
     "> 1%",

diff --git a/src/App.vue b/src/App.vue
@@ -1,46 +1,25 @@
 <template>
-  <div
-    id="app"
-    class="bg-white dark:bg-gray-900"
-  >
+  <div id="app" class="bg-white dark:bg-gray-900">
     <div>
       <nav
         class="h-16 flex items-center bg-green-500 dark:bg-gray-800 px-5 justify-between z-10 fixed w-full"
       >
-        <div
-          id="middle"
-          class="h-16 flex items-center m-auto justify-center absolute"
-        >
-          <h1 class="font-bold text-gray-200 dark:text-green-300 text-2xl">
-            KU-Table
-          </h1>
+        <div id="middle" class="h-16 flex items-center m-auto justify-center absolute">
+          <h1 class="font-bold text-gray-200 dark:text-green-300 text-2xl">KU-Table</h1>
         </div>
         <div id="left">
           <router-link to="/schedule">
-            <img
-              src="./assets/ku-table.jpg"
-              class="w-10 h-10"
-              alt="KU-Logo"
-            >
+            <img src="./assets/ku-table.jpg" class="w-10 h-10" alt="KU-Logo" />
           </router-link>
         </div>
-        <div
-          id="right"
-          class="flex"
-        >
+        <div id="right" class="flex">
           <a
             href="#"
             class="m-3 text-gray-200 dark:text-green-300 hover:text-white dark:hover:text-white transition duration-300"
             @click.prevent="toggleTheme"
           >
-            <font-awesome-icon
-              v-if="theme === 'light'"
-              icon="moon"
-            />
-            <font-awesome-icon
-              v-else
-              icon="sun"
-            />
+            <font-awesome-icon v-if="theme === 'light'" icon="moon" />
+            <font-awesome-icon v-else icon="sun" />
           </a>
           <button
             v-if="!isAuthenticated"
@@ -67,11 +46,13 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
 import { mapGetters, mapActions, mapMutations } from 'vuex'
 import KuFooter from '@/components/KuFooter.vue'
 
-export default {
+export default defineComponent({
   name: 'App',
   components: {
     KuFooter,
@@ -92,8 +73,8 @@ export default {
   watch: {
     theme(newTheme) {
       newTheme === 'light'
-        ? document.querySelector('html').classList.remove('dark')
-        : document.querySelector('html').classList.add('dark')
+        ? document.querySelector('html')!.classList.remove('dark')
+        : document.querySelector('html')!.classList.add('dark')
     },
     isAuthenticated(newValue) {
       if (newValue) {
@@ -104,7 +85,7 @@ export default {
     },
   },
   mounted() {
-    this.adsenseContent = document.getElementById('divadsensedisplaynone').innerHTML
+    this.adsenseContent = document.getElementById('divadsensedisplaynone')!.innerHTML
     this.initTheme()
   },
   methods: {
@@ -119,7 +100,7 @@ export default {
       this.clearAuthData()
     },
   },
-}
+})
 </script>
 
 <style>

diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
@@ -106,16 +106,18 @@
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'HelloWorld',
   props: {
     msg: {
       type: String,
       required: true,
     },
   },
-}
+})
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->

diff --git a/src/components/KuFooter.vue b/src/components/KuFooter.vue
@@ -2,48 +2,40 @@
   <footer
     class="text-xs p-5 h-44 items-center flex flex-col justify-center text-center bg-gray-300 dark:bg-gray-800 dark:text-white"
   >
-    <p class="font-bold text-lg mb-2">
-      CONTACT US
-    </p>
-    <a
-      href="https://github.com/Noboomta/schedule-ku"
-      target="_blank"
-    >
+    <p class="font-bold text-lg mb-2">CONTACT US</p>
+    <a href="https://github.com/Noboomta/schedule-ku" target="_blank">
       <img
         v-if="theme === 'light'"
         class="w-7 h-7 m-auto"
         src="../assets/github_logo.png"
         alt="github-logo"
-      >
-      <img
-        v-else
-        class="w-7 h-7 m-auto"
-        src="../assets/github_logo_dark.png"
-        alt="github-logo"
-      >
+      />
+      <img v-else class="w-7 h-7 m-auto" src="../assets/github_logo_dark.png" alt="github-logo" />
       <p>GitHub</p>
       <a
         class="font-bold mb-2 text-blue-500 dark:text-gray-200 underline"
         href="https://forms.gle/Kks5AEnYtGCTfueSA"
-      >กดที่นี่เพื่อแจ้งปัญหา (เมลมาจะไวกว่าครับ puvana.s@ku.th)</a>
+        >กดที่นี่เพื่อแจ้งปัญหา (เมลมาจะไวกว่าครับ puvana.s@ku.th)</a
+      >
     </a>
     <span class="text-center mt-3">
       โปรเจคนี้สร้างมาเพื่ออำนวยความสะดวกต่อนิสิต
-      <br>
+      <br />
       ไม่มีความต้องการจะดึงข้อมูลจากผู้ใช้แต่อย่างใด
     </span>
   </footer>
 </template>
 
-<script>
+<script lang="ts">
 import { mapGetters } from 'vuex'
+import { defineComponent } from 'vue'
 
-export default {
+export default defineComponent({
   name: 'KuFooter',
   computed: {
     ...mapGetters({ theme: 'theme/getTheme' }),
   },
-}
+})
 </script>
 
 <style></style>
diff --git a/src/components/SpinTable.vue b/src/components/SpinTable.vue
@@ -12,10 +12,12 @@
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'SpinTable',
-}
+})
 /*z-10 h-screen w-full bg-tranparent masked */
 // center w-72 spin
 </script>

diff --git a/src/components/SubjectCard.vue b/src/components/SubjectCard.vue