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

【问题标题】：How to implement typescript code into vue component?如何在 vue 组件中实现 typescript 代码？
【发布时间】：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 代码，它的工作原理是一样的。构建时是否遇到任何错误？

标签： typescript vue.js nativescript-vue

【解决方案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>

【讨论】：