Vue + typescript:如何用类型注释computed？
在Vue + TypeScript中，我们可以使用类型注释来为computed属性添加类型。
首先，我们需要在Vue组件中定义一个computed属性，并使用类型注释来指定其返回值的类型。例如，假设我们有一个计算属性fullName，它返回一个字符串类型的值，我们可以这样写：
import { Component, Vue } from 'vue-property-decorator';
@Component
export default class MyComponent extends Vue {
// 使用类型注释指定返回值类型为字符串
get fullName(): string {
return this.firstName + ' ' + this.lastName;
}
}在上面的代码中，我们使用了string类型注释来指定fullName的返回值类型为字符串。
另外，如果我们需要使用其他组件中的属性或方法来计算computed属性，我们也可以使用类型注释来指定这些属性或方法的类型。例如，假设我们有一个组件OtherComponent，它有一个属性firstName，我们可以这样写：
import { Component, Vue } from 'vue-property-decorator';
import OtherComponent from './OtherComponent.vue';
@Component
export default class MyComponent extends Vue {
// 使用类型注释指定firstName的类型为字符串
firstName: string = '';
// 使用类型注释指定返回值类型为字符串
get fullName(): string {
// 使用类型注释指定OtherComponent的类型
const otherComponent = this.$refs.otherComponent as OtherComponent;
return this.firstName + ' ' + otherComponent.lastName;
}
}在上面的代码中，我们使用了string类型注释来指定firstName的类型为字符串，并使用了OtherComponent类型注释来指定otherComponent的类型为OtherComponent组件。
总结起来，使用类型注释来注释computed属性可以帮助我们在开发过程中更好地理解和维护代码，提高代码的可读性和可维护性。
关于腾讯云相关产品和产品介绍链接地址，由于要求不能提及具体的云计算品牌商，我无法提供相关链接。但你可以通过搜索引擎或腾讯云官方网站来获取相关信息。
相关·内容
以下构成部分：
<template lang="html">
<div>
<p>{{ bar }}</p>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export const FooBar = Vue.extend({
computed: {
bar: function() {
return this.foo;
}
},
da
浏览 10提问于2021-10-24得票数 5
回答已采纳
这里有很多关于如何使用JavaScript语言与Vue.js交互的文档，只有一点关于TypeScript的文档。问题是，如果computed组件是用TypeScript编写的，那么如何在vue组件中定义TypeScript属性呢？
根据的说法，computed是一个带有函数的对象，这些函数将根据它们的依赖属性进行缓存。
下面是我做的一个例子：
import Vue from 'vue';
import { Component } from "vue-property-decorator";
@Component({})
export default class
浏览 13提问于2018-08-23得票数 44
回答已采纳
我试图在另一个方法或内部方法中使用计算属性，并获得错误：Property 'comments' does not exist on type 'Vue'
import { Component, Vue } from 'vue-property-decorator'
@Component({
computed: {
comments(): Comment[] {
return this.$store.getters['comments/getComments'];
},
hasComments
浏览 1提问于2021-06-28得票数 0
回答已采纳
2回答
我正在尝试使用新的Vue插件来使用composition和TypeScript，但有些东西我不太理解。 我应该如何输入计算的属性？ import Vue from 'vue'
import { ref, computed, Ref } from '@vue/composition-api'
export default Vue.extend({
setup(props, context) {
const movieName:Ref<string> = ref('Relatos Salvajes')
const
浏览 22提问于2020-03-26得票数 22
回答已采纳
我正在尝试让typescript支持我的Nuxt项目。 我知道在返回组件数据时必须使用Vue.extend，如下所示： import Vue from 'vue';
type Data = {
a: number
}
export default Vue.extend({
data():Data{
const a = 3;
return {
a
}
}
}) 但是，如果我的组件有注入属性，它不会将这些属性附加到this类型。 import Vue from 'vue';
type Data = {
a: number
}
ex
浏览 46提问于2021-09-02得票数 2
最近，我将我们的vue.js2.x项目迁移到typescript，并基于evan-you在本期中的评论： https://github.com/vuejs/rfcs/pull/17#issuecomment-494242121 Class API提案正在被丢弃。因此，我使用的是基于选项的常规vue.js版本，它让我遇到了很多类型问题。 我想知道vuejs2.x组合api是否与typescript完全兼容？我应该用它来解决所有的问题吗？在这种情况下，最佳实践是什么？
浏览 33提问于2020-01-23得票数 1
回答已采纳
我有一个包含TypeScript的Vue3项目，我发现我无法访问从另一个计算属性中的一个计算属性返回的JS对象的属性(使用点符号或命名索引)。 因此，根据下面的代码，我的TS编译器在尝试读取this.user对象上的friends时会出现编译错误。这是有意义的，因为this.user是一个函数，但在Vue世界中，它被视为一个属性。如果删除lang="ts"部件，代码将正常工作。 <script lang="ts">
import { defineComponent } from "vue";
export default defi
浏览 78提问于2021-02-05得票数 3
回答已采纳
我使用TypeScript创建了一个vue组件，并在 和在 Property 'xxx' does not exist on type 'CombinedVueInstance>>'. 例如： 33:18 Property 'open' does not exist on type 'CombinedVueInstance>>'.
31 | methods: {
32 | toggle: function () {
> 33 |
浏览 1017提问于2019-05-06得票数 26
我正在使用带有TypeScript和包的Vue.js。根据文档，理论上我可以这样做：
import { Component, Inject, Provide, Vue } from 'vue-property-decorator'
const s = Symbol('baz')
@Component
export class MyComponent extends Vue {
@Provide() foo = 'foo'
@Provide('bar') baz = 'bar'
@Inject()
浏览 1提问于2017-10-25得票数 8
在Vue (v3)中，添加一个带有validator的属性会导致TypeScript错误，声明另一个属性不存在。我已经创建了一个组件来说明这个问题： 这是可行的： <template>
<div>{{myComputed}}</div>
</template>
<script lang="ts">
import { defineComponent, computed } from 'vue';
export default defineComponent({
name: 'MyCo
浏览 96提问于2021-06-24得票数 2
回答已采纳
我是Vue.js的新手，我正在Nuxt.js (v2.15.8)应用程序上通过Typescript使用它。 下面的代码运行良好。 export default Vue.extend({
name: 'MyComponent',
computed: {
isLatitudeValid() {
return this.form.latitude ? this.form.latitude >= -90 && this.form.latitude <= 90 :
浏览 149提问于2021-11-03得票数 1
回答已采纳
由于切换到并返回一个 (在我的例子中，使用构造以允许在模板中输入支持)，我已经失去了让检查的能力。这是因为它们不再由组件直接公开(道具仍然可用)。
如何在模板中获得良好的TypeScript支持，同时保留vue-devtools检查计算属性的能力？
下面是一个使用.vue文件的例子，它对vue-devtools很友好，但在模板中没有TypeScript支持：
SomeComponent.vue
<template>
<div>
<ul>
<li>{{ computedProperty }}</li>
&
浏览 33提问于2020-05-20得票数 2
我想知道，用JavaScript编写的VUE JS项目可以转移到TypeScript，而无需重写所有内容。我的朋友说通过VUE CLI是可能的，但是因为我没有找到一篇关于这种方式的文档或文章，所以我来问你。是否有人经历过这种情况，如果有人可以告诉我您是如何将VUE项目转移到TypeScript的。我的意思是用js编写的所有当前代码都要移到类型记录中。
浏览 1提问于2020-07-23得票数 9
回答已采纳
我目前在一个webpack项目中使用带有Typescript的Vue.js。 如我的tsconfig.json中的Recommended Configuration所示，我有： "strict": true, 在我的一个组件中，我有： declare interface Player {
cod: string,
param: string
}
export default Vue.extend({
name: 'basecomponent',
data() {
return {
players
浏览 53提问于2017-12-14得票数 49
回答已采纳
1回答
我开始在一个新的Vue项目中使用组合API，并开始使用TDD进行开发。此外，我开始使用TypeScript。 我创建了一个非常简单的组件Logo.vue <template>
<div>
<div class="c-logo__fullname">{{ fullName }}</div>
</div>
</template>
<script lang="ts">
import { defineComponent, computed } from '@v
浏览 11提问于2020-07-13得票数 3
1回答
我正试图找出如何在vue 3打字稿项目中输入vuex模块。这方面缺乏正式文件。
假设我有这样一个项目：
import { createStore, useStore as baseUseStore, Store } from 'vuex';
import { InjectionKey } from 'vue';
interface FruitState {
apple: boolean,
peach: boolean,
plum: boolean
}
const FruitModule = {
namespaced: tru
浏览 4提问于2022-02-19得票数 4
回答已采纳
1回答
我使用在网站上显示css代码。问题是我不知道如何用vuex更新状态
<div>
<codemirror v-model="code" />
<button @click="change">click</button>
{{ $store.state.background }}
</div>
methods: {
change() {
Vue.set(this.$store.state, "background", "#24
浏览 7提问于2022-01-28得票数 1
回答已采纳
1回答
我有一个奇怪的问题，我无法理解。每当我向组件添加计算属性时，其他方法都会显示为错误，其消息是“联合vue实例上不存在属性xy”。每当我再次删除计算属性时，错误就会消失。我在这里做错什么了？
我要添加/删除的计算属性是"isActive“。
export default Vue.extend({
name: "Collection",
props: { collection: { type: Object as () => Collection } },
data: () => ({
loading: false
}),
compo
浏览 3提问于2022-03-10得票数 0
回答已采纳
我正在扩展默认的Vue对象
export default (Vue) => {
Object.defineProperties(Vue.prototype, {
$http: {
get () {
return axiosInstance
}
}
})
}
我使用的是typescript，当然typescript不喜欢这样。我如何创建一个特定于项目的.d.ts文件，在vue类型脚本声明中添加上述扩展名？
浏览 6提问于2017-03-31得票数 7
1回答
我正在尝试用Vue3在Typescript中编写插件。然而，我从一开始就被如何正确地键入插件函数所困。 这就是我到目前为止所知道的： import MyComponent from './src/components/my-component.vue'
import { DefineComponent, Plugin } from 'vue'
const plugin: Plugin = {
install (app, options?: { [key: string]: any }) {
app.mixin({
浏览 20提问于2021-02-09得票数 0
我正在使用options，当试图在计算属性中访问Vue数据对象的属性时，我会在打字机中得到一个错误。
Property 'quantity' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, { item: unknown; total: unknown; menuItemCategories: any; }, Readonly<Record<never, any>>>'
该属性确实存在，因为页面能够使用计算的属性正确地加载和显示呈现的模板--
浏览 5提问于2020-06-06得票数 1
回答已采纳
我找不到一个直截了当的答案，而且我也不太擅长TS。如何将Vue中的这些计算属性转换为在TypeScript文件中使用？
computed: {
...mapGetters({
getLoggedInUserFirstName: "Common/getLoggedInUserFirstName",
getLoggedInUserLastName: "Common/getLoggedInUserLastName"
})
}
浏览 3提问于2020-10-15得票数 0
回答已采纳
有没有人知道应该如何用Vue3和TypeScript实现类型扩充的工作示例？我一直在尝试在Vue3中使用相同的Vue2文档，但没有成功，并且花了过去3个小时的搜索也没有任何结果。 看起来应该对vue-class-component模块中的Vue对象进行扩充才能工作，但是该怎么做呢？ 我的实现类似于以下内容： 有什么建议吗？ https://vuejs.org/v2/guide/typescript.html#Augmenting-Types-for-Use-with-Plugins import { App, Plugin } from "vue";
export inte
浏览 45提问于2020-09-29得票数 4
回答已采纳
我在Vue.js应用程序上与TypeScript一起工作，但我对TypeScript的了解并不多。
代码如下：
interfaces.ts：
export interface UnitFound {
payment_message: string;
}
MapBlock.vue：
<script lang="ts">
import { UnitFound } from "@/Interfaces";
export default defineComponent({
...
computed: {
PaymentMessage()
浏览 4提问于2021-05-08得票数 0
回答已采纳
在使用mapGetters时，TypeScript无法看到绑定到Vue组件的getters是什么，因此它会抛出错误。示例：
import Vue from 'vue';
import { mapActions, mapGetters } from 'vuex';
export default Vue.extend({
computed: {
...mapGetters('ui', ['navCollapsed']),
minimizerIconClass(): string {
return `
浏览 19提问于2018-01-28得票数 10
我在用
流行！_OS 21.04 (Ubuntu)
节点v16.11.1
npm v7.5.2
Vue CLI v4.5.13
并希望使用创建一个应用程序，直到Vuex5准备就绪为止。我跑
vue create foo
# manually select TypeScript and Jest for unit tests
cd foo
npm install pinia
在生成的example.spec.ts文件中，我设置了一个自定义类型、一个示例存储和一个测试。
import { defineStore, setActivePinia, createPinia
浏览 1提问于2021-10-18得票数 2
回答已采纳
1回答
将支柱值传递给组件内的计算属性
、、、、
在组件中的计算属性函数中使用支柱值是否可能/良好做法？如果是这样的话，我如何用这个道具构建返回呢？
Carousel.vue
props: [
'source',
],
computed: {
items () {
return this.$store.state.(prop value source here).list
}
}
store/categorya.js (分类b和分类c相同)
import categorya from '(...)'
export const state = () => ({
list: ca
浏览 5提问于2020-02-28得票数 1
回答已采纳
我有SFC (单文件vue组件)，它使用TypeScript，渲染函数和CSS模块 <script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: {
mode: {
type: String,
default: 'td', // or th
},
},
render(h) {
return h('tr', [
'preview',
浏览 21提问于2019-01-02得票数 7
回答已采纳
我是d3.js的新手，我正在尝试将重写为vue3 + typescript
请在下面找到我的代码
<template>
<svg
class="line-chart"
:viewBox="viewBox"
>
<g transform="translate(0, 10)">
<path
class="line-chart__line"
:d="path(data)"
/>
浏览 1提问于2021-04-05得票数 1
我的项目是用Vue js开发的，它有用javascript开发的存储，我集成了用vue-typescript开发的新组件，这个组件中的所有脚本都是用typescript开发的。
为了导入状态变量，我尝试了两种方法
使用Vuex
import { mapGetters, mapState, mapActions, mapMutations, createNamespacedHelpers } from 'vuex'
@Component({
computed: {
...mapState([
'allowedUrls'
])
浏览 5提问于2018-11-16得票数 0
请参阅此最小示例
<template>
<div>
<button @click="toggleShow">Toggle</button>
<div v-if="show">Show</div>
</div>
</template>
<script lang="ts">
import { extend } from "vue";
import { debounce } from "loda
浏览 0提问于2021-01-08得票数 0
1回答
单元测试计算属性
、、、
我目前正在尝试对计算的属性进行单元测试。
我有一个fileOne.ts文件：
export const fileOne = () => {
const fx1 = computed ( () => { ... } );
const fx2 = computed ( () => { ... } );
const fx3 = computed ( () => { ... } );
}
这个'fileOne‘也在Vue.vue中使用：
<template>
...
</template>
<script
浏览 1提问于2022-05-30得票数 0
components/Employees.vue的Snip
<script>
import Vue from 'vue';
export default Vue.extend({
props: ['employees', 'filter', 'fields_employee', 'selected'],
computed: {
filteredEmployees() {
return this.employees.filter(this.filt
浏览 0提问于2019-03-02得票数 1
回答已采纳
我有一个使用Vue的小型.js文件，我希望使用TypeScript编译器进行类型检查：
function main() {
new Vue({
el: 'ts-message',
template: '<div>Hello</div>',
});
}
如果我试图用tsc对其进行类型检查，编译器会抱怨它找不到Vue的声明，尽管我已经安装了vue npm包：
$ tsc --allowJs --checkJs --noEmit src/main.js
src/main.js:6:9 - err
浏览 1提问于2019-06-29得票数 2
回答已采纳
将VueJS项目从JavaScript + Options迁移到TypeScript + Composition，我逐渐找到了与大多数内容相当的东西。我正在努力解决的一件事是v-model特性。我找到了一个，其中作者创建了一个可组合的函数，可以在希望实现v-model的组件中重用。我现在试图用TypeScript编写一个等价的函数。
以下是原始的JS代码：
import { computed } from 'vue'
export function useModelWrapper(props, emit, name = 'modelValue') {
re
浏览 8提问于2021-10-21得票数 2
回答已采纳
1回答
当typescript/vue to中的vuex状态发生变化时，我想在组件中调用一个方法，我可以使用模板中的getters读取vuex状态的值，但不知道如何读取组件类中的数据。 我正在使用progressBar方法读取vuex状态。当状态从false变为true时，我想调用loadList方法。像这样 if(progressBar == true)
{
this.loadList('')
} 下面是我的组件类 <script lang="ts">
import { Options, Vue } from "vue-class-comp
浏览 5提问于2020-12-30得票数 0
1回答
这里有一个对象，有几个不同的键和值，每个值的道具都不同，如何用TypeScript最好地描述这个对象？尤其是setValue方法，如何限制creatureType、prop和value的类型 const object = {
john: {
name: '',
age: 18
},
alien: {
height: 20,
power:100,
},
setValue(creatureType) {
const self = this
浏览 21提问于2019-12-24得票数 2
回答已采纳
我得到了一个问题，似乎只是我的编译器的问题。它不喜欢它找不到我在数据部分定义的属性。如果我将'this‘替换为'(this as any)’，它就会运行得很好。这让我相信我的typescript有一个问题，我需要解决。该错误消息是针对我的情况的，但我不确定如何修复它。 ? 编辑以添加shims-vue.d.ts declare module '*.vue' {
import Vue from 'vue';
export default Vue;
}
浏览 19提问于2020-07-17得票数 1
回答已采纳
2回答
我使用TypeScript创建了一个Vue 3应用程序。在src文件夹中，我创建了一个新的enum color.ts
enum Color {
Red,
Blue
}
export default Color;
我创建了一个组件ColorDisplay.vue
<template>
<div>
{{ color }}
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
浏览 3提问于2021-10-07得票数 4
回答已采纳
完全错误：
[plugin:vite:vue] Transform failed with 1 error:
/home/projects/vue3-vite-typescript-starter-jkcbyx/src/App.vue:33:73:
ERROR: Invalid assignment target
"/home/projects/vue3-vite-typescript-starter-jkcbyx/src/App.vue:33:73"
Invalid assignment target
31 | ? (_openBlock(), _crea
浏览 57提问于2022-11-15得票数 2
回答已采纳
4回答
我正在尝试学习使用TypeScript编写Vue 3组合API，特别是如何发出具有严格类型的有效负载的事件。
下面有一个例子，但我不确定这是否正确。那么，我的问题是，是否还有其他方法来发出具有严格类型的有效负载的事件？
示例
我使用了这个包：，并让它使用下面的示例，在这个示例中，我将一个布尔值从子组件传递给父组件：
子组件：
<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
import { CompositionAPIEmit } from 'vue-
浏览 4提问于2021-04-14得票数 9
2回答
我有一些文本：
Hover me
将光标放在文本上时，我希望它更改为：
I'm being hovered
将光标移开时，文本应改回为：
Hover me
我可以用CSS做到这一点，但是我不知道如何用Vue做到这一点？
浏览 0提问于2019-04-13得票数 1
2回答
导出默认语句在<script setup>中似乎不起作用。
如果我试图在test.vue中导出它
<template>
<div id="test" class="test">
</div>
</template>
<script setup>
const x = 5
export default {
x
}
</script>
<style scoped lang="scss">
</style>
然后导入到另
浏览 4提问于2022-03-06得票数 7
使用以下代码： @Component({
props: {
value: String
},
mounted() {
//Do something with `bar`
this.bar = this.bar + " is now mounted";
}
})
export default class Foo extends Vue {
private bar : string = "This element";
} 您将在typescript控制台中看到以下错误，但代码
浏览 16提问于2020-09-26得票数 0
无论是TypeScript、Vue还是Node生态系统，我都不是很有经验。
我使用Vue 3和TypeScript创建了一个使用Vue CLI创建的工作设置，与vue create生成项目和配置的方式大致相同。如果我正确理解它，Babel将在我的"browserslist"中引用package.json配置，并添加多填充/重写代码来处理遗留浏览器。TypeScript编译器也有--target和--lib选项，这些选项似乎具有类似的功能。
我在Vue项目中编写的TypeScript代码是否被转换了两次，首先是TypeScript编译器，然后是Babel？如果是的话，是否有办法避
浏览 2提问于2021-02-22得票数 10
我刚刚使用vue-cli vue upgrade typescript命令升级到了typescript。命令成功退出。 然而，现在，以前在javascript中工作的相对导入不能再被解析。 我有以下Home零部件，它导入了另一个零部件： <script lang="ts">
import Navbar from "./Navbar"
export default {
name: "Home",
components: {
Navbar
}
浏览 111提问于2020-03-28得票数 0
回答已采纳
我正在尝试使用服务器端渲染(SSR)和Typescript构建一个堆栈。一切看起来都很好，但我得到了错误：TypeError: Cannot read property 'render' of undefined。下面是完整的堆栈跟踪：
TypeError: Cannot read property 'render' of undefined
at normalizeRender (/Users/shoun/Documents/repositories/vuejs-ssr-typescript/node_modules/vue-server-render
浏览 3提问于2017-04-08得票数 11
1回答
老实说，对于所有这三种技术，vue、gql和typeScript，我都是很新的，不管怎么说，问题很简单。我使用useQuery来获取数据，并使用计算的支柱来访问结果。我想在返回el之前根据'locationId‘对’俱乐部‘进行过滤，但是我做不到，我尝试创建了一个可能不是一个好选择的界面，下面是代码：
const { result } = useQuery(
gql`
query getClubAndLocations {
getLocations {
_id
name
浏览 10提问于2022-08-03得票数 0
回答已采纳
在我的输入组件中，我有以下代码，以便使输入上的v-model作为一个组件工作： computed: {
inputListeners: function() {
const vm = this;
return Object.assign({},
this.$listeners,
{
input: (event: any) => {
vm.$emit('input', event.target.value);
},
},
);
}, 这是一个官方的例子：https://vuejs.org/v2/g
浏览 58提问于2019-01-18得票数 3
因此，我刚刚将我的项目从js改为typescript，并且我有以下代码来设置vue资源：
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import VueResource from 'vue-resource'
Vue.use(VueResource)
Vue.http.headers.common['Content-Type'] = 'application/json'
然而，ty
浏览 0提问于2017-10-25得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
