TypeScript language services examples [closed]

Question

TypeScript comes with source code, tests and a few samples, and the compiler apparently has API for AST manipulation and things like code completion and colouring.

However, I couldn't find any examples of how to use that API. Did anybody try to make sense of it? Maybe some bloggers?

The only example I was able to find was some basic Sublime Text plugin.

Answer 1

I was in the same situation - This is my progress so far:

A tutorial I've made - implement a Language Service plugin that add autocomplete and refactor suggestion with source code documented with a lot of details: https://cancerberosgx.github.io/typescript-plugins-of-mine/sample-ts-plugin1/src/

For documentation, start here: https://github.com/Microsoft/TypeScript/wiki/Using-the-Compiler-API - that contains snippets for using the compiler, and among other things, how to compile ts code to AST, how to use the service language, transpile to js, visit ast , modify it and print it back to ts string.

If you want to implement code completion, refactors, etc, then you want to develop a Service Language Plugin. Here is a "getting started" https://github.com/Microsoft/TypeScript/wiki/Writing-a-Language-Service-Plugin

Then you can start playing with my TypeScript compiler API Playground. It contains several examples you can edit and execute online https://typescript-api-playground.glitch.me/

Also I highly recommend using this library if possible since it has high level API : https://github.com/dsherret/ts-simple-ast/

And last, my collection of TypeScript Language Service plugins with useful refactors (based on ts-simple-ast) https://github.com/cancerberoSgx/typescript-plugins-of-mine/tree/master/typescript-plugin-proactive-code-fixes

I simpatice with this question since docs are not good, it's an important API and perhaps this helps to organize a centralized catalog of typescript plugins, anybody knows if such thing exists ?

Answer 2

If you take a look at src\harness\fourslash.ts you can see how the tests that test the language service (in tests\ls\fourslash\) are written. That file makes use of a mock 'host' implemented in src\harness\harness.ts that manages the environment the language service runs in. These tests handle things like member and completion lists, type information, formatting, rename, find references, etc.