일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- React
- useAppDispatch
- CORS
- app router
- tailwind
- SSR
- 호이스팅
- RTK Query
- 타입 좁히기
- autosize
- 결정 알고리즘
- Promise
- 리터럴 타입
- map
- dfs
- 태그된 유니온
- TS
- webpack
- CI/CD
- Cypress
- 이분 검색
- ESlint
- 인터섹션
- 반공변성
- 무한 스크롤
- Jest
- async/await
- 공변성
- 투포인터
- recoil
- Today
- Total
짧은코딩
npm 사이트에서 JS, TS에 따른 설치법 본문
npm이 TS인 경우
reduce
https://www.npmjs.com/package/redux
redux의 공식 사이트이다.
사이트에 들어가서 보면 redux 옆에 ts가 있는데 이는 "typing을 기본적으로 제공하는 라이브러리"라는 의미이다.
axios
axios도 redux와 마찬가지로 ts가 적혀있다.
redux와 axios의 차이
-axios
https://github.com/axios/axios
axios의 깃허브이며 들어가면
거의 js로 이루어져있고 ts는 조금이다.
-index.d.ts
index.d.ts 파일 안에 ts 사용자들을 위해서 구현없는 타입 정의들만 들어있다. 그렇기에 declare된 변수도 있다.
-redux
https://github.com/reduxjs/redux
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의 경우 DT로 써져있다. 이런 경우엔 DT를 먼저 설치한다. DT에는 js 밖에 없다.
그 후에 DT를 클릭하면
TS가 있는 사이트로 이동한다. TS에 있는 명령어도 설치해주면 된다.
하지만 이 TS는 오픈소스라서 기업이 아닌 여러 사람들이 만들었기 때문에 실제 값과 타입이 다를 수 있다.
설치시 명령어 -D
npm i -D @types/autosize
이렇게 -D를 붙여주는데 이는 개발용으로 설치한다는 의미이다. 왜냐하면 배포할 때 js로 바뀌기 때문에 타입은 필요없다.
npm에 TS, DT 둘 다 없는 경우
유명한 대부분의 라이브러리는 TS, DT가 있지만 그렇지 않은 라이브러리는 없는 경우도 있다.
이런 경우에는 직접 타입을 만들어서 사용해야 한다.
'TS > TS(with ZeroCho)' 카테고리의 다른 글
Axios 만들어보기 (0) | 2022.09.07 |
---|---|
axios 분석 (0) | 2022.09.05 |
Utility Types (0) | 2022.08.21 |
TS와 건망증 (0) | 2022.08.20 |
리턴값, 매개변수의 대입 범위 (0) | 2022.08.20 |