[TS] 타입스크립트(Typescript) 이해하기-2 (의존성 관리, @types)

 

해당 글은 자바스크립트/타입 스크립트 내에서 의존성에 대해서 이해를 하고 상황에 따라 의존성을 설치해야 하는 이유에 대해 이해하고 관리하기 위한 방법과 관련된 글입니다.

1) 라이브러리 의존성 관리 

💡  Javascript 내에서 라이브러리의 의존성 관리를 위한 종류는 3가지로 나뉩니다.

종류	설명
dependencies	현재 프로젝트를 실행하는데 필수적인 라이브러리들이 포함이 됩니다. 이는 컴파일을 수행하고 런타임 단계에서 수행되는 라이브러리들이 이에 해당 됩니다.
devDependencies	현재 프로젝트를 개발하고 테스트를 하는데 사용되지만, 런타임에는 필요 없는 라이브러리들이 포함이 됩니다. 이는 런타임 단계에서는 수행되지 않고 이전 컴파일 단계에서까지만 수행되는 라이브러리가 해당 됩니다. ex) 컴파일 단계에서 사용하는 타입스크립트와 관련된 라이브러리 @types/xxx의 경우 이에 해당 된다. 타입스크립트의 컴파일러를 통해서 실행 할 수 있다.
peerDependencies	런타임에는 필요하기는 하지만 소스코드내에 의존성을 직접 관리하지 않는 라이브러리들이 포함된다. 소스코드 내에 require , import로 불러오지는 않지만 라이브러리 의존성으로 필요한 경우가 이에 해당 됩니다.

 

사용 예시 (package.json)

"dependencies": {
    "react": "17.0.1",
    "react-dom": "17.0.1"
  },
  "devDependencies": {
    "@types/react": "17.0.21",
    "@types/react-dom": "17.0.2",
    "typescript": "~4.3.5"
  },
  "peerDependencies": {
    "jquery": "1.9.1"
  }

 

2) @types/xx

💡 TypeScript를 사용하다 보면 @types/xx 형태의 라이브러리를 마주치게 되고 이를 꼭 설치를 해야 할까라는 고민을 갖게 됩니다.

이에 대해서 설치하는것을 권장합니다.

이를 Typescript를 사용하면서 설치하지 않게 되면, dependencies 내에 설치한 라이브러리에 대한 타입 스크립트가 제대로 동작하지 않을 수 있기 때문입니다. 제대로 동작하지 않는 것은 라이브러리가 Typescript로 개발된 경우 이 라이브러리를 불러오면 타입을 추론을 제대로 할 수 없기 때문입니다.

 

사용예시 

$ npm install react react-dom

# or

$ yarn add react react-dom

$ npm install @types/react @types/react-dom --save

# or

$ yarn add @types/react @types/react-dom --dev

 

💡 위에 라이브러리 의존성 관리 종류에 따라서 @types/xx 형태는 devDependencies 내에 설치를 해야 합니다.
이는 타입스크립트는 개발 도구일 뿐이고 타입 정보는 런타임에 존재하지 않기 때문에 일반적으로 devDependencies 내에 설치를 해야합니다. 그리고 또한 설치 및 업데이트를 하게 되면, 해당 @types 역시 업데이트를 해야 한다.
(* 단, devDependencies내에 말고도 dependencies내에서 설치해야 하는 경우도 있습니다)

 

 

3) 오늘의 결론

💡 라이브러리의 의존성에 대해서 알아보았습니다.
💡  각각 상황에 따라서 의존성을 설치하고 관리해야 합니다.

 

오늘도 감사합니다😀