❌ 에러
mp4 형식 파일이 import 안 되는 에러 발생
별 다른 타입을 지정할 필요가 없는 view 컴포넌트 였어서
jsx -> tsx로 변경만 하면 되는 상황인 줄 알았는데
생각지도 못 한 비디오 파일에서 에러가 발생했다.
사실 jsx로 그냥 사용해도 별 문제는 없는 상황이었지만
오류가 발생하는 원인이 궁금하기도 했고
나중에 반드시 써먹을 일이 있을 것 같아 찾아보기로했다.
✅ 에러해결
@type 폴더 생성해서 해결
하단에 첨부한 링크를 들어가서 확인해보니 타입스크립트에서는
라이브러리를 설치할 때 @type 을 앞에 붙여서 설치를 하는데
파일을 import할 때도 같은 원리로 @type을 지정해줄 필요가 있었던 것이다
위와 같이 별로의 폴더 생성후
`videos.d.ts` 파일에서 mp4 형식을 사용할 수 있도록 모듈 선언해줘서 해결할 수 있었음
🤔 @type 쓰는 이유?
타입스크립트를 사용하면서 기존에 사용하던 npm 라이브러리는
@타입을 붙여서 다시 인스톨을 해줘야하는데 그 이유가 궁금해서 찾아봤다.
라이브러리의 내부 코드에 대한 타입이 정의되어 있지 않아 라이브러리를 사용할 때
타입스크립트 파일에서 타입 추론을 할 수 없기 때문입니다. 이런 경우에는
@types 라는 라이브러리를 설치하면 됩니다.
자바스크립트 라이브러리는 대부분 @types 라는 별칭으로
타입스크립트 추론이 가능한 보조 라이브러리를 제공합니다.
(출처) : 타입스크립트 핸드북 - Config - types 라이브러리
자바스크립트 라이브러리를 그대로 타입스크립트 프로젝트에서 사용하면
타입스크립트 파일에서 타입 추론을 할 수 없기 때문에
별로의 타입 추론기능을 제공하는 @types 라이브러리가 필요한 것을 알 수 있었다
참고 자료
typescript and create-react-app .env
Tips on working with CRA environment variables
dev.to
[React/TypeScript] Cannot find module '../assets/videos/XXX.mp4' or its corresponding type declarations. 에러 해결
로컬 .mp4 영상을 import 하려고 했지만 빨간 밑줄이 그어지며 오류가 발생했다.TypeScript 관련 설정 때문인 것 같다. 해결해보자로컬의 파일을 import하는 경우라면 file-loader,url형식의 파일을 import 한
velog.io
Typescript Typings: The Complete Guide: @types Compiler Opt-In Types
By far the most differentiating feature of the Typescript language are its multiple different types of type definitions. If you have been using Typescript with Angular recently or without it, you might have run into a couple of the following questions or e
blog.angular-university.io