Feat: Add Typescript for Web (#84) (#85)

Co-authored-by: wangyu116 <wangyu116@baidu.com> Co-authored-by: Xinwei Xiong <86140903+cubxxw@users.noreply.github.com>
openimsdk · Jul 11, 2023 · 84e6984 · 84e6984
1 parent 6fd4f05
commit 84e6984
Show file tree

Hide file tree

Showing 11 changed files with 320 additions and 139 deletions.
diff --git a/web/.eslintignore b/web/.eslintignore
@@ -0,0 +1,3 @@
+// .eslintignore 配置, 防止校验打包的产物
+dist
+node_modules
diff --git a/web/index.html b/web/index.html
@@ -23,7 +23,7 @@
     </head>
     <body>
         <div id="app"></div>
-        <script src="./wasm_exec.js"></script>
-        <script type="module" src="/src/main.js"></script>
+        <script src="/wasm_exec.js"></script>
+        <script type="module" src="/src/main.ts"></script>
     </body>
 </html>
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -5,22 +5,26 @@
     "scripts": {
         "dev": "vite",
         "build": "vite build",
-        "preview": "vite preview"
+        "preview": "vite preview",
+        "lint": "eslint src",
+        "fix": "eslint src --fix"
     },
     "dependencies": {
         "axios": "^1.4.0",
         "echarts": "^5.4.2",
         "open-im-sdk-wasm": "^0.1.1",
+        "tdesign-vue-next": "^1.3.10",
         "vue": "^3.3.4",
         "vue-router": "^4.2.2"
     },
     "devDependencies": {
-        "@arco-design/web-vue": "^2.47.1",
+        "@types/node": "^20.4.1",
         "@typescript-eslint/eslint-plugin": "^5.60.1",
         "@typescript-eslint/parser": "^5.60.1",
         "@vitejs/plugin-vue": "^4.2.3",
         "eslint": "^8.43.0",
         "eslint-plugin-vue": "^9.15.1",
+        "less": "^4.1.3",
         "prettier": "^2.8.8",
         "typescript": "^5.1.3",
         "vite": "^4.3.9"

diff --git a/web/src/App.vue b/web/src/App.vue
@@ -14,8 +14,8 @@
  limitations under the License.
 -->
 
-<script></script>
+<template>
+    <router-view></router-view>
+</template>
 
-<template></template>
-
-<style scoped></style>
+<script setup lang="ts"></script>
diff --git a/web/src/main.js → web/src/main.ts b/web/src/main.js → web/src/main.ts
@@ -16,10 +16,6 @@
 
 import { createApp } from 'vue';
 import App from './App.vue';
-import ElementPlus from 'element-plus';
-import 'element-plus/dist/index.css';
-import * as ElementPlusIconsVue from '@element-plus/icons-vue';
-import locale from 'element-plus/es/locale/lang/zh-cn'; // use chinese
 import axios from 'axios';
 import router from './router';
 
@@ -30,9 +26,4 @@ console.log(OpenIM);
 
 const app = createApp(App);
 app.config.globalProperties.$https = axios; // use axios
-app.use(router).use(ElementPlus, { locale }).mount('#app'); // mount the router on the app
-
-// add element-icon
-for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-    app.component(key, component);
-}
+app.use(router).mount('#app'); // mount the router on the app
diff --git a/web/src/router/index.js → web/src/router/index.ts b/web/src/router/index.js → web/src/router/index.ts
@@ -15,9 +15,9 @@
  */
 
 import { createRouter, createWebHistory } from 'vue-router';
-
+import Login from '@/views/login/index.vue';
 // router options
-const routes = [];
+const routes = [{ path: '/login', name: 'Login', component: Login }];
 
 // create router
 const router = createRouter({

diff --git a/web/src/typings.d.ts b/web/src/typings.d.ts
@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/web/src/views/login/index.vue b/web/src/views/login/index.vue
@@ -0,0 +1,15 @@
+<template>
+    <div class="father">
+        <div class="son">123456</div>
+    </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="less" scoped>
+.father {
+    .son {
+        font-size: 80px;
+    }
+}
+</style>
diff --git a/web/tsconfig.json b/web/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"]
+}
diff --git a/web/vite.config.js → web/vite.config.ts b/web/vite.config.js → web/vite.config.ts
@@ -26,5 +26,6 @@ export default defineConfig({
         alias: {
             '@': fileURLToPath(new URL('./src', import.meta.url)),
         },
+        extensions: ['.js', '.ts', '.vue']
     },
 });