yarn pnp vscode typescript 적용하는 방법

yarn2 ( yarn berry )와 함께 PnP(Plug'n'Play)를 적용해보기 고통스러운 node_modules 탈출 하기

 

앞선 설정을 끝냈다면 추가로 타입스크립트 설정을 하면 됩니다.

아래 과정은 만약 타입스크립트를 추가 적용하고 싶은 분들을 대상으로 진행하는 내용입니다. 이제 @types/* 패키지들이 zip 아카이브로 관리되기 때문에 기존의 방식으로는 정상적으로 타입이 불러와지지 않을 것입니다. 그렇기에 다음과 같은 과정을 진행해주세요!

설명은 VSCode IDE 기준으로 설명되었습니다.

 

타입스크립트가 적용되지 않은 프로젝트라면 타입스크립트 관련 패키지를 설치해주세요. [ 아래는 코드 React를 사용한다는 기준으로 작성된 스크립트입니다. ]

yarn add -D typescript @types/node @types/react @types/react-dom @types/jest

 

jsconfig.json대신 tsconfig.json으로 작성해주세요.

 

VSCode EXTENSIONS에 ZipFS를 검색해서 설치해주세요.

VSCode EXTENSIONS에서 ZipFS를 검색해서 설치해주세요.

 

해당 프로젝트 최상위 경로에서 다음을 입력합니다.

yarn dlx @yarnpkg/sdks vscode

 

VSCode를 실행하여 Typescript 버전을 선택해주세요.

.yarn 폴더 내부에 있는 버전을 선택하면 됩니다.

 

 

이제 정상적으로 타입이 호출되며, 개발을 진행할 수 있습니다!