Склоки, TS та Vue

Vue and object key mutation

export type DialogValues = 'isHidden'
  | 'isBlocked'
  | 'hasNewMessage'
  | 'isHistoryLoadedFirst'
  | 'isActive'

export type M_CHAT_SET_VALUE = {
  uid: Dialog['uid']
  key: DialogValues
  value: boolean
}

const mutations: MutationTree<ChatStore.State> = {
  [types.M_CHAT_SET_VALUE](
    state,
    payload: M_CHAT_SET_VALUE,
  ) {
    const dialog = state.dialogs[payload.uid]

    if (dialog) {
      dialog[payload.key] = payload.value
    }
  }
}
export type Intersection<A, B> = A extends B ? A : never

export type DialogValues = Intersection<
  keyof Chat.Dialog,
  'isHidden' | 'isBlocked' | 'hasNewMessage' | 'isHistoryLoadedFirst' | 'isActive'
>

export type M_CHAT_SET_VALUE = {
  uid: Dialog['uid']
  key: DialogValues
  value: boolean
}

const mutations: MutationTree<ChatStore.State> = {
  [types.M_CHAT_SET_VALUE](
    state,
    payload: M_CHAT_SET_VALUE,
  ) {
    const dialog = state.dialogs[payload.uid]

    if (dialog) {
      dialog[payload.key] = payload.value
    }
  }
}

Variable declaration

Link component call

import { Component, Vue } from 'vue-property-decorator'
import { DropDown } from '@/components'

@Component({
    components: { DropDown },
})
export default class MailItemDropDown extends Vue {
    dropDownHide() {
        this.$refs.dropDown.dropDownHide()
    }
}

Оголошуйте ref

import { Component, Vue } from 'vue-property-decorator'
import { DropDown, DropDownInterface } from '@/components'

@Component({
    components: { DropDown },
})
export default class MailItemDropDown extends Vue {
    $refs: Vue['$refs'] & {
        dropDown: DropDownInterface
        textarea: HTMLTextAreaElement
    }

    dropDownHide() {
        this.$refs.dropDown.dropDownHide()
    }
}
import { Component, Vue } from 'vue-property-decorator'

export interface DropDownInterface {
    dropDownHide(): void
    dropDownShow(): void
}

@Component
export default class DropDown extends Vue implements DropDownInterface {
    isVisible: boolean = false

    dropDownHide(): void {
        this.isVisible = false
        this.$emit('dropDownHide', this.isVisible)
    }

    dropDownShow(): void {
        this.isVisible = true
        this.$emit('dropDownToggle', this.isVisible)
    }
}

Api error

Api

Title Text

How to use

Трішки про TS

By Kolya Koval

Трішки про TS

  • 301