What is the best way to declare a global TypeScript variable in a definition file to make it accessible for import?

Question

What is the best way to declare a global TypeScript variable in a definition file to make it accessible for import?

My issue revolves around an external JS library that contains a global parameter:

function Thing() {  ...  }
...
var thing = new Thing();

I have a TypeScript definition file named thing.d.ts with the following content:

declare var thing: ThingStatic;
export default thing;

export interface ThingStatic {
    functionOnThing(): ThingFoo;
}

export interface ThingFoo {
    ... and so on

To use this library in my own TS files, I import it like this:

import thing from 'thing';
import {ThingFoo} from 'thing';
...
const x:ThingFoo = thing.functionOnThing();

The problem arises when this code is transpiled to:

const thing_1 = require("thing");
...
thing_1.default.functionOnThing();

This leads to an error. After seeking help in another question, the suggestion was to try:

import * as thing from 'thing';

However, this does not resolve the issue - it introduces thing.default in TS, but once transpiled to JS, it remains undefined.

It appears that there might be an issue with thing.d.ts - there should be a way to define a typed global parameter for proper import.

How should thing.d.ts be written to accurately represent the JS without transpiling unnecessary properties like default which are not actually present?

javascript typescript typescript-typings

Answer 1

Answer №1

If you find yourself in a situation where the only way to utilize a particular library is by accessing its global variables (rather than importing it as a node module, amd, or umd module), then the simplest approach is to create a declaration file without any explicit export statements at the top level. Simply declaring a variable will suffice. When compiling your TypeScript code, make sure to include this declaration file either by adding it to the files or include section in your tsconfig.json, or by direct command line inclusion. Additionally, remember to also include the library using a <script> tag at runtime.

For example: thing.d.ts

declare var thing: ThingStatic;

declare interface ThingStatic {
    functionOnThing(): ThingFoo;
}

declare interface ThingFoo {
}

test-thing.ts

const x: ThingFoo = thing.functionOnThing();

You can compile these files together like so:

./node_modules/.bin/tsc test-thing.ts thing.d.ts

The resulting test-thing.js file will look like this:

var x = thing.functionOnThing();

For more information on ambient declarations, refer to this question.

Please note that there are module loaders available that allow you to use global libraries as if they were modules, enabling you to use an import statement instead of a <script> tag. However, configuring these module loaders for such usage can be a more complex task.

Answer 2

If you find yourself in a situation where the only way to utilize a particular library is by accessing its global variables (rather than importing it as a node module, amd, or umd module), then the simplest approach is to create a declaration file without any explicit export statements at the top level. Simply declaring a variable will suffice. When compiling your TypeScript code, make sure to include this declaration file either by adding it to the files or include section in your tsconfig.json, or by direct command line inclusion. Additionally, remember to also include the library using a <script> tag at runtime.

For example: thing.d.ts

declare var thing: ThingStatic;

declare interface ThingStatic {
    functionOnThing(): ThingFoo;
}

declare interface ThingFoo {
}

test-thing.ts

const x: ThingFoo = thing.functionOnThing();

You can compile these files together like so:

./node_modules/.bin/tsc test-thing.ts thing.d.ts

The resulting test-thing.js file will look like this:

var x = thing.functionOnThing();

For more information on ambient declarations, refer to this question.

Please note that there are module loaders available that allow you to use global libraries as if they were modules, enabling you to use an import statement instead of a <script> tag. However, configuring these module loaders for such usage can be a more complex task.

What is the best way to declare a global TypeScript variable in a definition file to make it accessible for import?

Answer №1

Similar questions

Removing a checker piece in the game of checkers after successfully jumping over it

Is it possible to enable password authentication on Firebase even if the user is currently using passwordless sign-on?

Beginner in html, css, and javascript: "Tips for saving jsfiddle demos?"

Looking to create circular text using HTML, CSS, or JavaScript?

The screen suddenly turns black just moments after starting the video

The node.js system automatically restarts an API call when a timeout occurs

Rendering an element in React Router Dom based on specific conditions

Keep things in line with async functions in Node JS

Creating a JSON object in JavaScript using an array

Using an array of strings as a key in React with TypeScript to access values from state

Template string use in Styled Components causing issues with hover functionality

Is it possible to calculate a variable within a dataset using existing data as a reference point?

Is there a way for me to display information from a secondary child component by simply clicking a button on the main component instance?

Discovering the orientation of an object in relation to the camera

Adding a class to a Vue component using the $refs property

Disregard the JSON formatting and extract solely the values

How can I confirm that all elements have been properly reset to their original positions prior to making any further adjustments to them?

Using AngularJS to automatically include predefined data in an $http request

Is it better to use relative or absolute resource scripts in an AngularJS application?

Tips on organizing and designing buttons within a canvas