Typescript无法识别Vue组件上的prop值

Question

我有以下Vue组件。它的目的是构造一个通用的侧栏，该侧栏用于两次或三次使用不同的数据

<template>
    <div>
        <h5>{{ title }}</h5>
        <div v-for="prop of data" :key="prop.id">
            <router-link :to="path(prop.id)">{{ prop.name }}
            <i class="material-icons right">edit</i></router-link>
        </div>
    </div>
</template>

<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
    props: {
        data: Array,
        title: String,
        pathbase: String
    },
    methods: {
        path(id): string {
            return `${this.$props.pathbase}/${id}`;
        }
    }
});
</script>

我的问题是这个。为什么我必须在这里使用this.$props.pathbase来访问pathbase值？为什么this.pathbase被Typescript视为“无效”？这不是我第一次尝试不使用$props的道具，但这是Typescript第一次抱怨它。此外，如果我使用this.pathbase，Typescript在我的编辑器（VSCode）中报错，但是Vue编译时没有错误，项目和组件将显示并正常运行。

VSCode上的消息显示：Property 'pathbase' does not exist on type 'Vue'.

我想知道为什么会导致此错误，因为我想更好地理解打字稿。为什么this.pathbase会导致打字稿抱怨，即使这不是编译错误？为什么需要使用$props？

Answer 1

通常，您不需要使用$props。此问题类似于known Vue/TypeScript issue，其中，当props的类型为prop时，所有{}的TypeScript推断都会丢失。区别在于您有一个prop类型为Array（即data: Array）的this.pathbase，它引起了相同的问题，从而阻止了对Array的访问。

解决方法是使用as () => Foo[]声明Foo类型，其中data是每个props: { data: Array as () => String[], // ... } 项目的预期类型：

http_port 172.xx.xx.215:3128 name=3128
http_port 172.xx.xx.64:3129 name=3129

acl tasty3128 myportname 3128 src 172.xx.xx.0/20
http_access allow tasty3128
tcp_outgoing_address 172.xx.xx.215 tasty3128

acl tasty3129 myportname 3129 src 172.xx.xx.0/20
http_access allow tasty3129
tcp_outgoing_address 172.xx.xx.64 tasty3129

cache deny all
hierarchy_stoplist cgi-bin ?

access_log none
cache_store_log none
cache_log /dev/null

refresh_pattern ^ftp: 1440 20% 10080
refresh_pattern ^gopher: 1440 0% 1440
refresh_pattern -i (/cgi-bin/|\?) 0 0% 0
refresh_pattern . 0 20% 4320

acl localhost src 127.0.0.1/32 ::1
acl to_localhost dst 127.0.0.0/8 0.0.0.0/32 ::1

acl SSL_ports port 1-65535
acl Safe_ports port 1-65535
acl CONNECT method CONNECT

http_access allow manager localhost
http_access deny manager

http_access deny !Safe_ports

http_access deny CONNECT !SSL_ports

http_access allow localhost
http_access allow all

forwarded_for off
request_header_access Allow allow all
request_header_access Authorization allow all
request_header_access WWW-Authenticate allow all
request_header_access Proxy-Authorization allow all
request_header_access Proxy-Authenticate allow all
request_header_access Cache-Control allow all
request_header_access Content-Encoding allow all
request_header_access Content-Length allow all
request_header_access Content-Type allow all
request_header_access Date allow all
request_header_access Expires allow all
request_header_access Host allow all
request_header_access If-Modified-Since allow all
request_header_access Last-Modified allow all
request_header_access Location allow all
request_header_access Pragma allow all
request_header_access Accept allow all
request_header_access Accept-Charset allow all
request_header_access Accept-Encoding allow all
request_header_access Accept-Language allow all
request_header_access Content-Language allow all
request_header_access Mime-Version allow all
request_header_access Retry-After allow all
request_header_access Title allow all
request_header_access Connection allow all
request_header_access Proxy-Connection allow all
request_header_access User-Agent allow all
request_header_access Cookie allow all
request_header_access All deny all

Answer 2

道具是只读的，这意味着子级不是该特定数据的所有者，因此它不能更改该数据上的任何内容。路径库是道具中的一个属性，要访问该属性，您需要使用“ this.props”调用道具。