added typescript support

.eslintrc.cjs

@@ -1,16 +1,26 @@
 /* eslint-env node */
 module.exports = {
   'root': true,
-  'parserOptions': {
-    'ecmaVersion': 'latest'
-  },
   'env': {
     'browser': true,
     'node': true,
     'es6': true
   },
+  'parser': 'vue-eslint-parser',
+  'parserOptions': {
+    'parser': '@typescript-eslint/parser',
+    'ecmaVersion': 2020,
+    'sourceType': 'module',
+    'jsxPragma': 'React',
+    'ecmaFeatures': {
+      'jsx': true,
+      'tsx': true
+    }
+  },
+  'plugins': ['@typescript-eslint', 'import'],
   'extends': [
     'plugin:vue/vue3-essential',
+    'plugin:@typescript-eslint/recommended',
     'eslint:recommended'
   ],
   'globals': {

package.json

@@ -26,18 +26,26 @@
     "vue-router": "4.1.6"
   },
   "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "5.54.1",
+    "@typescript-eslint/parser": "5.54.1",
     "@vitejs/plugin-vue": "3.2.0",
     "@vitejs/plugin-vue-jsx": "2.1.1",
+    "@vue/cli-plugin-typescript": "5.0.8",
+    "@vue/tsconfig": "^0.1.3",
+    "babel-plugin-import": "1.13.6",
     "body-parser": "1.20.1",
     "dotenv": "16.0.3",
     "eslint": "8.29.0",
+    "eslint-plugin-import": "2.27.5",
     "eslint-plugin-vue": "9.8.0",
     "mockjs": "1.1.0",
     "rollup-plugin-svg-sprites": "1.2.5",
+    "typescript": "4.9.5",
     "unplugin-auto-import": "0.12.1",
     "unplugin-element-plus": "0.4.1",
     "unplugin-vue-components": "0.22.12",
     "vite": "3.2.5",
-    "vite-plugin-mock": "2.9.6"
+    "vite-plugin-mock": "2.9.6",
+    "vue-tsc": "1.2.0"
   }
 }

src/views/login/components/SocialSignin.vue

@@ -15,23 +15,23 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 // import openWindow from '@/utils/open-window'
 import { defineComponent } from 'vue';
 
 export default defineComponent({
   name: 'SocialSignin',
   methods: {
-    wechatHandleClick() { // thirdpart
+    wechatHandleClick(type: string) { // thirdpart
-      alert('ok');
+      alert(type + 'ok ');
       // this.$store.commit('SET_AUTH_TYPE', thirdpart)
       // const appid = 'xxxxx'
       // const redirect_uri = encodeURIComponent('xxx/redirect?redirect=' + window.location.origin + '/auth-redirect')
       // const url = 'https://open.weixin.qq.com/connect/qrconnect?appid=' + appid + '&redirect_uri=' + redirect_uri + '&response_type=code&scope=snsapi_login#wechat_redirect'
       // openWindow(url, thirdpart, 540, 540)
     },
-    tencentHandleClick() { // thirdpart
+    tencentHandleClick(type: string) { // thirdpart
-      alert('ok');
+      alert(type + 'ok');
       // this.$store.commit('SET_AUTH_TYPE', thirdpart)
       // const client_id = 'xxxxx'
       // const redirect_uri = encodeURIComponent('xxx/redirect?redirect=' + window.location.origin + '/auth-redirect')

src/views/login/index.vue

@@ -58,24 +58,29 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { validUsername } from '@/utils/validate';
 import { defineComponent } from 'vue';
-import SocialSign from './components/SocialSignin';
+import SocialSign from './components/SocialSignin.vue';
+import type { FormItemRule, FormValidateCallback, FormValidationResult } from 'element-plus';
 import store from '@/store';
 
+interface IForm {
+  validate: (callback?: FormValidateCallback | undefined) => FormValidationResult;
+}
+
 export default defineComponent({
   name: 'Login',
   components: { SocialSign },
   data() {
-    const validateUsername = (rule, value, callback) => {
+    const validateUsername: FormItemRule['validator'] = (_rule, value, callback) => {
       if (!validUsername(value)) {
         callback(new Error('Please enter the correct user name'));
       } else {
         callback();
       }
     };
-    const validatePassword = (rule, value, callback) => {
+    const validatePassword: FormItemRule['validator'] = (_rule, value, callback) => {
       if (value.length < 6) {
         callback(new Error('The password can not be less than 6 digits'));
       } else {
@@ -116,9 +121,9 @@ export default defineComponent({
   },
   mounted() {
     if (this.loginForm.username === '') {
-      this.$refs.username.focus();
+      (this.$refs.username as HTMLElement).focus();
     } else if (this.loginForm.password === '') {
-      this.$refs.password.focus();
+      (this.$refs.password as HTMLElement).focus();
     }
   },
   unmounted() {
@@ -136,11 +141,11 @@ export default defineComponent({
         this.passwordType = 'password';
       }
       this.$nextTick(() => {
-        this.$refs.password.focus();
+        (this.$refs.password as HTMLElement).focus();
       });
     },
     handleLogin() {
-      this.$refs.loginForm.validate(valid => {
+      (this.$refs.loginForm as IForm).validate(valid => {
         if (valid) {
           this.loading = true;
           store.user().login(this.loginForm)

tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.web.json",
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "noLib": false,
+    "forceConsistentCasingInFileNames": true,
+    "allowSyntheticDefaultImports": true,
+    "strictFunctionTypes": false,
+    "jsx": "preserve",
+    "baseUrl": ".",
+    "preserveValueImports": false,
+    "allowJs": true,
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "experimentalDecorators": true,
+    "lib": ["dom", "esnext"],
+    "noImplicitAny": false,
+    "skipLibCheck": true,
+    "removeComments": true,
+    "types": ["webpack-env", "unplugin-vue-define-options"],
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": [
+    "mock/**/*",
+    "src/**/*.ts",
+    "**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "types/**/*.d.ts",
+    "types/**/*.ts"
+  ],
+  "exclude": ["node_modules", "dist", "**/*.js", "**/*.md", "src/**/*.md"]
+}