Javascript – How to Properly Export and Import Modules in TypeScript

javascriptnode.jstypescript

Note: I know there are many posts on this topic, and I've reviewed quite a few already without success (please see my references at the bottom of this post).

I'm trying to run a very simple test in TypeScript, using Visual Studio Code, where I declare a class in one file and import it into another file. However, I continue to run into an issue where the file I am importing into is not recognizing the methods of the class that I exported from the other file.

The exact error messages that I'm receiving at this point are:

[ts] Property 'getFirstName' does not exist on type 'typeof "module-test/src/OtherClass"'.

[ts] Property 'getLastName' does not exist on type 'typeof "module-test/src/OtherClass"'.

I'm using Node 9.3.0 and TypeScript 2.6.2.

Many thanks in advance for any guidance that anyone can offer me!

main.ts 

import * as Other from "./OtherClass";

class myApp
{
  public async start()
  {
    console.log("Starting application");
    
    try
    {
      let firstName = await Other.getFirstName();
      console.log("First Name: " + firstName);
      let lastName = await Other.getLastName();
      console.log("Last Name: " + lastName);
    }
    catch (error)
    {
      console.error("Unable to get name: " + error)
    }
    
    console.log("Ending application");
  }
}

const app = new myApp();
app.start();

OtherClass.ts

class Other
{
  getFirstName(): string
  {
    return "John";
  }

  getLastName(): string
  {
    return "Doe";
  }
}

export { Other };

Things I've Tried

  1. Exporting via the declaration
export class Other
{
  getFirstName(): string
  {
    return "John";
  }

  getLastName(): string
  {
    return "Doe";
  }
}
  1. Exporting the individual functions
class Other
{
  export function getFirstName(): string
  {
    return "John";
  }

  export function getLastName(): string
  {
    return "Doe";
  }
}
  1. Multiple export statements
module.exports = Other;
export { Other };
export * from "OtherClass";
  1. Multiple import statements
import * as Other from "./OtherClass";
import { Other } from "./OtherClass";

Configuration Files
package.json

{
  "name": "module-test",
  "version": "1.0.0",
  "description": "Simple test of exporting and importing modules",
  "main": "./lib/main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "John Doe",
  "license": "ISC",
  "dependencies": {
    "typescript": "^2.6.2"
  },
  "devDependencies": {
    "@types/node": "^8.5.2",
    "@types/typescript": "^2.0.0"
  }
}

tsconfig.json

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es2016",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "outDir": "./lib/",                        /* Redirect output structure to the directory. */
    "strict": true,                            /* Enable all strict type-checking options. */
    "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
    "inlineSources": true                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
  }
}

Articles Referenced

Best Answer

Where to begin? This is many edits away from a valid program; you should probably start with a working example as it's not 100% clear what you want this code to do.

You created a module with a single named export, the class Other.

export { Other };

You then imported the surrounding module object:

import * as Other from "./OtherClass";

In the importing file, the class now has the name Other.Other. But at no point in the code did you actually instantiate the class with new! So here

let firstName = await Other.getFirstName();

You need to write

const oth = new Other.Other();

This looks silly, of course. Change the import statement (don't have multiple!) to

import { Other } from "./OtherClass";

And now instead you can write

const oth = new Other();

Moving on, we write

let firstName = await oth.getFirstName();

Except that getFirstName isn't an async function, so you should really write

let firstName = oth.getFirstName();
Related Topic