TS typings of components should be more useful

[CarterLi]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

(this.$refs.input as Input).focus();

results in error:

ERROR in src/views/home/home.tsx:16:28
TS2749: 'Input' refers to a value, but is being used as a type here. Did you mean 'typeof Input'?
14 |   methods: {
15 |     fn() {
> 16 |       (this.$refs.input as Input).focus();
|                            ^^^^^
17 |     }
18 |   }
19 | });

Instead, you have to write the verbose and not-newbie-friendly code:

(this.$refs.input as InstanceType<typeof Input>).focus();

That works with vscode intellisense and type checking.

What does the proposed API look like?

(this.$refs.input as Input).focus();

should work as the old version does.

[zkwolf]

https://github.com/vuejs/rfcs/pull/210 似乎可以期待一下这个API？

[chsword]

可以这样，针对组件 Input 设计一个 InputInterface 的接口

interface InputInterface {
//这里对于 需要公开外部处理的methods 添加 方法签名,如
setValue(value: string | number, callback?: Function) ;
focus();
}

之后在调用时

defineComponent({
         setup(){
              const input =ref<InputInterface>(null);
              return { input }
         },
       methods: {
             fn() {
                  this.input.focus();
              }
       }
})

<a-input ref="input" />

[zkwolf]

看上去应该可以

[github-actions[bot]]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days

[CarterLi]

Unstale please