(vue.js+typescript) 모듈에 데이터를 전달하는 간단한 설명

대상: 어셈블리 레이어에 주입할 데이터 유형 지정

더 추상적인 구성 요소를 호출하는 것을 고려하여 데이터를 주입할 때 구성 요소props에서 전달하는 데이터의 유형을 지정할 수 있기를 바랍니다.
목표는 다음 도도부현의 선택 표시 구성 요소에 상위 구성 요소에서 Option 데이터를 전달할 때 유형을 지정하는 것입니다.
취득할 예정인 도도부현의 데이터.json

{
  "id": 1,
  "name": "東京都"
}, {
  "id": 2,
  "name": "それ以外"
}

이 데이터 자체에 형식이 없기 때문에 typescript로 이 데이터에 사용할 형식을 만들고 받아들일 때 형식을 사용하고 싶습니다.

0. 설정 (vue-cli의 typescript 사용 시 기본 설정)

vue-cli를 사용하여 typescript를 사용할 때 설정한 기본 설정을 선택하십시오.@nrslib선생님의 vue.ts의 보도, 그리고 기정건문의 "실천 TypeScript~BFF와 Next.js & Nuxt.js의 유형 정의~"
https://qiita.com/nrslib/items/be90cc19fa3122266fd7
"TypeScript~BFF와 Next.js & Nuxt.js의 유형 정의를 실천합니다~"

1. 유형(인터페이스,class)의 실현

사용자 정의 구성 요소인'MyOption.vue'에 전달되는 데이터 정의로 인터페이스'MyOptionInterface'를 실시합니다.
src/models/MyOption/MyOptionInterface.ts

export default interface MyOptionInterface {
  id: number;
  name: string;
}

동시에 Preffecture.ts에서 My OptionInterface를 실시하고 도도부현의 데이터를 전달하는 인터페이스 "Preffecture"를 실시한다.
src/models/MyOption/Prefecture.ts

import MyOptionInterface from "./MyOptionInterface";
export default class Prefecture implements MyOptionInterface {
  id: number;
  name: string;
  constructor(p__id: number, p__name: string) {
    this.id = p__id;
    this.name = p__name;
  }
}

2. 데이터 취득 시 유형 판별

getPrefectures()의 반환값은 방금 생성한'My OptionInterface'를 실현하는 클래스'Preffecture'그룹의 유형을 지정합니다.

데이터의 변수prefectures의 유형은 "Preffecture"그룹입니다.

src/App.vue

<template>
  <div id="app">
    <h2>アンケート</h2>
    <p>アンケートにご協力ください</p>
    <form v-on:submit.prevent>
      <MyOption
        text="あなたの住んでいる都道府県は？"
        id="prefecture"
        :myoptions="prefectures"
        :selectedValue="{id:1}"
      ></MyOption>
      <button @click="gatherResult">send</button>
    </form>
    <div v-if=" this.result.length !== 0 ">{{ result }}</div>
  </div>
</template>

<script lang='ts'>

import MyOption from "./components/MyOption.vue";
import Prefecture from "./models/MyOption/Prefecture";
import { Vue } from "vue-property-decorator";

function getPrefectures():Prefecture[]{
  return [{
      "id": 1,
      "name": "東京都"
    }, {
      "id": 2,
      "name": "それ以外"
    }];
};


export default Vue.extend({
  name: "App",
  data():{
    result:Array<any>
    prefectures:Prefecture[]
  }
  {
    return {
      result: [],
      prefectures : []
    };
  },
  created(){
    this.prefectures = getPrefectures();
  },
  methods: {
    gatherResult():void {
      this.result = [];
      this.result.push(
        (<HTMLInputElement>document.getElementById('prefecture')).value
      );
    }
  },
  components: {
    MyOption
  }
});
</script>

3. 구성 요소 간의 데이터 전달 실현

props 변수myoptions에 대해 방금 생성한'My OptionInterface'그룹의 유형을 지정합니다.

src/components/MyOption.vue

<template>
  <p>
    <label :for="id" v-if=" text !== '' ">{{ text }}</label>
    <select :id="id">
      <option
        v-for="myoption in myoptions"
        :key="myoption.id"
        :value="myoption.id"
        :selected="myoption.id === selectedValue.id"
      >{{ myoption.name }}</option>
    </select>
  </p>
</template>

<script lang='ts'>
import { Vue } from "vue-property-decorator";
import MyOptionInterface from "./../models/MyOption/MyOptionInterface";

export default Vue.extend({
  props: {
    text: {
      type: String
    },
    id: {
      type: String,
      required: true
    },
    myoptions: {
      type: Array as () => MyOptionInterface[],
      required: true
    },
    selectedValue: {
      type: Object
    }
  }
});
</script>

props의 변수에 형식을 지정할 때, 인터페이스를 지정할 때, 먼저 Array로 수신하고, MyOptionInterface의 배열에cast 형식으로 기재합니다.(class는 직접 형식을 지정할 수 있습니다.)

실제 화면

화면에 아무런 변화가 없지만 반에 맡긴 데이터가 다르면 인코딩할 때 오류가 표시됩니다.


소스 코드
https://github.com/ttn1129/VueTypescriptSample

기타

typescript는 tsconfig입니다.제이슨에게 매우 의존하다.따라서 프레임으로 설정한 것은 시간을 내지 않는다.(스스로 설정하고 싶어서 상당히 반했다...)

props의 변수를 유형으로 지정할 때, 인터페이스를 지정할 때, 반드시 먼저 Array로 수신하여, 캐스트 형식으로 MyOptionInterface의 배열에 기재해야 한다.

처음에는 codesandbox라는 사이트의 vue-cli 프로젝트에 자체적으로 패키지를 추가하여 인코딩을 했지만 왠지 shims-vue.d.ts 중의 import vue from 'vue' 가 Eslint의 Parsing Error가 될 수 있다. 결과적으로 local로 같은 원본 코드를 vue-cli 프로젝트npm run serve로 하면 순조롭다코드 문제인 줄 알았는데codesandbox의 vue-cli 프로젝트의 환경 문제인 것 같습니다.(vue-cli의 일반 프로젝트는 전혀 문제가 없습니다. 잘 빌드할 수 있지만 typescript를 사용하는 프로젝트는build를 사용할 수 없습니다. 매혹적입니다.)

Vue의 데이터 유형 설정은 아래 사이트를 참조하십시오.
https://qiita.com/kurosame/items/e56288e860cf016eaab0

document.typescript에서 get Element ById를 진행할 때 반환값 HTMLElement | null 의 형식이 지정되어 있는 것 같아서value를 참조할 수 없기 때문에cast에서 HTML Input Element로 value를 얻었습니다.
https://stackoverflow.com/questions/12989741/the-property-value-does-not-exist-on-value-of-type-htmlelement

모델이 있으면 개발자는 구성 요소에 전달되는 데이터를 더욱 쉽게 만들 수 있다.

여기서 마치겠습니다.