vue 2.7 template type check for inline function

[troy351]

I'm using vue 2.7 with TypeScript

<template>
<div>
  <div v-for="(item, index) in arr" :key="index">
    <el-input type="text" :value="item" @input="(val) => doSomething(index, val)" />
  </div>
</div>
</template>

As code shown above, the problem is @input="(val) => doSomething(index, val)" part.

• ts error Parameter 'val' implicitly has an 'any' type. since noImplicitAny in tsconfig was enabled
• Vue 2.7 doesn't support ts syntax in template as the CHANGELOG said

  ❌ TypeScript syntax in template expressions (incompatible w/ Vue 2 parser)

• ts-ignore will causing prettier add leading semi colon which is not valid attribute value

  @input="
   //@ts-ignore
   ;(val) => doSomething(index, val)
  "
  

• Since val is an argument so asAny magic won't work

Any workaround I can do?

[troy351]

Solved by disabling both ts and prettier

@input="
 // @ts-ignore
 // prettier-ignore
 (val) => doSomething(index, val)
"

this method is not worked, prefer the below one

[lsdsjy]

I think it shouldn't trigger the noImplicitAny error because TS has contextual typing which would infer val as Event since input is of type ((payload: Event) => void) | undefined. What do you see when you hover over input?

[troy351]

It's just a demo. In the actual case, <input> could be any custom component or third party component which would unlikely infer val

[lsdsjy]

I see. Instead of @ts-ignore you can use something similar to the asAny trick:

@input="anyFn((val) => doSomething(index, val))"

, where const anyFn = (fn: (val: any) => any) => fn. And you can annotate it more accurately if you want.

[troy351]

Oh, I didn't think of it. Thanks!

[troy351]

@input="anyFn((val) => doSomething(index, val))" will compile to

on: {
    "command": function($event) {
        _vm.anyFn((val) => _vm.doSomething(index, val))
    }
}
// which should be 
on: {
    "command": (val) => _vm.doSomething(index, val)
}

[lsdsjy]

Try const anyFn = function (fn: (val: any) => any) { fn.apply(this, arguments) }?

[troy351]

It won't work, val should be directly declared as an argument of command handler function, or it won't be reached

[lsdsjy]

Isn't $event equal to val, both representing the command event's payload?

[troy351]

You are right, but again, real world case is mush more complicated, like multiple arguments

I ended up modify the vue source code to make it recognize the leading comment as a function expression

change this line to const fnExpRE = /^(\/\/.*\s*)*(([\w$_]+|\([^)]*?\))\s*=>|function(?:\s+[\w$]+)?\s*\()/

Considering whether to make it a PR or not

[xiaoxiangmoe]

try use

<template>
<div v-for="(item, index) in arr" :key="index">
  <input type="text" :value="item" @input="doSomething(index, $event)" />
</div>
</template>

[troy351]

input could be el-input or other custom components which doesn't support $event

[xiaoxiangmoe]

Why they don't support $event?

[troy351]

$emit support multiple arguments, and $event only got one. Works for most cases though

[xiaoxiangmoe]

Maybe you should create a bug in prettier —— add leading semi colon will break vue event listener

[troy351]

Not only the leading semi problem.
As the previous comment said, even I add both ts-ignore and prettier-ignore, vue template compiler won't treat leading comment (i.e. //) function expression as a function expression due to the regular expression test

[xiaoxiangmoe]

Maybe also create an issue for vue 2.7 and vue 3.

[troy351]

That's what I'm thinking about.

[johnsoncodehk]

LGTM:

Can you reproduce this problem in https://github.com/johnsoncodehk/volar-starter/tree/vue2?

[troy351]

My bad, I've updated code snippet, using <el-input>(which is from element-ui) instead of <input>

[xiaoxiangmoe]

Can you provide me a demo repo？

[troy351]

check this

[xiaoxiangmoe]

Use this fix temporarily:

// file: components.d.ts
declare module "element-ui/types/input" {
  interface ElInput {
    $props: {};
    $emit: {
      (event: "input", val: string, maybeAnother: number): void
    }
}
declare module "vue" {
  interface GlobalComponents {
    ElInput: typeof import("element-ui/types/input").ElInput;
  }
}
export {};

[xiaoxiangmoe]

We can create a PR for element-ui types latter

[troy351]

Thanks

[Papooch]

For late-comers like me, the asAny trick works perfectly well:

<el-input type="text" :value="item" @input="(val) => doSomething(index, asAny(val))" />

const asAny = (val: any) => val