Angular 5: adding types to external JS file

Question

I'm loading a JS file through a <script src="http://.../script.js">

In the JS, there is a namespace "foo", and a method "bar".

I would like to call foo.bar() from my component.

I'd like to add type definitions so that I know what I'm doing while I'm coding. I have the file script.d.ts with type definitions. It looks like this:

export as namespace foo;

export namespace Baz {
    interface Qux {
    // ...
    }
}

export function bar(): Baz.Qux;

I can't figure out how to include this file in the Angular build (using CLI), so that I get type checks during build, but at runtime the namespace and function in the external JS file will be called from my component. Help?

Luis Aceituno · Accepted Answer · 2018-02-22 19:37:05Z

1

You don't need the export modifier, since these are not exported from a module you can use declare and reference them with a /// or include the definitions in tsconfig:

// script.d.ts
declare namespace foo {
    namespace Baz {
        interface Qux {
        // ...
        }
    }

    declare function bar(): Baz.Qux;
}

// Other file
/// <reference path="./script.d.ts" />
foo.bar() // works and calls method from remote JS file

edited Feb 22, 2018 at 19:37

Luis Aceituno

9491 gold badge6 silver badges13 bronze badges

answered Feb 22, 2018 at 19:02

Titian Cernicova-Dragomir

253k37 gold badges465 silver badges395 bronze badges

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

2 Comments

Luis Aceituno Over a year ago

the namespace "foo" is being used in my script.js, so I'm forced to use foo.bar() though.

Titian Cernicova-Dragomir Over a year ago

@LuisAceituno the wrap it all in the foo namespace edited answer

Collectives™ on Stack Overflow

Angular 5: adding types to external JS file

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related