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.

4

Solved the problem with a dirty trick. I had errors saying autoRefresh and showTrailingSpace are not in CodeMirror.EditorConfiguration. So I defined:

interface EditorAddon {
    autoRefresh: boolean;
    showTrailingSpace: boolean;
}

And then, to define the editor options added this interface:

const options: CodeMirror.EditorConfiguration & EditorAddon = {
...
};
editor = codeMirror(dom, options);

No more complains from Typescript!
Hope it helps
mario