Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

How to make defineElement work with typescript?#191

Unanswered
slaweet asked this question inQuestions
Discussion options

Context

I'm trying to create a custom element used inhttps://wails.io/ based app, but I assume that's not relevant. The essence of the component is the snippet below.

Expected behaviour

This component (or a slight modification of it) works with no typescript errors

<template>  <ElementLayout>    <template #element>      <buttontype="button"@click="selectPath"      >        Select file      </button>      <input:id="fieldId":value="value"type="text"v-bind="{ ...aria }"@input="handleInput"      >    </template>  </ElementLayout></template><script lang="ts">import {PropType,toRefs }from'vue';import {defineElement }from'@vueform/vueform';import {OpenFileDialog }from'@wailsjs/go/main/App';exportdefaultdefineElement({  name:'FileselectElement',  props: {    directory:Boolean,    filters: {      type:ArrayasPropType<{ DisplayName:string, Pattern:string}[]|null>,default: ()=>null,    },  },  setup(props:any, {element }:any) {const { handleInput, value }=element;const { filters }=toRefs(props);asyncfunction selectPath():Promise<void> {const result=OpenFileDialog({ DefaultFilename:value.value,...(filters.value&& { filters:filters.value }) });if (result) {element.update(result);      }    }return {...element,selectPath,handleInput,value,    };  },});</script>

Actual behaviour

The user-facing functionality works well only if I add//@ts-nocheck comment to the beginning of the script to skip typescript checks. But if I want typescript enabled, I get the following errors (Essentially all the stuff exposed throughsetup is not available in the template).

vue-tsc --noEmitsrc/components/FileSelectElement.vue:3:16 - error TS2339: Property'element' does not exist ontype'{ field: VNode<RendererNode, RendererElement, { [key: string]: any; }>[]; label: VNode<RendererNode, RendererElement, { ...; }>[]; ... 4 more ...; after: VNode<...>[]; }'.3<template#element>~~~~~~~src/components/FileSelectElement.vue:6:17 - error TS2339: Property'selectPath' does not exist ontype'{}'.6         @click="selectPath"~~~~~~~~~~src/components/FileSelectElement.vue:12:14 - error TS2339: Property'fieldId' does not exist ontype'{}'.12         :id="fieldId"~~~~~~~src/components/FileSelectElement.vue:13:17 - error TS2339: Property'value' does not exist ontype'{}'.13         :value="value"~~~~~src/components/FileSelectElement.vue:15:22 - error TS2339: Property'aria' does not exist ontype'{}'.15         v-bind="{ ...aria }"~~~~src/components/FileSelectElement.vue:16:17 - error TS2339: Property'handleInput' does not exist ontype'{}'.16         @input="handleInput"~~~~~~~~~~~

Any suggestions how to make this work with typescript? Or a link to an example app where it works with typescript?

You must be logged in to vote

Replies: 2 comments 3 replies

Comment options

@adamberecz any chance you can chime in here we have the same problem that we need to add//@ts-nocheck everywhere which is not an option in the long run

You must be logged in to vote
0 replies
Comment options

Unfortunately Vueform is behind in TS support. It only has a generated definition file which quite simple.

Couldthis be something useful here?

You must be logged in to vote
3 replies
@matthiasPOE
Comment options

Hi@adamberecz thanks yea unfortunately its not useable. In our case we are also using Vue Composition API so the declarations are completely missing when creating custom form builder elements

@adamberecz
Comment options

Vueform 1.0 wasn’t built with TypeScript in mind, and that’s the core issue here. We might be able to find asemi-hacky workaround to make it function without using//@ts-nocheck, but that wouldn’t make it truly type-safe. The next version will have full TypeScript support, so in the long run, that’s the real solution to this problem.

@matthiasPOE
Comment options

Awesome stuff thats great to hear!

Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment
Category
Questions
Labels
None yet
3 participants
@slaweet@adamberecz@matthiasPOE

[8]ページ先頭

©2009-2025 Movatter.jp