Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

uni-app的内置组件,没有相关的typescript类型定义,怎么引入 #4750

Open
ShipinZ opened this issue Feb 28, 2024 · 5 comments

Comments

@ShipinZ
Copy link

ShipinZ commented Feb 28, 2024

问题描述
如下代码:

<template>
	<view>
		<input class="input" focus v-model="value" @input="onInput" />
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	const value = ref('')
	function onInput(v : any) {
		console.log(v.detail.value)
	}
</script>

现在onInput函数的类型输入是any,我想让v.detail.value与具有类型提示,怎么才能让他具有实际的类型。我在HBuilderX中尝试了
InputEvent,但是这个类型好像和组件中使用的不太一样,这是我通过alt + 点击进入看到的类型定义:

interface InputEvent extends UIEvent {
    readonly data: string | null;
    readonly dataTransfer: DataTransfer | null;
    readonly inputType: string;
    readonly isComposing: boolean;
    getTargetRanges(): StaticRange[];
}
/** Simple user interface events. */
interface UIEvent extends Event {
    readonly detail: number;
    readonly view: Window | null;
    /** @deprecated */
    readonly which: number;
    /** @deprecated */
    initUIEvent(typeArg: string, bubblesArg?: boolean, cancelableArg?: boolean, viewArg?: Window | null, detailArg?: number): void;
}

系统信息:

  • HBuilderX版本 [3.99]

补充信息
其中v.detail.value是input组件官方文档中描述的属性:
image

@Alicia0818
Copy link

试试原生事件?

<template>
  <input type="text" @input="_input">
</template>

<script setup lang="ts">
  const _input = (e: Event) => {
    // 这行日志?
    console.log((e.target as HTMLInputElement).value)
  }
</script>

@ShipinZ
Copy link
Author

ShipinZ commented Mar 4, 2024

是undefined
image

@Alicia0818
Copy link

是undefined image

试了下:小程序可以,但Web不行

@xiaohe0601
Copy link

xiaohe0601 commented Mar 5, 2024

试试 @uni-helper/uni-app-types

<template>
  <input @input="onInput"></input>
</template>

<script lang="ts" setup>
import type { InputOnInputEvent } from "@uni-helper/uni-app-types";

function onInput(event: InputOnInputEvent) {
  console.log(event.detail.value);
}
</script>

@ShipinZ
Copy link
Author

ShipinZ commented Mar 5, 2024

试试 @uni-helper/uni-app-types

<template>
  <input @input="onInput"></input>
</template>

<script lang="ts" setup>
import type { InputOnInputEvent } from "@uni-helper/uni-app-types";

function onInput(event: InputOnInputEvent) {
  console.log(event.detail.value);
}
</script>

完美解决,十分感谢

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants