Merge pull request #333 from GreatAuk/extend-type

ts 类型完善

src/tabbar/config.ts

@@ -1,4 +1,5 @@
 import type { TabBar } from '@uni-helper/vite-plugin-uni-pages'
+import type { CustomTabBarItem, NativeTabBarItem } from './types'
 
 /**
  * tabbar 选择的策略，更详细的介绍见 tabbar.md 文件
@@ -22,8 +23,6 @@ export const TABBAR_STRATEGY_MAP = {
 // 如果是使用 CUSTOM_TABBAR(2,3)，只需要配置 customTabbarList，nativeTabbarList 不生效
 export const selectedTabbarStrategy = TABBAR_STRATEGY_MAP.CUSTOM_TABBAR_WITH_CACHE
 
-type NativeTabBarItem = TabBar['list'][number]
-
 // TODO: 2/3. 使用 NATIVE_TABBAR 时，更新下面的 tabbar 配置
 export const nativeTabbarList: NativeTabBarItem[] = [
   {
@@ -40,18 +39,6 @@ export const nativeTabbarList: NativeTabBarItem[] = [
   },
 ]
 
-// badge 显示一个数字或 小红点（样式可以直接在 tabbar/index.vue 里面修改）
-export type CustomTabBarItemBadge = number | 'dot'
-
-export interface CustomTabBarItem {
-  text: string
-  pagePath: string
-  iconType: 'uiLib' | 'unocss' | 'iconfont' | 'image' // 不建议用 image 模式，需要配置2张图
-  icon: any // 其实是 string 类型，这里是为了避免 ts 报错 (tabbar/index.vue 里面 uni-icons 那行)
-  iconActive?: string // 只有在 image 模式下才需要，传递的是高亮的图片（PS： 不建议用 image 模式）
-  badge?: CustomTabBarItemBadge
-  isBulge?: boolean // 是否是中间的鼓包tabbarItem
-}
 // TODO: 3/3. 使用 CUSTOM_TABBAR(2,3) 时，更新下面的 tabbar 配置
 // 如果需要配置鼓包，需要在 'tabbar/store.ts' 里面设置，最后在 `tabbar/index.vue` 里面更改鼓包的图片
 export const customTabbarList: CustomTabBarItem[] = [

src/tabbar/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 // i-carbon-code
-import type { CustomTabBarItem } from './config'
+import type { CustomTabBarItem } from './types'
 import { customTabbarEnable, needHideNativeTabbar, tabbarCacheEnable } from './config'
 import { tabbarList, tabbarStore } from './store'
 

src/tabbar/store.ts

@@ -1,4 +1,4 @@
-import type { CustomTabBarItem, CustomTabBarItemBadge } from './config'
+import type { CustomTabBarItem, CustomTabBarItemBadge } from './types'
 import { reactive } from 'vue'
 
 import { isNeedLoginMode } from '@/router/config'

src/tabbar/types.ts

@@ -0,0 +1,34 @@
+import type { TabBar } from '@uni-helper/vite-plugin-uni-pages'
+import type { RemoveLeadingSlashFromUnion } from '@/typings'
+
+/**
+ * 原生 tabbar 的单个选项配置
+ */
+export type NativeTabBarItem = TabBar['list'][number] & {
+  pagePath: RemoveLeadingSlashFromUnion<_LocationUrl>
+}
+
+/** badge 显示一个数字或 小红点（样式可以直接在 tabbar/index.vue 里面修改） */
+export type CustomTabBarItemBadge = number | 'dot'
+
+/** 自定义 tabbar 的单个选项配置 */
+export interface CustomTabBarItem {
+  text: string
+  pagePath: RemoveLeadingSlashFromUnion<_LocationUrl>
+  /** 图标类型，不建议用 image 模式，因为需要配置 2 张图，更麻烦 */
+  iconType: 'uiLib' | 'unocss' | 'iconfont' | 'image'
+  /**
+   * icon 的路径
+   * - uiLib: wot-design-uni 图标的 icon prop
+   * - unocss: unocss 图标的类名
+   * - iconfont: iconfont 图标的类名
+   * - image: 图片的路径
+   */
+  icon: string
+  /** 只有在 image 模式下才需要，传递的是高亮的图片（PS： 不建议用 image 模式） */
+  iconActive?: string
+  /** badge 显示一个数字或 小红点 */
+  badge?: CustomTabBarItemBadge
+  /** 是否是中间的鼓包tabbarItem */
+  isBulge?: boolean
+}

src/typings.ts

@@ -13,3 +13,9 @@ export interface IUniUploadFileOptions {
   name?: string
   formData?: any
 }
+
+/** 工具类型：删除字符串开头的第一个斜杠 */
+export type RemoveLeadingSlash<S extends string> = S extends `/${infer Rest}` ? Rest : S
+
+/** 工具类型：删除联合类型中每个字符串的第一个斜杠 */
+export type RemoveLeadingSlashFromUnion<T extends string> = T extends any ? RemoveLeadingSlash<T> : never