[기록/ERROR/Typescript] 'import type' declarations can only be used in TypeScript files.ts(8006)

---

■ 문제상황

보다시피, 해당 소스 파일은 jsx입니다. ts 또는 tsx 파일이 아닌 곳에서 TypeScript에서만 쓸 수 있는 import type 구문을 사용해서 나타난 오류입니다. VS Code에서 설정에 따라, JS 개발에 대한 유효성을 검사하는 기능이 있기 때문에 이를 비활성화 해주면 해결됩니다.

🗨️ 'import type' 구문은 뭔가요?
TypeScript에서 'import type' 구문은 실제 값들을 가져오지 않고 타입이나 인터페이스만을 가져오기 위해 사용됩니다. 이 기능은 TypeScript 3.8 버전부터 사용할 수 있습니다.

■ 해결방법

❎ (비추천) VS Code의 확장 프로그램 비활성화

확장 프로그램을 비활성화하면 VS Code에서 JS 개발에 관련된 유효성 검사를 모두 비활성화하는 것이기 때문에, VS Code를 사용하는 것에 대한 이점이 무의미해 집니다.

 

✅ (추천) 설정 파일에 "JS 유효성 검사 기능 비활성화" 추가

명령어 팔레트(Ctrl + Shft + P)에서 아래 명령어를 통해서 설정파일을 엽니다.

Preferences: Open User Settings (json)

 

아래 사진처럼 6번줄에 JS 유효성 검사 비활성화를 추가합니다.

"javascript.validate.enable": false

---

*참고 문서

Error: 'types' can only be used in a .ts file - Visual Studio Code using @ts-check

---

🗨️ 그래도 해결이 안 돼요.
아래와 같은 오류가 났다면, ts 또는 tsx가 아닌 곳에서 typescript 문법을 사용해서 난 오류입니다.
TypeScript를 빌드 도구나 번들러와 같은 다른 환경에서 사용하는 경우, 외부 툴의 세팅 파일에서 TypeScript 구문과 파일을 올바르게 인식하도록 세팅을 하거나 jsx 파일을 ts 또는 tsx 파일로 확장자를 변경하시면 됩니다. 서버가 켜져있다면, 확장자를 변경한 뒤에 서버를 재실행하셔야 변경사항이 제대로 반영됩니다.

Babel(JS 컴파일러) 컴파일 오류 : jsx에서 typescript 문법 사용

SearchBox.jsx -> .tsx

# Ctrl + C 를 눌러 서버 끄기

# 아래 명령어로 서버 재기동
npm start

 

또는, 'import type'은 TypeScript 3.8부터 지원하는 기능이므로, 그 이전 버전에서는 사용할 수 없습니다.

🗨️ 타입스크립트 버전은 어떻게 확인하나요?
node.js를 사용하고 있다면, 패키지는 npm에 의해 관리되고 있습니다. 터미널에 아래 명령어를 입력해 보세요.

npm ls typescript

test 리액트 앱에서는 TypeScript 4.9.5 버전을 사용하고 있다.

vite_.... 리액트 앱에서는 타입스크립트 패키지가 설치되지 않았다.

🗨️ 타입스크립트는 어떻게 설치하나요?

npm i typescript

타입스크립트 패키지를 설치하고 확인하는 사진

---

감사합니다. :)