component多个 vue_Typescript在Vue中的实践

1
2
3
4
5
6
type Pay = (orderId: string) => Promise<-1 | 0>

const pay: Pay = orderId => {
  // do something
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// goodApi.ts
export type GoodInfo = {
  infoId: string,
  price: string,
  title: string,
  label: {
    labeltxt: string,
    labelImg: string
  }[]
}

const getGoodInfo = (): GoodInfo[] => {
  // do something
}

1
2
3
4
5
6
7
8
9
type LabelMsg = {
  labeltxt: string,
  labelImg: string
}[]

const processLabel = (labelArr: LabelMsg) => {
  // do something
}

1
2
3
4
5
6
import { GoodInfo } from './goodApi.ts'

const processLabel = (labelArr: GoodInfo['label']) => {
  // do something
}

1
2
3
4
5
6
7
8
import { GoodInfo } from './goodApi.ts'
import { UserInfo } from './userApi.ts'

type Info = Pick<GoodInfo, 'label'> & Pick<UserInfo, 'tag | avatar'>
const processLabel = (info: Info) => {
  // do something
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
export default {
  template: '<button @click="onClick">Click!</button>',
  data() {
    return {
      preStr: 'Hello!'
    }
  },
  props: {
    message: {
      type: String,
      default: 'world'
    }
  },
  methods: {
    onClick () {
      window.alert(this.preStr + this.message)
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import Vue from 'vue'
import { Component, Prop } from 'vue-property-decorator';

@Component({
  template: '<button @click="onClick">Click!</button>'
})
export default class Test extends Vue {
  preStr: string = 'Hello!'

  @Prop({ type: String, default: 'world' })
  message: string

  onClick (): void {
    window.alert(this.preStr + this.message)
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
export function componentFactory (
  // Component即定义的组件类
  Component: VueClass<Vue>,
  // options为传给Component装饰器的初始选项
  options: ComponentOptions<Vue> = {}
): VueClass<Vue> {
  options.name = options.name || (Component as any)._componentTag || (Component as any).name

  const proto = Component.prototype
  Object.getOwnPropertyNames(proto).forEach(function (key) {

    // 如果方法名与vue生命周期同名 直接放进options内
    if ($internalHooks.indexOf(key) > -1) {
      options[key] = proto[key]
      return
    }
    const descriptor = Object.getOwnPropertyDescriptor(proto, key)
    // 普通方法放进options的methods内
    if (descriptor.value !== void 0) {
      if (typeof descriptor.value === 'function') {
        (options.methods || (options.methods = {}))[key] = descriptor.value
      }
    // get set函数放进options的计算computed内
    } else if (descriptor.get || descriptor.set) {
      (options.computed || (options.computed = {}))[key] = {
        get: descriptor.get,
        set: descriptor.set
      }
    }
  })

  ;(options.mixins || (options.mixins = [])).push({
    data (this: Vue) {
      // 类实例上的属性当做options中data函数的返回值，即state
      return collectDataFromConstructor(this, Component)
    }
  })

  // Super就是Vue 根据计算得到的options选项extend一个常规的vue组件
  const Extended = Super.extend(options)

  return Extended
}

1
2
3
4
5
6
7
8
9
10
11
12
export function Prop(options: PropOptions | Constructor[] | Constructor = {}) {
  return (target: Vue, key: string) => {
    applyMetadata(options, target, key)
    createDecorator((componentOptions, k) => {
      // componentOptions即上文中的options对象  k即被修饰的键名
      ;(componentOptions.props || ((componentOptions.props = {}) as any))[
        k
      ] = options
    })(target, key)
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { defineComponent } from 'vue'

const Component = defineComponent({
  data() {
    return {
      preStr: 'hello!'
    }
  },
  props: {
    message: {
      type: String,
      required: true
    }
  },
  methods: {
    onClick() {
      this.preStr = 'hi!' // ok    preStr被推断成 string
      this.preStr = 123   // error number类型不能分配给string类型
      this.message = 'zz' // error message是read-only属性
    }
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { defineComponent, ref, PropType } from 'vue';

export default defineComponent({
  props: {
    callback: {
      required: true,
      type: Function as PropType<(nums: number) => void>
    },
    message: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const nums = ref(0)

    props.callback(props.message)  // error callback的参数应该是number类型

    props.callback(nums.value)     // ok
  }
})