[Vue] Object is of type 'unknown'. 에러 해결 방법

컴포넌트 내 스크롤 적용을 위해 다음과 같은 코드를 작성하던 중 에러가 발생했다.

const el = this.$refs.wrapper.$el; // Error

const parent = el.clientHeight;
const children = el.children[0].clientHeight;

this.scroll = parent < children ? "scroll" : "";

바로 this.$refs.wrapper 이 부분에서 Object is of type 'unknown'. 이라는 에러가 발생하였는데, 타입 문제인 것 같아 다음과 같이 코드를 수정해보았지만 이 역시도 해결되지 않았다.

const el = this.$refs.wrapper!.$el; // Error

Property '$el' does not exist on type '{}'. 에러가 발생하면서 역시 타입스크립트 호락호락하지 않구나,, 생각했다.

그래서 검색해본 결과 해결방법을 찾을 수 있었다.

바로 타입을 선언해서 먹여주는 방식이었다.

interface Wrapper {
  $el: '원하는 타입';
}

const wrapper = this.$refs.wrapper as Wrapper;
const el = wrapper.$el;

이 안에는 이것이 들어있을거야,, 하고 타입을 지정해주니 더이상 에러가 발생하지 않고 마무리 할 수 있었다!

역시 타입스크립트 참 중요하다!