Basic CodeMirror Configuration in TypeScript Project

#1

I am trying to implement the following JavaScript CodeMirror setup in a TypeScript project…

var editor = CodeMirror.fromTextArea('code', {
    height: '350px',
    parserfile: 'parsexml.js',
    stylesheet: 'css/xmlcolors.css',
    path: 'js/',
    continuousScanning: 500,
    lineNumbers: true
});

This is my current attempt:

const definition: HTMLTextAreaElement = 
    document.getElementById('Definition') as HTMLTextAreaElement;

const config: CodeMirror.EditorConfiguration = {
    lineNumbers: true
};

const editor = CodeMirror.fromTextArea(definition, config);

This works up to a point, but the CodeMirror.EditorConfiguration interface does not appear to expose all of the option properties, e.g. height, parserfile, stylesheet etc.

I have installed @types/codemirror and have confirmed the above in the index.d.ts file.

Any guidance on where I am going wrong, or a better approach would be much appreciated.

#2

We don’t maintain @types/codemirror, so I can’t vouch for its quality, but in general the current CodeMirror is really hard to express in a TypeScript typing — for example, the options object is an open set that can be extended by addons, which isn’t something you can describe cleanly in a .d.ts file. The design for version 6 addresses a lot of this, but for now, the recommendation is to just abuse TypeScript’s any type and type casts to make things pass the typechecker.

#3

Hello Marijn, thank you for taking the time to respond - much appreciated.

I have made some progress with the general deployment in a TypeScript/WebPack build environment - see my StackOverflow post if it is of any help to anyone.

CodeMirror is a great development - thanks again.