A guide on importing JavaScript modules into TypeScript

Question

A guide on importing JavaScript modules into TypeScript

I am curious about how to import a JavaScript module in TypeScript.

Project

The module is "amd."
Utilize the outFile option for a single file.
Manage internal modules using ///<reference path=''/>

Code

app.js

export function func(a, b) {
    return a+b;
}

MainApp.ts

import Stats from "../app";    

class MainApp {

    foo() {
        const f = func(1, 2); // not defined (runtime error)
    }
}

Error

SyntaxError: Unexpected token export
ReferenceError: define is not defined
Main.js:6667
    at d:\...\Main.js:6667:2
ReferenceError: MainApp is not defined
    at window.onload (d:\...\index.html:18:24)

Define not found.

javascript typescript

Answer 1

Answer №1

There may be an issue with default exports. Check out this example tailored to fit your code structure:

tsconfig.json:

{
    "compilerOptions": {
        "strict": true,
        "allowJs": true,

        "target": "es6",
        "module": "commonjs"
    }
}

app.js:

export function calculateProduct(a, b) {
    return a * b;
}

MainApp.ts:

import {calculateProduct} from './app';

class MainApp {
    bar() {
        const x = 3;
        const y = 4;

        const result = calculateProduct(3, 4);
    }
}

global.d.ts:

declare module '*.js';

Answer 2

There may be an issue with default exports. Check out this example tailored to fit your code structure:

tsconfig.json:

{
    "compilerOptions": {
        "strict": true,
        "allowJs": true,

        "target": "es6",
        "module": "commonjs"
    }
}

app.js:

export function calculateProduct(a, b) {
    return a * b;
}

MainApp.ts:

import {calculateProduct} from './app';

class MainApp {
    bar() {
        const x = 3;
        const y = 4;

        const result = calculateProduct(3, 4);
    }
}

global.d.ts:

declare module '*.js';

A guide on importing JavaScript modules into TypeScript

Answer №1

Similar questions

Ways to prevent a single element from being included in the selection of the entire

Creating packaging for a node-webkit application

Add a JavaScript library to the header directly from the body of a webpage, ensuring it is exclusive to a single

`How can a timer be removed from memory?`

What is the method for extracting latitude and longitude values individually from JSON data?

Enhancing user experience with AngularJS: Harnessing ng-Click for seamless task management on display pages

What are the installation steps for the npm package (math-simple-integrals)?

Various designations for varying entities of identical category

Encountering an error in AngularJS $http calls while trying to loop: TypeError - object is not functioning

What is the process for integrating TypeScript compiling into a JavaScript application?

Angular : Is toFixed() functioning properly with one value but not with the other one?

What can Yeoman do with php files?

Issue encountered when attempting to store the initial element in the todo array

Arranging users based on their highest number of followers in Meteor

A comprehensive guide on effectively utilizing a lookup table in a shader using three.js

Guide on implementing a progress bar for file uploads with JavaScript and AJAX request

Manually adjust rotation in Three.js by clicking

Unable to successfully export ExpressJS routes to an external file when targeting the root path

eliminate element from formBuilder

Utilizing jQuery arrays to dynamically insert values into ChartJS