npm 사이트에서 JS, TS에 따른 설치법

npm이 TS인 경우

reduce

https://www.npmjs.com/package/redux

redux

redux의 공식 사이트이다.

사이트에 들어가서 보면 redux 옆에 ts가 있는데 이는 "typing을 기본적으로 제공하는 라이브러리"라는 의미이다.

axios

axios도 redux와 마찬가지로 ts가 적혀있다.

redux와 axios의 차이

-axios

https://github.com/axios/axios

GitHub - axios/axios: Promise based HTTP client for the browser and node.js

axios의 깃허브이며 들어가면

거의 js로 이루어져있고 ts는 조금이다.

 

-index.d.ts

index.d.ts 파일 안에 ts 사용자들을 위해서 구현없는 타입 정의들만 들어있다. 그렇기에 declare된 변수도 있다.

 

-redux

https://github.com/reduxjs/redux

GitHub - reduxjs/redux: Predictable state container for JavaScript apps

redux의 깃허브이며

대부분이 ts로 이루어져 있다. 이런 파일은 d.ts가 대부분 필요없다.

 

=> index.d.ts가 무조건 타입을 적어둔 파일은 아니다.

package.json

-redux의 package.json

types: 여기 적힌게 타이핑에서 가장 중요한 파일

main: 여기 적힌게 js 프로젝트에서 가장 중요한 파일

module: es2015 이상 모듈에서 가장 중요한 파일 

 

-라이브러리 깃허브와 실제 설치된 파일

라이브러리 깃허브의 코드와 실제 설치된 파일의 내용은 조금 다르다. 왜냐하면 ts를 결국 js로 변환해서 사용하기 때문이다. 

하지만 index.d.ts 파일은 있어야 ts 사용자가 리덕스에서 타입을 확인할 수 있다.

npm이 DT인 경우

autosize

https://www.npmjs.com/package/autosize

autosize

autosize의 경우 DT로 써져있다. 이런 경우엔 DT를 먼저 설치한다. DT에는 js 밖에 없다.

그 후에 DT를 클릭하면

TS가 있는 사이트로 이동한다. TS에 있는 명령어도 설치해주면 된다. 

하지만 이 TS는 오픈소스라서 기업이 아닌 여러 사람들이 만들었기 때문에 실제 값과 타입이 다를 수 있다.

설치시 명령어 -D

npm i -D @types/autosize

이렇게 -D를 붙여주는데 이는 개발용으로 설치한다는 의미이다. 왜냐하면 배포할 때 js로 바뀌기 때문에 타입은 필요없다.

npm에 TS, DT 둘 다 없는 경우

유명한 대부분의 라이브러리는 TS, DT가 있지만 그렇지 않은 라이브러리는 없는 경우도 있다.

이런 경우에는 직접 타입을 만들어서 사용해야 한다.