[React]
- [React] vite React설치
- Project initial setting
- Hooks && Library
- [React] Javascript 파일을 Typescript Import해보자
- [React] react-router-dom 알아보고 사용하자
- [React] child 컴포넌트에서 함수호출하기
- [React] useCallback
- [React] framer-motion 알아보고 사용하자
- [React] Context API
- [React] react lazy 지연로딩 예제
- [React] react에서 캐싱처리를 위한 react queryd와 indexDB 비교분석
- [React] 스타일 라이브러리 styled-components stitches 비교
- [React] 프론트 에러추적 도구 Sentry 사용해보기
- [React] React 19 주요 변경점
- [React] DOM이란 무엇이고? 가상 DOM이란 무엇인가?
- [React] preact 알아보기
이슈
js로 작성된 파일을 Import해야되는 상황이 생겼다. js로 바로 Import하면 될줄알았는데 역시 안되었다. 잘 정리해서 공유!
npm library 설치할떄
1
npm install @types/[filename]
npm으로 외부 라이브러리를 가져올 때는 쉽게 @types를 붙이면 node_modules/@types에 d.ts 파일이 생성됩니다.
예를 들어 qrcode.js를 npm으로 가져온다고 했을 때, qrcode와 함께 @types/qrcode를 install 합니다.
npm library install
- 해당 js파일에 module.export를 추가합니다.
- d.ts 파일을 만듭니다.
- Typescript에서 호출합니다.
다음 예제를 통해 사용법을 익혀보겠습니다. js 파일을 만들고
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//test.js
function test1() {
return test2("테스트코드 1");
}
function test2(str) {
return "테스트코드 2" + str;
}
module.exports = {
test1,
test2,
};
다음은 d.ts파일 만들어서 적용
1
2
3
4
5
//test.d.ts js파일과 같아야 읽을때 오류발생안됨
import "./test.js";
declare function test1(): string;
declare function test2(str): string;
사용필요한곳에서 import해서 작용하면됩니다. import 할 때는 d.ts 경로를 입력하면 됩니다.
1
2
3
4
5
import * as temp from './test';
ngOnInit(){
console.log(temp.test1(), temp.test2('this.is test'));
}