[TS] import type 의 의미

TypeScript 에서의 import 문법에는 

import type { FC, DetailedHTMLProps, HTMLAttributes } from 'react';

와 같이 import type 으로 쓰는 경우가 있다.

 

이는 TypeScript -> JavaScript 로 컴파일시에, 전혀 영향이 없는 타입만을 선언한 파일을 import 할떄 쓰는 문법이다. 

즉, 저기에 있는 저 import 들은 (FC, DetailedHTMLProps, HTMLAttributes) 모두 타입이다!!

 type FC<P = {}> = FunctionComponent<P>;
 type DetailedHTMLProps<E extends HTMLAttributes<T>, T> = ClassAttributes<T> & E;
 interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
      ...생략...
 }

음.. 인터페이스도 있다~~!

TypeScript 3.8 부터 추가된 내용이라고 한다.

TypeScript: Documentation - TypeScript 3.8 (typescriptlang.org)

Documentation - TypeScript 3.8

 

FC 는 Function Component 말그대로 함수형 컴포넌트를 선언해주는 기능이다. <> 안에 props 를 넣어주면

JSX 에서 해당 정의된 내용으로 컴포넌트를 이용할 수 있다.

공식사이트의 예제를 참조하자!

Function Components | React TypeScript Cheatsheets (react-typescript-cheatsheet.netlify.app)

Function Components | React TypeScript Cheatsheets

개인적으로는 함수형 선언이 익숙하지 않아서인지 class 를 쓰고 싶은 마음이다;;