Question

我做了什么
我的初始方法是使用以下mixin返回类装饰器：

public function edit($id)
{
    $phone= Phone::find($id);

    return view('edit',compact('phone'));
}

public function update(Request $request,$id)
{
    $this->validate($request, [
        'name' => 'required|max:10',
        'model'=>'required'
    ]);

    $phone=new Phone();
    $phone->name=$request->input('name');
    $phone->model=$request->input('model');
    $phone->save();

    return back();
}

因此以后该util可用于装饰类并可以毫无问题地访问目标类：

function createMixin (behaviour: any, sharedBehaviour: any = {}): any {
  const instanceKeys: any = Reflect.ownKeys(behaviour)
  const sharedKeys: any = Reflect.ownKeys(sharedBehaviour)
  const typeTag = Symbol(`isa`)

  function _mixin (clazz: Function): Function {
    for (let property of instanceKeys) {
      Object.defineProperty(clazz.prototype, property, {
        value: behaviour[property],
        writable: true
      })
    }

    Object.defineProperty(clazz.prototype, typeTag, { value: true })

    return clazz
  }

  for (let property of sharedKeys) {
    Object.defineProperty(_mixin, property, {
      value: sharedBehaviour[property],
      enumerable: sharedBehaviour.propertyIsEnumerable(property)
    })
  }

  Object.defineProperty(_mixin, Symbol.hasInstance, {
    value: (i: any) => !!i[typeTag]
  })

  return _mixin
}

export const customUtil = createMixin({
  customUtil (event: any) {
    console.log(this)
  }
})

但是它会导致tslinter警告import { customUtil } from 'utils' @customUtil export default class ComponentClass extends Vue { someClassMethod() { this.customUtil() // successfully outputs the whole class in the console } }

问题
1.是否有可能通过某种方式“混合” mixin实用程序分配给类的方法来解决linter问题？ 2.如果有一种替代方法可以使实用程序功能/类访问它们所使用的类并没有问题，并且可以通过简单的方式附加它们，那么将没有问题吗？

Answer 1

此问题已在other Threads中进行了讨论，并且也是pending issue in the TypeScript github。但是有两种方法可以解决此问题。

1：类型转换

您可以只广播this来忘记Context类，或者使用必要的信息对其进行增强。

import { customUtil } from 'utils'

@customUtil
export default class ComponentClass extends Vue {
  someClassMethod() {
    (this as any).customUtil(); // Now the linter will be fine but you will lose type safety
    (this as any as {customUtil: (event:any) => void}).customUtil(); // This works and you could/should extract the type. 
  }
}

但是您可以看到，这并不理想。

2：Real TypeScript Mixins

您可以使用真正的TypeScript Mixins代替装饰器：

实用程序

type Constructor<T = {}> = new (...args: any[]) => T;

// The Mixin
export function WithUtils<TBase extends Constructor>(Base: TBase) {
  return class extends Base {
    customUtil (event?: any) { // Actually, 'event' needs to be optional
      console.log(this)
    }
  };
}

// A Base class so you can just extend if needed
export const UtilsBase = WithUtils(class {});

组件

export default class ComponentClass extends WithUtils(Vue) {
  someClassMethod() {
    this.customUtil() // successfully outputs the whole class in the console
  }
}

类未从Vue扩展

export default class SomeClass extends UtilsBase {
  someClassMethod() {
    this.customUtil() // successfully outputs the whole class in the console
  }
}

// alternatively, you can use the Mixin with an unnamed class
export default class SomeClass extends WithUtils(class {}) {
  someClassMethod() {
    this.customUtil() // successfully outputs the whole class in the console
  }
}

如何为该类创建实用程序

1 个答案: