Unable to employ a custom Typescript .d.ts file

Question

Unable to employ a custom Typescript .d.ts file

Currently, I am delving into learning TypeScript and encountering a hurdle while attempting to define a class in a TypeScript definition file and then utilize it in a TypeScript file.

The dilemma lies with a JavaScript "class" called "Facade," which serves as a well-known design pattern of the OpenLayers Library. The structure of this facade looks like this:

lib/carto-facade/OpenLayerFacade.js :

function OpenLayerFacade() {
    this.map =   new ol.Map({
        layers: [
            new ol.layer.Tile({source: new ol.source.OSM()})
        ],
        view: new ol.View({
            center: [43.5, 5.0],
            zoom: 2
        }),
        target: 'map'
    });
}

OpenLayerFacade.prototype.setViewCenter = function(latitude, longitude)  {
    this.map.getView().setCenter(ol.proj.fromLonLat([longitude, latitude]));
}

Subsequently, I wish to employ this facade in a TypeScript project. Consequently, I formulated my .d.ts file as follows:

lib/carto-facade/OpenLayerFacade.d.ts

declare interface OpenLayerfacade {
    setViewCenter(latitude:number, longitude:number):void;
}

declare interface OpenLayerfacadeFactory {
    new(divName:string): OpenLayerfacade;
}

export var OpenLayerfacade:OpenLayerfacadeFactory;

Now, I aim to utilize it in a TS script loaded by a browser:

/// <reference path="../typings/jquery/jquery.d.ts" />
/// <reference path="../lib/carto-facade/OpenLayerFacade.d.ts" />

import oli = require('../lib/carto-facade/OpenLayerFacade');

$(document).ready(function () {
    var ol = new oli.OpenLayerFacade("map");
    ol.setViewCenter(43.5, 6.0);
    console.log("Map displayed");
});

While everything compiles (transpiles) successfully, upon loading my webpage containing the script, I encounter the following error:

Uncaught TypeError: Cannot read property 'OpenLayerFacade' of undefined

This issue arises when I attempt to instantiate a new "OpenLayerFacade".

I have been using require.js, therefore transpile with the option "module": "amd" in my tsconfig.json

The structure of my HTML File is as shown below:

<html lang="en">
...

What could be going wrong?

I believe that the solution to my predicament might lie within the TypeScript Handbook. Any guidance on locating the relevant information would be greatly appreciated.

Kind regards,

typescript

Answer 1

Answer №1

When utilizing commonjs, it is essential to have an Ambient External Module definition in place. For detailed information, refer to this documentation: http://www.typescriptlang.org/Handbook#writing-dts-files (§ Ambient External Modules)

To cater to both Internal Modules and External Modules, there exists a method for creating definitions that serve dual purposes. One example could involve defining a class.

//Internal module
declare namespace Oli {
    class OpenLayerfacade {
        constructor(divName:string);
        setViewCenter(latitude:number, longitude:number):void;
    }
}

//External module
declare module "oli" {
    export = Oli
}

Subsequently, import using the new 1.6 syntax

import { OpenLayerfacade } from 'oli'

Answer 2

When utilizing commonjs, it is essential to have an Ambient External Module definition in place. For detailed information, refer to this documentation: http://www.typescriptlang.org/Handbook#writing-dts-files (§ Ambient External Modules)

To cater to both Internal Modules and External Modules, there exists a method for creating definitions that serve dual purposes. One example could involve defining a class.

//Internal module
declare namespace Oli {
    class OpenLayerfacade {
        constructor(divName:string);
        setViewCenter(latitude:number, longitude:number):void;
    }
}

//External module
declare module "oli" {
    export = Oli
}

Subsequently, import using the new 1.6 syntax

import { OpenLayerfacade } from 'oli'

Answer 3

Answer №2

Here's what the code is doing:

import oli = require('../lib/carto-facade/OpenLayerFacade');

This line means that you are bringing in an external module. However, your JavaScript code is not an external module (you could write it in pure JS if necessary). A simple solution would be to remove that line from your TypeScript code. Instead, make sure that your JS code creates a global variable OpenLayerfacade (as specified in d.ts) during runtime - it's up to you to load the JS code. Then in TypeScript, use the declared global variable.

