TypeScript Syntax Validation with Ace Editor / Any Web IDE?

Question

Google has failed me. I'd like a way to have TypeScript syntax validation in my Ace editor. I've found an Ace-based TypeScript Playground by basarat AKA 'That TypeScript Guy' but the repo has no good README and I doubt the validator is up to date with TypeScript's newer features, as the last commit is from years ago.

I understand how to add the custom listing itself in Ace; it's just the actual TypeScript linter I am struggling to find. It seems there is no up-to-date maintained one; I'm surprised there isn't one. Currently, I debounce a call to get diagnostics via a library called ts-morph, which provides developer-friendly methods for the TypeScript compiler API. I get those diagnostics, loop over them, and add my own custom annotations to the editor:

const diagnostics = getDiagnostics(code)
    aceEditor.getSession().setAnnotations(
      diagnostics.map(diagnostic => {
        return {
          row: diagnostic.getLineNumber() - 1,
          column: diagnostic.getStart(),
          text: diagnostic.getMessageText().toString(),
          type: convertTypeScriptCategoryToAceType(diagnostic.getCategory()),
        }
      })
    )

This is okay for now, but I'd like to do it the 'Ace' way with a Web Worker in the format they suggest.

I am slightly open to migrating away from Ace Editor; for example I also know about TypeScript Playground, but this doesn't seem to have an open-source repository. Other famous online IDEs, like CodeSandbox also must have their ways of doing it. (I looked a little bit into CodeSandbox's source but their repository is expectedly quite complex.)

Can anybody provide me insight into getting nice TypeScript IntelliSense and syntax checking in a web-based IDE? Is it possible via current open source tools?

Answer 1

Of course, within a few minutes of posting this, I find the answer (and it was posted in the comments). Microsoft indeed does have their own editor called monaco-editor. This is actually the very same that powers VSCode.