{"version":3,"sources":["webpack://typescriptlang-org/./src/components/devNav.tsx","webpack://typescriptlang-org/./src/pages/dev/typescript-vfs.tsx"],"names":["DevNav","props","isActive","str","active","toLowerCase","className","style","display","href","withPrefix","Index","title","description","lang","id","marginTop","Link","to","borderLeft","padding","tabIndex","locale"],"mappings":"qLAOaA,EAAS,SAACC,GACrB,IAAMC,EAAW,SAACC,GAAD,OACfF,EAAMG,QAAUH,EAAMG,OAAOC,gBAAkBF,EAAM,SAAW,IAElE,OAAO,uBAAKG,UAAU,wBACpB,sBAAIA,UAAU,OACZ,sBAAIA,UAAU,QAAO,8CACrB,sBAAIC,MAAO,CAAEC,QAAS,SACpB,qBAAGF,UAAWJ,EAAS,gBAAiBO,MAAMC,gBAAW,kBAAzD,iBAEF,0BACE,qBAAGJ,UAAWJ,EAAS,WAAYO,MAAMC,gBAAW,iBAApD,YAEF,0BACE,qBAAGJ,UAAWJ,EAAS,YAAaO,MAAMC,gBAAW,kBAArD,aAEF,0BACE,qBAAGJ,UAAWJ,EAAS,kBAAmBO,MAAMC,gBAAW,wBAA3D,mBAEF,0BACE,qBAAGJ,UAAWJ,EAAS,sBAAuBO,MAAMC,gBAAW,4BAA/D,uBAEF,0BACE,qBAAGJ,UAAWJ,EAAS,iBAAkBO,MAAMC,gBAAW,uBAA1D,sB,+FCpBFC,EAAyB,SAACV,GAC9B,OACE,gCACE,gBAAC,IAAD,CAAQW,MAAM,8BAA8BC,YAAY,2EAA2EC,KAAK,MACtI,uBAAKC,GAAG,OACN,gBAAC,IAAD,CAAQX,OAAO,mBACf,uBAAKE,UAAU,qCACb,uBAAKA,UAAU,qBACb,sBAAIC,MAAO,CAAES,UAAW,SAAxB,mCACA,sNAA6L,gBAAC,EAAAC,KAAD,CAAMC,GAAG,iBAAT,YAA7L,kBACA,sEACA,0BACE,iGACA,mEAA0C,oCAA1C,KAA6D,sCAA7D,OAAoF,sCACpF,8GAEF,sDAA6B,qBAAGT,KAAK,oFAAR,2BAG/B,uBAAKH,UAAU,cAAcC,MAAO,CAAEY,WAAY,iBAAkBC,QAAS,SAC3E,qEACA,uBAAKC,SAAU,GAAG,wBAAMf,UAAU,aAAhB,kPASlB,+EACA,uBAAKe,SAAU,GAAG,wBAAMf,UAAU,aAAhB,+qBA8BhC,mBAAgBL,GAAD,OAAkB,gBAAC,IAAD,CAAMqB,OAAO,MAAK,gBAACX,EAAUV","file":"component---src-pages-dev-typescript-vfs-tsx-802f13aedd83d80f3f95.js","sourcesContent":["import * as React from \"react\"\nimport { withPrefix } from \"gatsby\"\n\ninterface DevNavProps {\n active?: string\n}\n\nexport const DevNav = (props: DevNavProps) => {\n const isActive = (str) =>\n props.active && props.active.toLowerCase() === str ? \"active\" : \"\"\n\n return \n}\n","import * as React from \"react\"\nimport { Layout } from \"../../components/layout\"\nimport { withPrefix, graphql, Link } from \"gatsby\"\n\nimport \"./dev.scss\"\nimport { Intl } from \"../../components/Intl\"\nimport { DevNav } from \"../../components/devNav\"\n\ntype Props = {}\n\nconst Index: React.FC = (props) => {\n return (\n <>\n \n
\n \n
\n
\n

Easy access to the compiler API

\n

TypeScript VFS lets you create a self-contained TypeScript environment entirely under your control. This library is used to power the Playground, and provides the underlying tooling for twoslash code samples.

\n

There are 3 main uses for TypeScript VFS:

\n
    \n
  • Creating a TypeScript Program as an entry-point to the compiler API
    • \n
  • Running TypeScript to emit files like *.js, *.d.ts or *.map
    • \n
  • Using TypeScript's language service to make the same calls an editor would make
    • \n
\n

You can learn more in the TypeScript VFS README

\n
\n\n
\n

Setup with TypeScript from node_modules

\n 
{`import ts from 'typescript'\nimport tsvfs from '@typescript/vfs'\n\nconst fsMap = tsvfs.createDefaultMapFromNodeModules({ target: ts.ScriptTarget.ES2015 })\nfsMap.set('index.ts', 'console.log(\"Hello World\")')\n\n// ....\n              `}
\n\n

Use the TypeScript CDN to get your lib.d.ts files

\n 
{`import ts from 'typescript'\nimport tsvfs from '@typescript/vfs'\n\nconst fsMap = await tsvfs.createDefaultMapFromCDN(compilerOptions, ts.version, true, ts)\nfsMap.set('index.ts', 'console.log(\"Hello World\")')\n\nconst system = tsvfs.createSystem(fsMap)\nconst host = tsvfs.createVirtualCompilerHost(system, compilerOptions, ts)\n\nconst program = ts.createProgram({\n  rootNames: [...fsMap.keys()],\n  options: compilerOptions,\n  host: host.compilerHost,\n})\n\n// This will update the fsMap with new files\n// for the .d.ts and .js files\nprogram.emit()\n\n// Now I can look at the AST for the .ts file too\nconst index = program.getSourceFile('index.ts')\n              `}
\n
\n
\n
\n \n \n )\n}\n\nexport default (props: Props) => \n"],"sourceRoot":""}