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

Guide on creating a Typescript function with a strongly typed argument

Error: AppModule requires an array of arguments in order to function properly

typegrapql encounters an issue with experimentalDecorators

Using Mat-Error for Two Way Binding leads to frequent triggering of ngModelChange事件

No matter what I attempt, Ng-options is still failing to work properly

An error occurs when attempting to access a property that does not exist on type 'never'. Why is this considered an error rather than a warning?

Tips for integrating the react-financial-charts library into your React and JavaScript project

What is the best method for retrieving an item from localstorage?

What is the best way to implement a switch case with multiple payload types as parameters?

Turn off TypeScript's type validation during production builds

The error message from ANGULAR states that it cannot locate the control with the specified path: 'childrenFormArray -> [object Object] -> gender'

How to Toggle Visibility of Angular2 Material Drop Down Menu?

Struggling with integrating Axios with Vue3

Encountering a TS1005 error while trying to import types from a type definition file

Determine the date and time based on the number of days passed

Angular: Initiate multiple functions simultaneously and combine results afterwards

The type declaration for the Storage.prototype.setObject method

I encounter an error message stating "Cannot read property 'push' of undefined" when trying to add an item to a property within an interface

Exploring Angular 2 with Visual Studio 2015 Update 1 in the context of Type Script Configuration

What steps should I take to ensure that TypeScript acknowledges the validity of my object assignment?