Importing own JavaScript modules into converted TypeScript

Question

I'm trying to convert an existing JavaScript codebase to TypeScript one file at a time. Hitting a problem with the imports.

Converting:

// JavaScript
const AWS = require("aws-sdk");

to:

// TypeScript
import AWS = require("aws-sdk");

works as the AWS SDK is installed in node_modules. When I try to import one of my own modules, converting:

// This works, but is it "correct"? Path here is relative to compiled .js file
const C = require('../utils/constants');

to:

import C = require('../utils/constants');

it fails with Cannot find module '../utils/constants'.ts(2307).

For context, here are the paths of the concerned files (all paths relative to project root):

Module file I am trying to use: utils/constants.js
Original .js file: utils/sesUtil.js
Equivalent .ts file: src/utils/sesUtil.ts (this is the one we're discussing here)
Compiled .js file: dist/sesUtil.js

Leads me to some questions:

What is the correct way to import my own (CommonJS) JavaScript modules?
Should the path be relative to where the .ts file exists (src/utils/ses.ts) or relative to where the compiled .js file will go (dist/ses.js)?

Here's my tsconfig.json file:

{
    "compilerOptions": {
        "module": "commonjs",
        "esModuleInterop": true,
        "target": "es6",
        "noImplicitAny": true,
        "moduleResolution": "node",
        "sourceMap": true,
        "outDir": "dist",
        "baseUrl": ".",
        "paths": {
            "*": [
                "node_modules/*",
                "src/types/*"
            ]
        }
    },
    "include": [
        "src/**/*"
    ]
}

As already posted in answer - do not use require. Use import * as C from '' or import C from ''. Also, make sure to set rootDir and outDir like "mirroring". Your outDir structure will be mirroring your rootDir structure. — Eugene Obrezkov
– Eugene Obrezkov, Commented Apr 30, 2020 at 7:33

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

Regard to problems with path. Make sure to set, at least, rootDir and outDir properties - reference.

--rootDir - specifies the root directory of input files. Only use to control the output directory structure with --outDir.

--outDir - redirect output structure to the directory.

E.g. you have a source file in src/animal/Dog.ts. It will appear in dist/animal/Dog.js with the following setup:

"rootDir": "src",
"outDir": "dist"

include field is also must to be set as described here. These are the usual UNIX glob patterns for the files to include for compilation. You also can use files, but files is for including the exact file, it is not a glob pattern. So community prefers to use include.

Regard to require in TypeScript code. Preferably to forget about require at all (except some edge cases). If you want to import evertything from the module, use:

import * as MyModule from './MyModule';
import MyModule from './MyModule';

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 30, 2020 at 7:38

Eugene Obrezkov

2,9962 gold badges19 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

markvgti Over a year ago

Thanks. What do I do with the include in tsconfig.json? Leave it as it is or remove it completely?

Eugene Obrezkov Over a year ago

Leave it as is. It is a proper glob pattern for "include everything from sources". I'll update the answer.

Nenad · Accepted Answer · 2020-04-30 07:08:12Z

0

Replacement for:

const C = require('../utils/constants');

is:

import * as C from '../utils/constants';

Regarding import paths - relative to the file you are importing into, or relative to project's root directory, I decide based on context.

Are those 2 files part of the same implementation and likely to move together (for example to new folder)? Then use ../ paths, relative to each other.
Is file I am importing part of separate unit/implementation? Then use path from root directory (eg src/...).

answered Apr 30, 2020 at 7:08

Nenad

27k11 gold badges81 silver badges102 bronze badges

1 Comment

markvgti Over a year ago

This didn't work for me. I've added a list explaining the locations of the various files. Maybe that will help explain better.

Collectives™ on Stack Overflow

Importing own JavaScript modules into converted TypeScript

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related