1"use strict";(self.webpackChunk=self.webpackChunk||[]).push([["30233"],{38724(e,t,n){n.r(t),n.d(t,{metadata:()=>s,default:()=>a,frontMatter:()=>o,contentTitle:()=>c,toc:()=>d,assets:()=>p});var s=JSON.parse('{"id":"typescript","title":"Working with TypeScript","description":"pnpm should work well with TypeScript out of the box most of the time.","source":"@site/versioned_docs/version-12.x/typescript.md","sourceDirName":".","slug":"/typescript","permalink":"/typescript","draft":false,"unlisted":false,"editUrl":"https://github.com/pnpm/pnpm.io/edit/main/docs/typescript.md","tags":[],"version":"12.x","lastUpdatedBy":null,"lastUpdatedAt":null,"frontMatter":{"id":"typescript","title":"Working with TypeScript"},"sidebar":"docs","previous":{"title":"Mitigating supply chain attacks","permalink":"/supply-chain-security"},"next":{"title":"Working with Git","permalink":"/git"}}'),i=n(91987),r=n(67008);let o={id:"typescript",title:"Working with TypeScript"},c,p={},d=[{value:"Do not preserve symlinks",id:"do-not-preserve-symlinks",level:2},{value:"Workspace usage",id:"workspace-usage",level:2}];function l(e){let t={a:"a",code:"code",h2:"h2",p:"p",pre:"pre",...(0,r.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.p,{children:"pnpm should work well with TypeScript out of the box most of the time."}),"\n",(0,i.jsx)(t.h2,{id:"do-not-preserve-symlinks",children:"Do not preserve symlinks"}),"\n",(0,i.jsxs)(t.p,{children:["You should not use TypeScript with ",(0,i.jsx)(t.a,{href:"https://www.typescriptlang.org/tsconfig/#preserveSymlinks",children:(0,i.jsx)(t.code,{children:"preserveSymlinks"})})," set to ",(0,i.jsx)(t.code,{children:"true"}),". TypeScript will not be able to resolve the type dependencies correctly in the linked ",(0,i.jsx)(t.code,{children:"node_modules"}),". If you do need to preserve symlinks for some reason, then you should set pnpm's ",(0,i.jsx)(t.code,{children:"nodeLinker"})," setting to ",(0,i.jsx)(t.code,{children:"hoisted"}),"."]}),"\n",(0,i.jsx)(t.h2,{id:"workspace-usage",children:"Workspace usage"}),"\n",(0,i.jsxs)(t.p,{children:["You might sometimes have issues if you have different versions of a ",(0,i.jsx)(t.code,{children:"@types/"})," dependency in a workspace. These issues happen when a package requires these types without having the type dependency in dependencies. For instance, if you have ",(0,i.jsx)(t.code,{children:"antd"})," in your dependencies, which relies on ",(0,i.jsx)(t.code,{children:"@types/react"}),", you might get a compilation error if there are multiple versions of ",(0,i.jsx)(t.code,{children:"@types/react"})," in your workspace. This is actually an issue on ",(0,i.jsx)(t.code,{children:"antd"}),"'s end because it should've added ",(0,i.jsx)(t.code,{children:"@types/react"})," to ",(0,i.jsx)(t.code,{children:"peerDependencies"}),". Luckily, you can fix this by extending ",(0,i.jsx)(t.code,{children:"antd"})," with the missing peer dependency. You can do this either by adding this to your ",(0,i.jsx)(t.code,{children:"pnpm-workspace.yaml"}),":"]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-yaml",children:"packageExtensions:\n antd:\n peerDependencies:\n '@types/react': '*'\n"})}),"\n",(0,i.jsxs)(t.p,{children:["Alternatively, you can install a config dependency that we created to deal with these issues ",(0,i.jsx)(t.a,{href:"https://github.com/pnpm/plugin-types-fixer",children:(0,i.jsx)(t.code,{children:"@pnpm/plugin-types-fixer"})}),". Run:"]}),"\n",(0,i.jsx)(t.pre,{children:(0,i.jsx)(t.code,{className:"language-sh",children:"pnpm add @pnpm/plugin-types-fixer --config\n"})})]})}function a(e={}){let{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(l,{...e})}):l(e)}},67008(e,t,n){n.d(t,{R:()=>o,x:()=>c});var s=n(71763);let i={},r=s.createContext(i);function o(e){let t=s.useContext(r);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.