Basic CodeMirror Configuration in TypeScript Project

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.

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.

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.

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