I am using vue 3 to write an app with typescript, when I define the function in vue 3 setup block like this(add the MouseEvent type limit for parameter e):
const safeTranslate = (e: MouseEvent) => {
const transWord = computed(() => getters["Trans/getTransWord"])
if (transWord && transWord.value && transWord.value.trim().length > 0) {
doTranslate(transWord.value.trim(),MessageType.SELECTION_TRANSLATE);
setTranslateResultPosition(e);
}
};
shows error:
ERROR in ./src/public/widget/translator/TranslatorPop.vue?vue&type=template&id=6bc385e0&scoped=true&ts=true (./node_modules/ts-loader/index.js??clonedRuleSet-1!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[11].use[0]!./src/public/widget/translator/TranslatorPop.vue?vue&type=template&id=6bc385e0&scoped=true&ts=true)
Module build failed (from ./node_modules/ts-loader/index.js):
Error: TypeScript emitted no output for /Users/xiaoqiangjiang/source/reddwarf/frontend/reddwarf-translate-plugin/src/public/widget/translator/TranslatorPop.vue.ts.
at makeSourceMapAndFinish (/Users/xiaoqiangjiang/source/reddwarf/frontend/reddwarf-translate-plugin/node_modules/ts-loader/dist/index.js:52:18)
at successLoader (/Users/xiaoqiangjiang/source/reddwarf/frontend/reddwarf-translate-plugin/node_modules/ts-loader/dist/index.js:39:5)
at Object.loader (/Users/xiaoqiangjiang/source/reddwarf/frontend/reddwarf-translate-plugin/node_modules/ts-loader/dist/index.js:22:5)
@ ./src/public/widget/translator/TranslatorPop.vue?vue&type=template&id=6bc385e0&scoped=true&ts=true 1:0-307 1:0-307
@ ./src/public/widget/translator/TranslatorPop.vue 1:0-94 8:68-74
@ ./src/content/handler/PageEvent.ts 1:0-73 44:30-43
@ ./src/content/index.ts 1:0-79 4:36-48 7:8-26
webpack 5.67.0 compiled with 1 error in 162 ms
seems could not add event type in the typescript, I already tried to pass the event when invoke function in template like this:
<button type="button" class="translate-pop-button" @click="safeTranslate($event)">
<span class="reddwarf-btn-icon"></span>
</button>
still did not fix this problem. how to add event type limit in typescript function define? Am I missing something?