/// <reference path="../typings/jquery/jquery.d.ts" />
/// <reference path="../lib/carto-facade/OpenLayerFacade.d.ts" />

$(document).ready(function () {
    var ol = new OpenLayerFacade("map");
    ol.setViewCenter(43.5, 6.0);
    console.log("Map displayed");
});

This is how you would handle it without using commonjs - by using internal modules or namespaces.

If you are using commonjs and want to utilize external modules, then your JS code should be a commonjs module (an external module in TypeScript terminology). Additionally, wrap your declaration file in a module to inform the compiler about it.

export modules 'oli' {
    declare interface OpenLayerfacade {
        setViewCenter(latitude:number, longitude:number):void;
    }

    declare interface OpenLayerfacadeFactory {
         new(divName:string): OpenLayerfacade;
     }

    export var OpenLayerfacade:OpenLayerfacadeFactory;
}

and import it in a commonjs manner:

import oli = require('oli');

You still need

/// <reference path="../lib/carto-facade/OpenLayerFacade.d.ts" />

to specify to the compiler where to find the 'oli' module (this can be simplified with tsc >1.6).

If your JS snippet is correct and you don't want or can't convert JS to a commonjs module, you can still integrate it into your application using commonjs. Simply follow the first method described with namespaces.

Answer 4

Here's what the code is doing:

import oli = require('../lib/carto-facade/OpenLayerFacade');

This line means that you are bringing in an external module. However, your JavaScript code is not an external module (you could write it in pure JS if necessary). A simple solution would be to remove that line from your TypeScript code. Instead, make sure that your JS code creates a global variable OpenLayerfacade (as specified in d.ts) during runtime - it's up to you to load the JS code. Then in TypeScript, use the declared global variable.

/// <reference path="../typings/jquery/jquery.d.ts" />
/// <reference path="../lib/carto-facade/OpenLayerFacade.d.ts" />

$(document).ready(function () {
    var ol = new OpenLayerFacade("map");
    ol.setViewCenter(43.5, 6.0);
    console.log("Map displayed");
});

This is how you would handle it without using commonjs - by using internal modules or namespaces.

If you are using commonjs and want to utilize external modules, then your JS code should be a commonjs module (an external module in TypeScript terminology). Additionally, wrap your declaration file in a module to inform the compiler about it.

export modules 'oli' {
    declare interface OpenLayerfacade {
        setViewCenter(latitude:number, longitude:number):void;
    }

    declare interface OpenLayerfacadeFactory {
         new(divName:string): OpenLayerfacade;
     }

    export var OpenLayerfacade:OpenLayerfacadeFactory;
}

and import it in a commonjs manner:

import oli = require('oli');

You still need

/// <reference path="../lib/carto-facade/OpenLayerFacade.d.ts" />

to specify to the compiler where to find the 'oli' module (this can be simplified with tsc >1.6).

If your JS snippet is correct and you don't want or can't convert JS to a commonjs module, you can still integrate it into your application using commonjs. Simply follow the first method described with namespaces.

Unable to employ a custom Typescript .d.ts file

Answer №1

Answer №2

Similar questions

Angular displays [object Object] upon return

The 'import type' declaration cannot be parsed by the Babel parser

What could cause my arguments to "not align with any signature" of console.log?

Docz: Utilizing Typescript definitions for props rendering beyond just interfaces

What is the best way to ensure that all function parameters using a shared generic tuple type have a consistent length?

React is not displaying the most recent value

TS interfaces: Understanding the distinction between optional and mandatory properties

Utilize generics to define the data type of the output

Issues with typescript compiler when using React-beautiful-dnd

Managing middleware in tRPC: Utilizing multiple methods for a single route call?

Removing duplicate elements from an array in TypeScript

Issue with API and Middleware: unable to access /api/auth/providers

What is the process for developing a bespoke TypeScript Declaration library and integrating it into my projects through NPM or GitHub Packages?

Customizing the MUI Select component with TypeScript

Injecting AngularJS together with TypeScript and Restangular to optimize application performance

Issue with TypeScript Functions and Virtual Mongoose Schema in Next.js version 13.5

"Troubleshooting the issue of Angular's select binding causing a disruption

Determine the route parameter name based on the path string, for example, '/posts/:id'

typescript - instantiate an object using values stored in an array

Dealing with reactive form controls using HTML select elements