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

Question

嗨，我最近开始使用 typescript 学习 vuejs 我使用 typescript 创建了一个模型类，其中有一些私有(private)属性，据说只能通过 getters 访问并将其放入 vuex 存储中

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

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

User.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 类型检查的第三方实用程序。