How to use 3rd party libriaries with TypeScript for front end?

Question

I've recently started learning and using TypeScript and I've encountered a problem for which I can't find a satisfactory answer I can understand. Here is hoping someone might be able to help me and shed some light on this. I'm trying to use a wysiwyg editor called Quill - but there is no version of it written in TypeScript. After some research I found out about DefinitelyTyped and that you can use the type definitions in order to make TypeScript understand 3rd party libraries. I found this, https://www.npmjs.com/package/@types/quill . Here is where I'm stuck. If I import the file from node_modules, it solves the problem in TypeScript but JavaScript doesn't like this since it doesn't understand what that import is and gives this error: GET https://somerandomwebiste.com/node_modules/@types/quill/index.js net::ERR_ABORTED 404. I found something that works but as I understand it, it's not the ideal solution or how it should be done, meaning:

declare var Quill:any;

And my TS code is this:

import {Quill} from "../../../node_modules/@types/quill/index";

// declare  var Quill:any;

export class QuillSettings {

    constructor() {
        console.log("Quill settings4");
        this.setQuill();
    }

    private setQuill(): void {
        let container:HTMLElement = document.querySelector("#game-editor-container")!;

        let quillOptions = {
            debug: 'info',
            modules: {
                toolbar: [
                    ['bold', 'italic'],
                    ['link', 'blockquote', 'code-block', 'image'],
                    [{ list: 'ordered' }, { list: 'bullet' }]
                ]
            },
            placeholder: 'Compose an epic...',
            readOnly: true,
            theme: 'snow'
        }
        let quill:Quill = new Quill(container);

    }
}

Could anyone help me out and shed some light on this?

Answer 1

Rather than import the @types library, try importing the regular library. @types only provides typescript interfaces and not actual implementations, @types is automatically used by typescript itself.

You would do this like so:

import { Quill } from 'quill';

This should just work as typescript indexes all packages in node_modules