onFooBar will resolve to fooBar , not foo-bar as expected

[alonesuperman]

for example, I used el-pagination

firstly, I created its types

import { Pagination } from "element-ui"

interface ElPaginationProps1 extends ElPaginationBaseProps {
  total: number;
}
interface ElPaginationProps2 extends ElPaginationBaseProps {
  pagerCount: number;
}
type ElPaginationProps = ElPaginationProps1 | ElPaginationProps2

interface ElPaginationEvents {
  onSizeChange: number;
  onCurrentChange: number;
  onPrevClick: number;
  onNextClick: number;
}
export const ElPagination = tsx.ofType<ElPaginationProps, ElPaginationEvents>().convert(Pagination)

then when I use it

<ElPagination
        pageSize={1}
        currentPage={1}
        total={1}
        onCurrentChange={ num => console.log("hi") }
></ElPagination>

Above code does not work as expected. in vue dev tools you can see the ElPagination instance's $listener only has one which so called "currentChange"

In fact, I want listen the "current-change" event

Maybe someone will say: why don't u use "on-current-change" instead. If so, we will lose the type check, ide would not know the variable num was number

[wonderful-panda]

That is a behavior of babel-plugin-transform-vue-jsx, not a vue-tsx-support matter.

Below code is a workaround. Type checking works partially.

interface MyEvents {
  "onCurrent-change": number;
}

export const MyComponent= tsx.ofType<{}, MyEvents>().convert(...)

// Works as expected, num is infered as number
<MyComponent onCurrent-change={ num => console.log("hi") } />

// Fails as expected. (Type error)
<MyComponent onCurrent-change={ (str: string) => console.log("hi") } />

// Does not works as expected. TypeScript allows undefined hyphenated JSX attributes.
// This means TypeScript can't detect this typo.
<MyComponent onCurnt-change={ num => console.log("hi") } />

[alonesuperman]

Thank for your reply. The solution which used "onCurrent-change" certainly worked. However, it was so ugly.

Would you please consider add a new Option to Enable convert camel to hyphenated automatically

[wonderful-panda]

Would you please consider add a new Option to Enable convert camel to hyphenated automatically

No. It's not department of vue-tsx-support.

https://github.com/vuejs/jsx is the right place for such issue.

[alonesuperman]

got it. tks