[typescript] ts파일안에 html 파일 import 할때 타입선언하기 (InstaceType)

이슈

탭 컴포넌트를 만들기 위해서 html을 ts파일에 import하여 사용하려는데, 타입선언을 해주라고 빨간 오류 줄이 생겼다. Ctrl + space를 눌러 HtmlEmbedElement 등 다른걸로 바꿔봤으나 그럼 밑에 있는 다른 소스들이 더 심하게 빨간 줄이 생겼다.

 

 

해결 InstanceType

import mappingList from 'mappingList html파일 경로';
import serviceList from 'serviceList html파일 경로';

type TabComponents = Record<tabKeys, InstanceType<typeof mappingList | typeof serviceList>>;

InstanceType을 아무리 찾아봐도 타입을 임의로 지정해준다라는 말 밖에 안나왔었는데 저걸 사용하면 된다고 한다.
아래는 단계별로 바꿔간 코드이다.

 

 

 

 

 

---

단계별 삽질기

[초기에 any로 다 지정해 놓은 상황]

import mappingList from 'mappingList html파일 경로';
import serviceList from 'serviceList html파일 경로';

type TabComponents = {
  [key: string]: any;
  mapping: any;
  service: any;
}

---

1. InstanceType으로 타입선언을 바꿔주기. 그런데 [key: string]: 이자리에 any밖에 생각이 안남.

import mappingList from 'mappingList html파일 경로';
import serviceList from 'serviceList html파일 경로';

type TabComponents = {
  [key: string]: any; //이부분이 ???? 물음표였다.
  mapping: InstanceType<typeof mappingList>; //html파일은 이런식으로 타입선언
  service: InstanceType<typeof serviceList>;
}

 

---

2. any타입을 바꿔주기위해 삽질하다가 InstanceType을 다시 사용하고 union type으로 선언해주기로 함.

import mappingList from 'mappingList html파일 경로';
import serviceList from 'serviceList html파일 경로';

type TabComponents = {
  [key: string]: InstanceType<typeof mappingList | typeof serviceList> //이렇게 해결
  mapping: InstanceType<typeof mappingList>; //html파일은 이런식으로 타입선언
  service: InstanceType<typeof serviceList>;
}

 

---

3. 소스가 깔끔하지 않아 tabKeys를 밖으로 빼서 정리하였다.

import mappingList from 'mappingList html파일 경로';
import serviceList from 'serviceList html파일 경로';

type tabKeys = 'mapping' | 'service';
type TabComponents = {
  [key in tabKeys]: InstanceType<typeof mappingList | typeof serviceList>;
}

 

---

4. 하지만 타입이 탭 메뉴라 2개로 고정되어있으므로 위에 소스를 Record를 사용하여  한줄로 정리할 수 있었다. (많으면 위에처럼, 1-2개로 적으면 아래처럼!)

import mappingList from 'mappingList html파일 경로';
import serviceList from 'serviceList html파일 경로';

type TabComponents = Record<tabKeys, InstanceType<typeof mappingList | typeof serviceList>>;