A Map based TypeScript Virtual File System.
Useful when you need to:
- Run TypeScript in the browser
- Run virtual TypeScript environments where files on disk aren't the source of truth
You start with creating a map which represents all the files in the virtual
fsMap.set"index.ts", 'const a = "Hello World"'
Then you can create a virtual TypeScript Environment:
// You can then interact with the languageService to introspect the codeenv.languageService.getDocumentHighlights"index.ts", 0,
When working in tests, or in environments with file system access, you can switch your virtual system with
ts.sys to use the real filesystem with the virtual environment.
You're most likely interested in the API available in
env.languageService, here it is as of 3.7.4:
When working with Web
It's very likely that you will need to set up your lib
*.d.ts files to use this.
If you are running in an environment where you have access to the
node_modules folder, then you can can write some code like this:
This list is the default set of definitions (it's important to note that different options for
lib will affect what this list looks like) and you are grabbing the library's content from the local dependency of TypeScript.
Keeping on top of this list is quite a lot of work, so this library ships functions for generating a map with with these pre-filled from a version of TypeScript available on disk.
Note: it's possible for this list to get out of sync with TypeScript over time. It was last synced with TypeScript 3.8.0-rc.
fsMap.set"index.ts", "const hello = 'hi'"// ...
If you don't have access to
node_modules, then you can use the TypeScript CDN or unpkg to fetch the lib files. This could be up to about 1.5MB, and you should probably store the values in
localStorage so that users only have to grab it once.
This is handled for you via
The CDN cache:
- Automatically purges items which use a different version of TypeScript to save space
- Can use a copy of the lz-string module for compressing/decompressing the lib files
When working with node
If you can reliably access the file-system, then you can have a simpler time:
// If using imports where the types don't directly match up to their FS representation (like the// imports for node) then use triple-slash directives to make sure globals are set up first.fsMap.set"index.ts", content// By providing a project root, then the system knows how to resolve node_modules correctly// Requests auto-completions at `path.|`
createFSBackedSystem will let you hover a virtual environment on top of the file system at a particular path.
A full example
What does a full example look like? This comes basically verbatim from the TypeScript Sandbox codebase:
fsMap.set"index.ts", "// main TypeScript file content"// This will update the fsMap with new files// for the .d.ts and .js filesprogram.emit// Now I can look at the AST for the .ts file too
Using this Dependency
This package can be used as a commonjs import, an esmodule and directly via a script tag which edits the global namespace. All of these files are embedded inside the released packages.