Monaco-editor: Trying to use `export` d.ts typings with monaco

[kirjs]

Hello, I am trying to use monaco in a browser. I want to add a number of existing .d.ts files (angular2 actually) to the project.

What I've tried was:

 const dog = `        
export class Dog {
  public bark(): string;
}`;
monaco.languages.typescript.typescriptDefaults.addExtraLib(dog, 'dog.d.ts');            

When I go to the editor, and try to import {Dog} from 'dog'; the dog module is not found.

Using module types worked for me

const dog = `       
declare module 'dog' {
  export class Dog {
    public bark(): string;
  }
}`;
monaco.languages.typescript.typescriptDefaults.addExtraLib(dog, 'dog.d.ts');            

When I go to the editor, and try to import {Dog} from 'dog'; it works.

Thanks!

[darind]

You could prefix your typing definition key with the special node_modules/@types and set the typeRoots compiler option:

monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
    target: monaco.languages.typescript.ScriptTarget.ES2016,
    allowNonTsExtensions: true,
    moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
    module: monaco.languages.typescript.ModuleKind.CommonJS,
    noEmit: true,
    typeRoots: [ "node_modules/@types" ]
});

monaco.languages.typescript.typescriptDefaults.addExtraLib(
    `export class Dog {
        public bark(): string;
    }`,
    "node_modules/@types/dog.d.ts");

monaco.editor.create(document.getElementById("container"), {
    model: monaco.editor.createModel(
        `import {Dog} from "dog";
console.log(new Dog().bark());`,
        "typescript",
        new monaco.Uri("main.ts")
    )
});

[jrieken]

Yeah, what is the issue here? Is this a question about TypeScript?