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

关键词：

【中文标题】如何在 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>

【讨论】：

如何在 React TypeScript 中实现 e 和 props？

】如何在ReactTypeScript中实现e和props？【英文标题】：HowtoimplementeandpropsinReactTypeScript?【发布时间】：2020-07-2819:11:45【问题描述】：我有一个JS组件，我在其中定义了一些普通的jsx函数和状态，现在我想将它们用作tsx文件中的道具... 查看详情

如何在vue2中实现组件props双向绑定

Vue2.x相比较Vue1.x而言，升级变化除了实现了Virtual-Dom以外，给使用者最大不适就是移除的组件的props的双向绑定功能。以往在Vue1.x中利用props的twoWay和.sync绑定修饰符就可以实现props的双向绑定功能，但是在Vue2中彻底废弃了此功能... 查看详情

如何在 TypeScript 中实现睡眠功能？

】如何在TypeScript中实现睡眠功能？【英文标题】：HowtoimplementsleepfunctioninTypeScript?【发布时间】：2016-10-1209:23:19【问题描述】：我正在使用TypeScript在Angular2中开发一个网站，我想知道是否有办法实现thread.sleep(ms)功能。我的用例是... 查看详情

我想在辅助函数中操作 React 类组件中存在的状态。我想在 Typescript 中实现相同的目标

...我想在辅助函数中操作React类组件中存在的状态。我想在Typescript中实现相同的目标【英文标题】：IwanttomanipulatethestatepresentinReactclasscomponentinahelperfunction.IwanttoachievethesameinTypescript【发布时间】：2020-06-0201:55:40【问题描述】：我想... 查看详情

在 Typescript 中实现接口时如何定义私有属性？

】在Typescript中实现接口时如何定义私有属性？【英文标题】：HowtodefineaprivatepropertywhenimplementinganinterfaceinTypescript?【发布时间】：2016-10-1400:02:18【问题描述】：我在我的项目中使用TypeScript，但遇到了一个问题。我正在定义这样的... 查看详情

如何在 TypeScript 中实现的接口中进行构造函数重载？

】如何在TypeScript中实现的接口中进行构造函数重载？【英文标题】：HowcanIdoconstructoroverloadinginaimplementedinterfaceinTypeScript?【发布时间】：2016-08-0203:24:09【问题描述】：我试图重载实现接口的类的构造函数，但出现以下错误：[0]app/... 查看详情

如何在vue中实现拖拽(代码片段)

1、npmi vuedraggable2、在组件中引入importvuedraggablefrom'vuedraggable';3、<template><vuedraggableclass="wrapper"v-model="list"><transition-group><divv-for& 查看详情

如何让一个类在 Typescript 中实现调用签名？

】如何让一个类在Typescript中实现调用签名？【英文标题】：HowtomakeaclassimplementacallsignatureinTypescript?【发布时间】：2012-09-2723:45:51【问题描述】：我在typescript中定义了如下接口：interfaceMyInterface():string;这个接口只是引入了一个不... 查看详情

如何使用 jwt 在 typescript 中实现更改密码 API？

】如何使用jwt在typescript中实现更改密码API？【英文标题】：HowtoimplementthechangepasswordAPIintypescriptwithjwt?【发布时间】：2021-09-0202:19:20【问题描述】：我创建了登录api并在其中实现了jwt。现在我正在尝试使用带有cookie或本地存储的jw... 查看详情

在 Typescript 项目中实现 react-router PrivateRoute

】在Typescript项目中实现react-routerPrivateRoute【英文标题】：Implementreact-routerPrivateRouteinTypescriptproject【发布时间】：2019-04-0520:20:49【问题描述】：以下是react-router的示例，说明如何为受保护的路由添加组件：functionPrivateRoute(component:... 查看详情

在javawebproject中实现vue异步组件加载

...试单页，是不是显得更优雅。接着就接触到了vue-router、组件、异步组件这些关键字，本以为把页面定义为xxx.vue放到webapp下 查看详情

如何在 Vue 应用程序（使用 Vuetify.js）中实现带有验证的简单表单？

】如何在Vue应用程序（使用Vuetify.js）中实现带有验证的简单表单？【英文标题】：HowtoimplementasimpleformwithvalidationinaVueapp(withVuetify.js)?【发布时间】：2018-06-0912:32:08【问题描述】：我正在尝试使用Vuetify.js示例在使用Vue.js构建的网... 查看详情

如何在 vue2editor 中实现 Quill Emojis？

】如何在vue2editor中实现QuillEmojis？【英文标题】：HowtoimplementQuillEmojisinvue2editor?【发布时间】：2019-02-0701:45:02【问题描述】：我尝试将QuillEmojis添加到编辑器，但出现控制台错误UncaughtReferenceError:Quillisnotdefined我正在使用Laravel5.6和... 查看详情

在 Vue.js 应用程序中实现屏幕控制台日志组件

】在Vue.js应用程序中实现屏幕控制台日志组件【英文标题】：ImplementonscreenconsolelogcomponentinVue.jsapp【发布时间】：2020-08-3112:25:52【问题描述】：我正在构建一个Vue.js应用程序，该应用程序将在我无法访问开发工具控制台（例如游... 查看详情

如何在typescript中实现redux中间件类(代码片段)

根据Redux的typescript定义，应该实现这些接口来制作middelware：/*middleware*/exportinterfaceMiddlewareAPI<DextendsDispatch=Dispatch,S=any>dispatch:DgetState():S/***Amiddlewareisahigher-orderfunctionthatcomposesadispatchfunction*toreturnanewdispatchfunction.Itoftenturnsasyncacti... 查看详情

在 typescript 中实现 tree-shaking

】在typescript中实现tree-shaking【英文标题】：Implementtree-shakingintypescript【发布时间】：2021-12-2910:09:24【问题描述】：我正在使用TypeScript和OpenTelemetry构建一个可重复使用的遥测库。我正在尝试了解如何实现tree-shaking以便消费者可以... 查看详情

在 Typescript 中实现 Bull Queue

】在Typescript中实现BullQueue【英文标题】：ImplementingBullQueueinTypescript【发布时间】：2020-11-0317:37:27【问题描述】：我尝试在Typescript和NestJS中实现Bull队列，我的代码：@Injectable()exportclassMailServiceconstructor(@InjectQueue(\'mail\')privatereadonly... 查看详情

如何在 ReactJS 中实现带有受控组件的动态表单？

】如何在ReactJS中实现带有受控组件的动态表单？【英文标题】：HowtoimplementadynamicformwithcontrolledcomponentsinReactJS?【发布时间】：2017-07-0801:58:08【问题描述】：当我查看controlledformcomponentsinreact.jsofficialwebsite参考中的示例时，我想知... 查看详情