如何在 vue 组件中实现 typescript 代码？

Posted 2023-04-14

【中文标题】如何在 vue 组件中实现 typescript 代码？

【英文标题】：How to implement typescript code into vue component?

【发布时间】：2020-03-11 19:45:06

【问题描述】：

https://github.com/bradmartin/nativescript-texttospeech

texttospeech 有用 TS 编写的文档。

如何将代码翻译成ns-VUE？

import  TNSTextToSpeech, SpeakOptions  from 'nativescript-texttospeech';

let TTS = new TNSTextToSpeech();

let speakOptions: SpeakOptions = 
  text: 'hello world',
;

TTS.speak(speakOptions); 

我不想使用 typescript，我只需要一个在 Nativescript-Vue 中说话的按钮。

提前致谢

【问题讨论】：

Typescript 只是 javascript 的上标。如果您有本机 javascript 代码，它的工作原理是一样的。构建时是否遇到任何错误？

【参考方案1】：

只需从speakOptions 中删除类型并将其从导入中删除：

import  TNSTextToSpeech  from 'nativescript-texttospeech';

let TTS = new TNSTextToSpeech();

let speakOptions = 
  text: 'hello world',
;

TTS.speak(speakOptions); 

【参考方案2】：

如果其他人正在尝试将 TS 转换为 vanilla JS，请尝试TypeScript Playground

这就是我想要做的。

<template>
  <Page>
    <ActionBar title="Welcome" />
    <StackLayout>
      <Label class="message" :text="speakOptions.text" col="0" row="0" />
      <Button text="talk" @tap="talk('welcome')" />
    </StackLayout>
  </Page>
</template>

<script >
import  TNSTextToSpeech  from "nativescript-texttospeech";

let TTS = new TNSTextToSpeech();

export default 
  data() 
    return 
      speakOptions: 
        text: "hello"
      
    ;
  ,
  methods: 
    talk: function(message) 
      this.speakOptions.text = message;
      TTS.speak(this.speakOptions);
    
  
;
</script>

<style scoped>
</style>