TypeScript: Avoid require statements in compiled JavaScript

Question

In my TypeScript code I am using a third-party library called bunyan like so:

private logger: bunyan.Logger = bunyan.createLogger({name: "MyClass"});

Because TypeScript cannot resolve the variable bunyan, I do this to make the TypeScript compiler work:

import * as bunyan from "bunyan";

Unfortunately this causes the following JavaScript output:

var bunyan = require("bunyan");

The require statement will not work in the browser (when not using a requirejs implementation), so I will receive: Uncaught ReferenceError: require is not defined.

Actually I don't need the require statement in my compiled JavaScript because there is a bunyan.min.js (browserified version) which I can use for the browser. But how can I avoid the bunyan import in my TypeScript code without having the TypeScript compiler complaining about an unknown reference?

I am using TypeScript 1.8 and this is my TypeScript compiler configuration:

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "moduleResolution": "node",
    "noEmitOnError": true,
    "noImplicitAny": false,
    "removeComments": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules",
    "typings/browser",
    "typings/browser.d.ts"
  ]
}

James Monger · Accepted Answer · 2016-06-30 16:15:10Z

2

You should use declare to declare a module for bunyan with Logger and createLogger.

declare module bunyan {
    export interface Logger {
        info(message: string): any;
        warn(message: string): any;
    }

    export function createLogger(options: any): Logger;
};

class MyClass {
    private logger: bunyan.Logger = bunyan.createLogger({name: "MyClass"});
}

I would recommend using a typings declaration file like the one found here so you get the full benefit of TypeScript :)

edited Jun 30, 2016 at 16:15

answered Jun 30, 2016 at 15:51

James Monger

10.8k9 gold badges65 silver badges99 bronze badges

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

6 Comments

Benny Neugebauer Over a year ago

Thanks for your fast answer. But if I am doing this I get error TS2503: Cannot find namespace 'bunyan'.

James Monger Over a year ago

My mistake @BennyNeugebauer. I've updated my answer :)

Benny Neugebauer Over a year ago

Thanks, James! I will try that out! Do I really need to declare every method of bunyan as interface method or can I make somehow use of it's index.d.ts file?

James Monger Over a year ago

@BennyNeugebauer You can use the index.d.ts file :) simply download it and then put this at the top of your .ts file /// <reference path="./index.d.ts" />

Benny Neugebauer Over a year ago

This I know. But do I still need to implement a fake Logger interface? Because the members of the Logger are already defined in the index.d.ts of bunyan and I was wondering if I can make use of it?

|

Benny Neugebauer · Accepted Answer · 2016-06-30 18:38:55Z

I found out that there are two things that come into play:

Package reference
Type declaration

Explanation

In my initial code I imported bunyan which helped the TypeScript compiler to find bunyan's declaration. With the assignment of private logger: bunyan.Logger I also forced type safety on my logger variable.

To get rid off the bunyan reference (to also get rid off the compiled var bunyan = require("bunyan"); code) I needed to trick the compiler.

The TS compiler can be cheated by removing the import and telling TypeScript that there is something (any) out in the wild which is named bunyan. This can be done by writing:

declare var bunyan: any;

Because the TS compiler is tricked there is no way for it to guarantee type safety anymore, so the specific type from the logger variable needs to be removed and it's declaration must look like the following statement:

private logger: any = bunyan.createLogger({name: "MyClass"});

This bring us to the following solution:

Before

// Package reference
import * as bunyan from "bunyan"; 

// Type declaration
private logger: bunyan.Logger = bunyan.createLogger({name: "MyClass"});

After

// Package reference
declare var bunyan: any; 

// Type declaration
private logger: any = bunyan.createLogger({name: "MyClass"});

Thanks James Monger for making this clear to me.

Collectives™ on Stack Overflow

TypeScript: Avoid require statements in compiled JavaScript

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related