typescript - VueJS字符串插值可以访问TS对象的私有(private)属性

Question

嗨，我最近开始使用 typescript 学习 vuejs
我使用 typescript 制作了一个模型类，其中有一些私有(private)属性，据说只能通过 getter 访问并将其放在 vuex 商店中

但是在字符串插值( mustache )中，不知何故我可以在没有getter的情况下获得私有(private)属性

请看我下面的代码，
谢谢!

用户.ts

import { Stock } from "./Stock";

export class User {
  private _funds: number;
  private _portofolio: Array<Stock>;

  constructor() {
    this._funds = 5000;
    this._portofolio = [];
  }
  public updateFunds(by: number): void {
    this._funds += by;
  }
  get portofolio(): Array<Stock> {
    return this._portofolio;
  }
}

store/index.ts (vuex 加载)

import Vue from "vue";
import Vuex from "vuex";
import { User } from "@/models/User";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    user: new User()
  },
  getters: {
    currentUser: state => {
      return state.user;
    }
  },
  mutations: {},
  actions: {},
  modules: {}
});

App.vue(主 vue 文件)

<template>
  <div id="app">
        <p>Funds: {{ user._funds }}</p>
  </div>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  data: function() {
    return {
      user: this.$store.getters.currentUser
    };
  },
  created: function() {
    console.log(this.user);
  }
});
</script>

Answer 1

TypeScript 私有(private)成员可以在运行时自由访问。它们被强调允许将它们与公共(public)成员区分开来。如果它们不应该被访问，请不要访问它们。对于有风格指南的团队来说，这是可以禁止的。

在编译时检查 TypeScript 可见性。 vue加载器doesn't provide TypeScript support for templates .有vue-type-check为模板提供 TS 类型检查的第三方实用程序。