[Vue] typescript를 활용한 vue 프로젝트(메모2)

이전에 javascript 로 생성한 vue 프로젝트를 typescript 로 튜닝해보려 하는데 스타일이 비슷한 듯 달라 공부가 더 필요할 듯 하다. 일단 typescript 를 활용한 문법이 java와 굉장히 흡사해서 (클래스 단위 형식이라던지 등등) 오랫동안 java 를 안 보고 살았더니 감이 안오고, 데코레이터 구조도 모르겠고 해서 일단 적는다 일단 메모메모

 

.ts 파일이나 vue 파일 내 script 블럭에서 Component 를 import 하는 경우는 (현재까지 확인한 바로만) 두 케이스 인 것 같다.

첫째는 'vue-class-component' 로부터 import 하는 경우. 이 경우에는 해당 파일(현재 작성하고 있는 파일)에 작성하는 클래스가 Vue 컴포넌트임을 나타내기 위해 import 하는 경우.

import Component from 'vue-class-component';
...
@Component
export default class ClassName extends Vue {}

위와 같이 하단에 기재한 ClassName 의 class 가 Vue component 임을 나타낸다는 듯.

 

두번째 케이스는 'vue-property-decorator' 로부터 improt 하는 경우. 해당 경우는 decorater를 통해 component 를 '받기위해' 사용하는 경우? 

import {Vue, Component} from 'vue-property-decorator';

@Component({
	props: { ... }
})
export default class ClassName extends Vue { ... }

이렇게 component 데코레이터를 통해 props 를 전달받는 등에 사용되는 것 같다. 

 

는 완전히 틀려먹은 이론이었음.

첫번째와 두번째 케이스의 import 된 Componet 는 같은 컴포넌트이다.

import Vue from 'vue';
import Compoente from 'vue-class-component';

import {Vue, Component} from 'vue-property-decorator';

위와 아래 모두 같은 component 를 import 한 것이고, 아래의 경우 'vue-property-decorator' 에 별칭으로 호출된 형태.

데코레이터 사용 시 여러개의 컴포넌트를 import 하게 되는데, 후자와 같이 한 줄로 import 할 수 있는 방법이 있다고..

진짜 제대로 모르고 멍청하게 생각할 뻔 했다 ㅠ

 

일단 오늘 메모 끝..