关于泛型

Question

import { reactive } from 'vue'
import { FunctionalComponent } from 'vue'

interface LoginWay {
    component_show: boolean
    icon_component: FunctionalComponent,
    icon_show: boolean
    icon_desc: string
}

export type WayBase = Record<string, Pick<LoginWay, 'icon_component' | 'icon_desc'>>

export type LoginWayRecord = Record<string, LoginWay>

// 登录方式动作
export default class LoginWayAction <T extends WayBase = any>{

    // 记录值
    private _last: string | number = ''

    // 结果对象
    ways: LoginWayRecord = {}

    // 构造函数初始化
    constructor(wayBases: T) {
        // 遍历对象键
        Object.keys(wayBases).forEach((key, index) => {
            // 先断言为交叉类型
            let way = wayBases[key] as LoginWay
            // 依据条件挂载额外属性
            0 === index ? (this._last = key, way['component_show'] = Boolean(true), way['icon_show'] = Boolean(false)) : (way['component_show'] = Boolean(false), way['icon_show'] = Boolean(true))
            // 重赋值
            this.ways[key] = way
        }
        )
        // 转换为响应式对象
        this.ways = reactive<LoginWayRecord>(this.ways)
    }

    // 登录方式切换方法
    public change(active: string | number): void {
        let lastWay = this.ways[this._last]
        let activeWay = this.ways[active]
        // 记录值对应操作组件隐藏, 图标组件显示
        lastWay.component_show = Boolean(false)
        lastWay.icon_show = Boolean(true)
        // 当前值对应操作组件隐藏, 图标组件显示
        activeWay.component_show = Boolean(true)
        activeWay.icon_show = Boolean(false)
        // 更新记录值
        this._last = active
    }
}



// 登录方式数据
const wayObjs = {
  username: { 
    icon_component: UserOutlined,
    icon_desc: '用户',
  },
  mobile: {
    icon_component: MobileOutlined,
    icon_desc: '手机'
  }
}

// 表单动作
const { formRef, formData, formRules, cleanForm, formFinish, formFinishFailed, formSubmit } = formAction()
// 登录方式对象
const wayAction: LoginWayAction = new LoginWayAction(wayObjs)

我补全来，您再帮我看下, 还是不行

Answer 1

keviny79 2021-12-07 16:42:18

查看ts版本

• 提问者 燎丶Trance #1

  我的版本就是4,4,3 跟你一样 苦笑

• 提问者 燎丶Trance #2

  {
    "compilerOptions": {
      "target": "esnext",
      "useDefineForClassFields": true,
      "module": "esnext",
      "moduleResolution": "node",
      "strict": true,
      "jsx": "preserve",
      "sourceMap": true,
      "resolveJsonModule": true,
      "esModuleInterop": true,
      "isolatedModules": true,
      "lib": ["esnext", "dom"],
      "typeRoots": ["node_modules/@types"],
      "types": ["vite/client", "node"],
    },
    "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
    "exclude": ["node_modules"]
  }
  
  我的ts.config

• 提问者 燎丶Trance #3

  我的打死都没红线 还能成功启动。。。。

点开查看后面2条评论

Answer 2

keviny79 2021-12-07 16:41:31

TS 代码本身没问题, 我把代码放到了 TS 和 Vue文件中都可以正常编译错误，没问题，可能原因之一是 TS版本问题，检查下你的 TS 版本，升级到最新版本， 按照上方截图查看版本【需要 打开 TS 文件和 新建 tsconfig.json文件】

Answer 3

keviny79 2021-12-06 20:40:03

你提供代码不全，我补全了下，可以， 没问题！

• 提问者 燎丶Trance #1

  我重新贴了代码 麻烦您再帮我看下，还是约束不了