feat(tsx): 增加 tsx 测试用例以及更新 ts 版本&相关依赖

去掉了 css 检查

Author: 白唯

.eslintrc.js

@@ -1,4 +1,3 @@
-
 module.exports = {
   root: true,
   parserOptions: {
@@ -20,7 +19,8 @@ module.exports = {
     '@typescript-eslint/class-name-casing': 'off',
     'vue/valid-v-slot': 'off',
     'no-debugger': 'off',
-    'vue/experimental-script-setup-vars': 'off'
+    'vue/experimental-script-setup-vars': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off'
   },
   extends: [
     'plugin:vue/vue3-essential',

global.d.ts

@@ -1,4 +1,4 @@
-import { StateType } from '@types'
+import { StateType } from '@/@types'
 import { Message } from 'ant-design-vue/types/message'
 import { Router, RouteLocationNormalizedLoaded } from 'vue-router'
 import { Store } from 'vuex'
@@ -13,6 +13,8 @@ declare module '@vue/runtime-core' {
   }
 }
 
+declare module '*.tsx'
+
 declare global {
   interface X {
     name: string

package.json

@@ -88,7 +88,7 @@
     "pre-commit": "lint-staged"
   },
   "lint-staged": {
-    "src/**/*.{jsx,txs,ts,js,json,less,vue,md}": [
+    "src/**/*.{jsx,txs,ts,js,json,vue,md}": [
       "vue-cli-service lint"
     ]
   },

src/api/team.ts

@@ -85,7 +85,7 @@ class TeamService {
 
   // 批量删除团队成员
   static deleteMember(list: TeamMemberType[]): Promise<HttpResponse> {
-    const path = list.map(item => item.id).join(',')
+    const path = list.map((item) => item.id).join(',')
     console.log('deletepath', path)
     return Axios(`/bus/teamMember/${path}`, {
       method: 'delete'

src/api/user.ts

@@ -103,7 +103,6 @@ class UserService {
       method: 'post',
       responseType: 'json',
       params: {
-        // eslint-disable-next-line @typescript-eslint/camelcase
         grant_type: 'refresh_token',
         ...params
       }

src/components/ChangeLanguage.vue

@@ -2,7 +2,7 @@
   <a-dropdown :trigger="['click']">
     <a
       class="ant-dropdown-link"
-      @click="e => e.preventDefault()"
+      @click="(e) => e.preventDefault()"
       :style="{ color: titleColor, fontSize: titleSize }"
     >
       {{ i18n.languageName }}<DownOutlined
@@ -47,9 +47,9 @@ export default defineComponent({
   },
   setup() {
     const { i18n } = i18nInstance
-    const changeLanguage = e => {
+    const changeLanguage = (e) => {
       const lang = e.key
-      setLang(lang).then(result => {
+      setLang(lang).then((result) => {
         if (result === lang) {
           message.success(
             `${i18n.value['Current Language:']} ${i18n.value.languageName}`

src/components/Selector.vue

@@ -75,21 +75,6 @@ import { BasicUserType, RoleType, StateType } from '@/@types'
 import { useStore } from 'vuex'
 import { message } from 'ant-design-vue'
 
-interface ListItem {
-  id: number
-  name: string
-  avatar: string
-}
-
-interface State {
-  optionsUp: boolean
-  checkAll: boolean
-  indeterminate: boolean
-  inAdd: boolean
-  inSearch: boolean
-  keyword: string
-}
-
 export default defineComponent({
   name: 'Selector',
   components: { CloseOutlined },
@@ -218,7 +203,7 @@ export default defineComponent({
 
     // 搜索选项是否被选中
     const isChecked = (id: number) => {
-      return state.selectedData.filter(item => item.userId == id).length !== 0
+      return state.selectedData.filter((item) => item.userId == id).length !== 0
     }
 
     /**
@@ -233,7 +218,7 @@ export default defineComponent({
         state.selectedData = [...state.selectedData, data]
       } else {
         state.selectedData = [...state.selectedData].filter(
-          item => item.userId !== data.userId
+          (item) => item.userId !== data.userId
         )
       }
 
@@ -244,15 +229,15 @@ export default defineComponent({
       searchRef.value.focus()
 
       const deleteList = rawList
-        .map(item => {
+        .map((item) => {
           if (!find(state.selectedData, ['userId', item.userId])) {
             return item
           }
         })
         .filter((item: any) => Boolean(item))
 
       const addList = state.selectedData
-        .map(item => {
+        .map((item) => {
           if (!find(rawList, ['userId', item.userId])) {
             return item
           }

src/components/Slider.vue

@@ -12,7 +12,7 @@
     <div class="operate">
       <div class="icon">
         <IconFont type="iconleft" @click="prev" />
-        <IconFont type="iconright" @click="next" style="margin-left:120px" />
+        <IconFont type="iconright" @click="next" style="margin-left: 120px" />
       </div>
     </div>
   </div>

src/components/index.ts

@@ -16,7 +16,7 @@ export function registeGlobalComponent(
   app: ReturnType<typeof createApp>
 ): void {
   const files = require.context('./global', true, /\.(vue|ts)$/)
-  files.keys().forEach(key => {
+  files.keys().forEach((key) => {
     const config = files(key)
     const name = kebabCase(key.replace(/^\.\//, '').replace(/\.\w+$/, ''))
     app.component(name, config.default || config)

src/i18n/index.ts

@@ -53,7 +53,7 @@ function loadAtdLocales() {
     true,
     /\.js$/
   )
-  files.keys().forEach(key => {
+  files.keys().forEach((key) => {
     const fileName = key.slice(2, key.lastIndexOf('.'))
     if (includes(TranslateTable, fileName)) {
       const localeKey = findKeyByValue(TranslateTable, fileName)

src/layout/AppLayout.vue

@@ -5,6 +5,7 @@
       <app-header />
       <div id="nav">
         <router-link to="/">Home</router-link> |
+        <router-link to="/tsxtest">tsx页面</router-link> |
         <router-link to="/about">About</router-link> |
         <router-link to="/contact">Contact</router-link> |
         <router-link to="/tests">组件测试</router-link>

src/main.ts

@@ -21,7 +21,4 @@ loadAllPlugins(app)
 /** 自动注册全局组件  */
 registeGlobalComponent(app)
 
-app
-  .use(store)
-  .use(router)
-  .mount('#app')
+app.use(store).use(router).mount('#app')

src/plugins/index.ts

@@ -6,7 +6,7 @@ import { createApp } from 'vue'
  */
 export function loadAllPlugins(app: ReturnType<typeof createApp>) {
   const files = require.context('.', true, /\.ts$/)
-  files.keys().forEach(key => {
+  files.keys().forEach((key) => {
     if (typeof files(key).default === 'function') {
       if (key !== './index.ts') files(key).default(app)
     }

src/router/index.ts

@@ -4,7 +4,7 @@ import Home from '../views/Home.vue'
 /** 自动加载其他路由模块 */
 const files = require.context('.', true, /\.ts$/)
 const modules: Array<RouteRecordRaw> = []
-files.keys().forEach(key => {
+files.keys().forEach((key) => {
   if (key === './index.ts') return
   modules.push(files(key).default)
 })

src/router/tsx.ts

@@ -0,0 +1,11 @@
+import { RouteRecordRaw } from 'vue-router'
+
+/** 关于我们页面的路由配置 */
+const AboutRouter: RouteRecordRaw = {
+  path: '/tsxtest',
+  name: 'tsxtest',
+  component: () =>
+    import(/* webpackChunkName: "tsxtest" */ '@/views/TsxPage.tsx')
+}
+
+export default AboutRouter

src/shims-vue.d.ts

@@ -1,5 +1,12 @@
 declare module '*.vue' {
   import { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, unknown>
+  const component: DefineComponent<
+    Record<string, unknown>,
+    Record<string, unknown>,
+    unknown
+  >
   export default component
 }
+
+declare module '*.tsx'
+declare module '*.less'

src/store/modules/console/getters.ts

@@ -5,13 +5,15 @@ const consoleGetter = {
   // 获取云角色列表
   getTeamClouldList() {
     // 获取用户列表以及云角色列表
-    const memberList = store.state.console.selectedTeamMemberList.map(item => {
-      let cloudRoleList: number[] = []
-      if (item.cloudRole) {
-        cloudRoleList = item.cloudRole.split(',').map(id => Number(id))
+    const memberList = store.state.console.selectedTeamMemberList.map(
+      (item) => {
+        let cloudRoleList: number[] = []
+        if (item.cloudRole) {
+          cloudRoleList = item.cloudRole.split(',').map((id) => Number(id))
+        }
+        return { ...item, cloudRoleList: cloudRoleList }
       }
-      return { ...item, cloudRoleList: cloudRoleList }
-    })
+    )
 
     const cloudRoleList = [...store.state.console.selectedTeamCloudRoleList]
 

src/store/modules/index.ts

@@ -3,7 +3,7 @@
 const files = require.context('.', true, /\.ts$/)
 const modules: any = {}
 
-files.keys().forEach(key => {
+files.keys().forEach((key) => {
   if (key === './index.ts') return
   const path = key.replace(/(\.\/|\.ts)/g, '')
   const [namespace, imported] = path.split('/')

src/store/modules/user/actions.ts

@@ -10,17 +10,17 @@ const userActions = {
   // 刷新令牌
   refreshToken() {
     return UserService.refreshToken({
-      // eslint-disable-next-line @typescript-eslint/camelcase
+      // eslint-disable-next-line
       refresh_token: Store.state.user.token.refresh_token
-    }).then(res => {
+    }).then((res) => {
       // token过期时间
       const expireTime = res.data.expires_in * 1000 + new Date().getTime()
       setStoreState('user', 'token', { ...res.data, expireTime })
     })
   },
   // 获取用户信息
   getUserDetail() {
-    return UserService.getUserDetail().then(res => {
+    return UserService.getUserDetail().then((res) => {
       setStoreState('user', 'userDetail', res.data.data)
     })
   }

src/store/utils.ts

@@ -1,14 +1,8 @@
 import store from '@/store'
-import { AppStateType } from './modules/app/state'
-import { ConsoleStateType } from './modules/console/state'
-import { UserStateType } from './modules/user/state'
 
 // 定义 state 下的 module 值
 type ModuleNameType = 'app' | 'console' | 'user'
 
-// 定义 module 下的 key 值
-type CommitNameType = AppStateType & ConsoleStateType & UserStateType
-
 /**
  * @description setStoreState -方法是一个 mutaitions 的操作
  * @type {T} T - 你要更改的模块的类型

src/utils/common.ts

@@ -73,7 +73,7 @@ export function loadScript(url: string) {
       script.type = 'text/javascript'
       if (script.readyState) {
         //IE
-        script.onreadystatechange = function() {
+        script.onreadystatechange = function () {
           if (
             script.readyState == 'loaded' ||
             script.readyState == 'complete'
@@ -84,7 +84,7 @@ export function loadScript(url: string) {
         }
       } else {
         //Others: Firefox, Safari, Chrome, and Opera
-        script.onload = function() {
+        script.onload = function () {
           Promise.resolve(0)
         }
       }
@@ -351,7 +351,7 @@ export const isIphonex = () => {
     const { devicePixelRatio, screen } = window
     const { width, height } = screen
     return xSeriesConfig.some(
-      item =>
+      (item) =>
         item.devicePixelRatio === devicePixelRatio &&
         item.width === width &&
         item.height === height
@@ -522,10 +522,7 @@ export function createPassword(len: number) {
     'Z'
   ]
   var special = ['-', '_', '#']
-  var config = num
-    .concat(english)
-    .concat(ENGLISH)
-    .concat(special)
+  var config = num.concat(english).concat(ENGLISH).concat(special)
 
   //先放入一个必须存在的
   var arr = []

src/utils/hooks/modal.ts

@@ -1,3 +1,3 @@
-export default function() {
+export default function () {
   console.log('hahah')
 }

src/views/About.vue

@@ -1,7 +1,5 @@
 <template>
-  <div ref="root" class="about">
-    about.page
-  </div>
+  <div ref="root" class="about">about.page</div>
 </template>
 
 <script lang="ts">

src/views/AboutMe.vue

@@ -7,6 +7,7 @@
 <script lang="ts">
 import { defineComponent, ref, onMounted } from 'vue'
 
+// 混合 Compostion API 和 Options API 写法，不推荐在生产环境这样做
 const AboutMe = defineComponent({
   setup() {
     onMounted(() => {
@@ -25,10 +26,7 @@ const AboutMe = defineComponent({
   },
   methods: {
     caculatePageName(): string {
-      return this.book.pageName
-        .split('-')
-        .reverse()
-        .join()
+      return this.book.pageName.split('-').reverse().join()
     }
   }
 })

src/views/Contact.vue

@@ -1,7 +1,5 @@
 <template>
-  <div>
-    contact.page
-  </div>
+  <div>contact.page</div>
 </template>
 
 <script lang="ts">

src/views/Home.vue

@@ -1,7 +1,5 @@
 <template>
-  <div>
-    home.page
-  </div>
+  <div>home.page</div>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'