VueJS String 보간으로 TS 개체의 개인 속성에 액세스할 수 있습니다.

VueJS String 보간으로 TS 개체의 개인 속성에 액세스할 수 있습니다.

안녕하세요, 저는 최근에 typescript를 사용하여 vuej를 배우기 시작했습니다. typescript를 사용하여 모델 클래스를 만들었습니다.그 안에는 getter를 통해서만 액세스 할 수 있는 프라이빗 속성이 있어 vuex 스토어에 넣을 수 있습니다.

그러나 문자열 보간(수염)에서는 어떻게든 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>

TypeScript 프라이빗 멤버는 런타임에 자유롭게 액세스 할 수 있습니다.그들이 밑줄 친다는 것은 그들을 공공 구성원과 구별할 수 있게 해준다.액세스 할 수 없는 경우는, 액세스 하지 말아 주세요.스타일 가이드가 있는 팀에서는 금지될 수 있습니다.

TypeScript 가시성은 컴파일 시 체크됩니다.Vue 로더는 템플릿에 대한 TypeScript 지원을 제공하지 않습니다.템플릿의 TS 유형 검사를 제공하는 vue-type-check 서드파티 유틸리티가 있습니다.

언급URL : https://stackoverflow.com/questions/61168562/vuejs-string-interpolation-can-access-private-attribute-of-ts-object