写vOn:click={this.method}直接提示语法错误

[zengyuanqiu]

[haoqunjiang]

See #52 microsoft/TypeScript#7411

[TimYi]

我也遇到同样的问题，项目中需要在typescript中使用jsx，但是目前这个状态绑定不了事件，进行不下去了。
有没有其它办法支持？比如换回旧版本的jsx语法，项目是使用最新vue-cli创建的。

[TimYi]

只能用spread语法来写了，满脸黑线。

[chenjiahan]

Try this:

<div onClick={() => {}} />

[Ttou]

@chenjiahan 这样写的话，事件修饰符怎么加？

[chenjiahan]

修饰符没法加哈，不过 prevent/stop 这种都是一行代码能搞定的

[TimYi]

@chenjiahan <div onClick={() => {}} />这是旧版本的语法，最新的vue-cli里好像不好使了，无效。新语法在typescript里又用不了。

[melunar]

@chenjiahan <div onClick={() => {}} />这是旧版本的语法，最新的vue-cli里好像不好使了，无效。新语法在typescript里又用不了。

既然是jsx语法 就应该在语法上随从人家，vOn:click的写法太丑了，还有class也不能写成className

[xmsz]

@chenjiahan <div onClick={() => {}} />这是旧版本的语法，最新的vue-cli里好像不好使了，无效。新语法在typescript里又用不了。

既然是jsx语法 就应该在语法上随从人家，vOn:click的写法太丑了，还有class也不能写成className

+1

[TimYi]

@chenjiahan <div onClick={() => {}} />这是旧版本的语法，最新的vue-cli里好像不好使了，无效。新语法在typescript里又用不了。

既然是jsx语法 就应该在语法上随从人家，vOn:click的写法太丑了，还有class也不能写成className

关键是两种都用不了，得用最麻烦的spread语法（手动捂脸）

[TimYi]

@xinayu 在typescript环境里无法使用vOn:click

[xuanhen2013]

@TimYi 使用 on={{click: func}}

[harvey-woo]

@chenjiahan 这样写的话，事件修饰符怎么加？

// jsx-utils.ts
import { L } from 'ts-toolbelt';

export const keys = <{ <T>(o: NonNullable<T>): Array<keyof T> }>Object.keys;

type Decorators = { stop: boolean, prevent: boolean, self: boolean };
const defaultDecorators: Decorators = {
  stop: false,
  prevent: false,
  self: false,
};
type Handler = (this: any, event: Event, ...args: any[]) => any;
type HandlerWrapper<F extends Handler> = {
  (handler?: F): (this: ThisType<F>, event: Parameters<F>[0], ...args: L.Tail<Parameters<F>>)
   => ReturnType<F>
} & { [k in keyof Decorators]: HandlerWrapper<F> } & {
  handler: (event: Parameters<F>[0]) => void
};

const generateWrapper = <F extends Handler>(params: Partial<Decorators>) => {
  const { stop, prevent, self } = params;
  const wrapper = ((fn?: F) => {
    return function handler(event, ...args) {
      if (prevent) {
        event.preventDefault();
      }
      if (stop) {
        event.stopPropagation();
      }
      if (fn && (!self || event.target === event.currentTarget)) {
        return fn.call(this, event, ...args);
      }
      return undefined;
    };
  }) as HandlerWrapper<F>;
  keys(defaultDecorators).forEach((k) => {
    if (!(k in params)) {
      wrapper[k] = generateWrapper({ ...params, [k]: true });
    }
  });
  wrapper.handler = (event) => {
    if (prevent) {
      event.preventDefault();
    }
    if (stop) {
      event.stopPropagation();
    }
  };
  return wrapper;
};

export const stop = generateWrapper({ stop: true });
export const prevent = generateWrapper({ prevent: true });
export const self = generateWrapper({ self: true });

import { stop, prevent, self } from './jsx-utils'

export default {
    // 使用 prevent，self，stop，三个方法
    // 或者直接返回 prevent.handler, stop.handler
    // 也可以 prevent.stop 这样链式使用
    render() {
        return <div 
            onClick={prevent.handler} 
            onMousedown={prevent.stop.self(() => { console.log('HelloWorld')})} />
    }
}

[DUAN930909]

on-click={ this.fun }

[mikepxq]

尽然 tsx 维护起来这么难
vue官方 就直接说不用 tsx的呢
免得，三方库也是遇到各种问题
vue底层也要做兼容的代码

[haoqunjiang]

TS 4.2 已经支持此语法。请自行升级项目中的 TypeScript 版本。

[galenjiang]

还有一个edge case没有考虑到，例如 emit('update:someValue'),
<SomeComponent vOn:update:someValue={callback} />
这时候编译不过。

[chenjiahan]

@galenjiang 最新版 TS 已经支持冒号了

[galenjiang]

@galenjiang 最新版 TS 已经支持冒号了

是两个冒号不是一个冒号
而且ts修复的是namespace, 但是vue奇怪的事件系统只是看起来像,但事实并不是。

[chenjiahan]

两个冒号没有必要把？ 直接 onUpdate:xxx 就可以

[galenjiang]

两个冒号没有必要把？ 直接 onUpdate:xxx 就可以

没效果，不触发事件。