【TypeScript】npm로 패키지를 설치한다
3058 단어 TypeScriptVSCode
개요
VSCode에서 npm(node package manager)을 사용하여 TypeScript에서 타사 라이브러리를 설치하는 경우 세 가지 상황이 있습니다.
이 상황마다 TypeScript로 설치하는 방법을 요약했습니다.
이 기사는 다음 코스 수강에 따라 비망록으로 작성되었습니다. 자세히 알고 싶은 분은 꼭 수강해보세요.
환경
상황별 설치
VSCode나 Node.js(npm)는 미리 설치합니다.
먼저 VSCode에서 대상 프로젝트를 열고 터미널에서 다음을 수행합니다.
package.json 생성npm init -y
TypeScript를 지원하는 패키지
이것이 가장 간단합니다.
여기에서는 class-validator라는 패키지를 설치해 보겠습니다.
npm install --save class-validator
그러면 프로젝트의 node_modules
에 class-validator
가 추가됩니다.
내부를 보면 types 폴더에 ts 파일의 소스가 있음을 알 수 있습니다. .d.ts 로 끝나는 파일은 형식 정의된 파일입니다.
이와 같이 형식 정의 파일이 패키지에 포함되어 있으면 패키지 본체를 설치하는 것만으로 프로젝트에서 사용할 수 있게 됩니다.
JavaScript만 지원하고 형식 정의 파일이 배포된 패키지
타사 라이브러리에서 형식 정의 파일이 포함되지 않은 경우도 많습니다. 이 경우 별도로 형식 정의 파일을 설치해야 합니다.
여기에서는 jQuery라는 패키지를 설치해 보겠습니다.
패키지npm install --save jquery
형식 정의 파일npm install --save-dev @types/jquery
여기서 --save-dev
로 하고 있는 것은 , 형태 정의 파일이 개발시에만 필요하기 때문입니다. (궁극적으로 ts 파일은 js 파일로 컴파일되기 때문에)
이와 같이, 개발시에만 의존하는 패키지는, --save-dev
(으)로서 인스톨 합니다.
또, google map sdk
와 같이, npm 로 패키지로서 배포되어 있지 않은 것 (html 의 script 태그로 밖에 읽어들일 수 있는 라이브러리)도, 형태 정의 파일은 배포되고 있는 경우가 있습니다.
html<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly" async></script>
형식 정의 파일npm install --save-dev @types/googlemaps
형식 정의 파일을 찾는 방법
형식 정의 파일을 찾으려면 브라우저에서 "types jquery"와 같이 검색하면 나옵니다.
JavaScript만 지원하고 형식 정의 파일이 배포되지 않은 패키지
별로 없는 케이스인 것 같습니다만, 이 경우는 앰비언트 선언 (declare 키워드) 를 사용해, 패키지로부터 읽어들인 변수의 형태를 일시적으로, any型
로 해 버리는 대응 방법이 있습니다.
다만, TypeScript 의 혜택을 받을 수 없기 때문에 마지막 수단입니다.
또 다른 대응 방법도 있는 것 같습니다.
TypeScript에 형식 정의 파일 (d.ts)이 없을 때의 해결 방법
참고
npm init -y
npm install --save class-validator
npm install --save jquery
npm install --save-dev @types/jquery
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly" async></script>
npm install --save-dev @types/googlemaps
Reference
이 문제에 관하여(【TypeScript】npm로 패키지를 설치한다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/nemutas/items/ae7eb2ecbfff3705301b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)