web-dev-qa-db-ja.com

typescriptを使用してVue.jsで計算された小道具を使用する方法

Javascript言語を使用してVue.jsを操作する方法と、TypeScriptについて少しだけのドキュメントがたくさんあります。問題は、TypeScriptで記述されている場合、computedコンポーネントでvue小道具を定義する方法です。 公式の例computedによると、依存する小道具に基づいてキャッシュされる関数を持つオブジェクトです。これが私が作った例です：

import Vue from 'vue';
import { Component } from "vue-property-decorator";

@Component({})
export default class ComputedDemo extends Vue {
    private firstName: string = 'John';
    private lastName: string = 'Doe';
    private computed: object = {
        fullName(): string {
            return `${this.firstName} ${this.lastName}`;
        },
    }
}

そしてhtml：

<div>
    <h1>Computed props ts demo</h1>
    <ul>
        <li>First name: {{firstName}}</li>
        <li>Last name: {{lastName}}</li>
        <li>Together: {{fullName}}</li>
    </ul>
</div>

3番目のリスト項目は何も出力しません。この場合、computedを定義する方法を教えてください。

typescriptvue.jsvuejs2
14
Lev Khruschev

プロパティアクセサを使用して、計算されたプロパティを宣言できます（ https://github.com/vuejs/vue-class-component ）。ゲッターは、入力を入力するとすぐにトリガーされます。例を見る

<template>
    <div>
        <input type="text" name="Test Value" id="" v-model="text">

        <label>{{label}}</label>
    </div>

</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";

@Component({})
export default class About extends Vue {
    private text = "test";

    get label() {
        return this.text;
    }
}
</script>
27
Jeremy Walters

Vueの宣言ファイルは循環的であるため、TypeScriptは特定のメソッドのタイプを推測するのが難しい場合があります。このため、renderやcomputeのメソッドの戻り型に注釈を付ける必要がある場合があります。

import Vue, { VNode } from 'vue'

const Component = Vue.extend({
  data () {
    return {
      msg: 'Hello'
    }
  },
  methods: {
    // need annotation due to `this` in return type
    greet (): string {
      return this.msg + ' world'
    }
  },
  computed: {
    // need annotation
    greeting(): string {
      return this.greet() + '!'
    }
  },
  // `createElement` is inferred, but `render` needs return type
  render (createElement): VNode {
    return createElement('div', this.greeting)
  }
})

型の推測やメンバーの補完が機能しない場合は、特定の方法に注釈を付けると、これらの問題に対処できる場合があります。 --noImplicitAnyオプションを使用すると、これらの注釈のないメソッドの多くを見つけるのに役立ちます。

詳細

2
Badgy