2021년09월08일

Note

• Vue-CLI

TypeScript

Vuex에서 타입 정의하기

뷰 내부적으로 vue/types/vue.d.ts에 기본적으로 타입이 정의되어 있는데 $store는 any를 제네릭으로 넘기기 때문에 any로 추론이 된다.

// vue.d.ts
    declare module "vue/types/vue" {
    interface Vue {
      $store: Store<any>;
    }
  }

state 타입을 설정하고 Store 내부와 연결하는 방법

vue.d.ts 파일의 $store: Store<any>의 any를 state 타입으로 변경하고 저장

커스텀 타입을 프로젝트 레벨에서 설정하기

vue.d.ts파일은 node_modules 내부에 있으므로 협업시 공유하지 못한다. 프로젝트 루트 레벨에 관리하는 방법은 src/types/project.d.ts 파일을 만들어 작업한다.

// project.d.ts
import Vue from "vue";
import { MyStore } from "../store/types";

declare module "vue/types/vue" {
  interface Vue {
    $store: MyStore;
  }
}

declare module "vue/types/options" {
  interface ComponentOptions<V extends Vue> {
    store?: MyStore;
  }
}

tsconfig.json 파일에 src/types/**/*.d.ts 추가하고 기존의 vue.d.ts 삭제하기

log

• 낮12시 쯤에 공원가서 뛰었더니 너무 너무 더웠다. 그리고 직장인들이 식사를 하고 돌고 있었는데 사람이 너무 많았다. 아직 낮에 운동할 시기는 아닌 듯하다.
• Incremental DOM과 Virtual DOM 비교를 읽었다.