[Vue] defineComponent()

defineComponent란?

뷰 컴포넌트를 정의할 때 타입 추론을 도와주는 타입 헬퍼이다.

Type

function defineComponent(
  component: ComponentOptions | ComponentOptions['setup']
): ComponentConstructor

=> 예시에서 타입은 가독성을 위해 간략화 했다.

Details

첫번째 아규먼트는 컴포넌트 옵션 객체를 받는다. 리턴 값은 옵션객체와 동일한 객체일 것이다. 왜냐하면, 이 defineComponent 함수는 본질적으로 유형추론 목적으로 사용하는 것이기 때문에 런타임시에 옵션이 없기 때문이다.

리턴타입은 약간 특별한데, 옵션에 기반하여 추론된 컴포넌트 인스턴스의 생성자 타입이다. 이 생성자 타입은 리턴타입이 TSX에서 태그로 사용될 때 타입 추론에 사용된다.

아래처럼 defineComponent()의 리턴타입으로부터 컴포넌트의 인스턴스 타입을 추출할 수 있다. ( options의 this의 타입과 동일하다)

const Foo = defineComponent(/* ... */)

type FooInstance = InstanceType<typeof Foo>

Note on webpack Treeshaking

defineComponent()가 함수호출이기 때문에, 웹팩같은 빌드 툴로 사이드 이펙트가 생성될 것 처럼 보인다. 컴포넌트가 사용되지 않을 때 조차 트리쉐이킹으로부터 사이드이펙트는 일어나지 않는다.

웹펙에게 이 함수호출이 트리쉐이킹으로부터 안전하다고 말해주기 위해, 함수를 호출하기 전에 /*#_PURE_*/ 커멘트 노테이션을 추가할 수 있다:

export default /*#_PURE_*/ defineComponent(/* ... */)

이건 Vite를 사용할 떄에는 불필요하다. 왜냐하면 Rollup (Vite에 의해 사용되는 기초 프로덕션 번들러) 이 defineComponent는 저런 번거로운 주석이 필요없이 사이드 이펙트로부터 자유롭다는걸 알고있기 때문이다.

juniKangBlog