Typescript import statement

Question

I am trying to understand what different syntaxes of import does and when I need to use them.

I am using typescript 1.6 (latest version as of now).

I have seen several examples of doing an import. One looks like this:

import {Aurelia} from "aurelia-framework";

Which gives me access to Aurelia from the Aurelia Framework. I more or less get this one, but I am unsure what where the part in the quotes is looking up from.

Here is another one that resharper inserted into my code:

import myJsServiceActions = require("../../service_actions/myJsFile");

This also gives me access to the stuff in myJsFile. But the syntax is quite different. And this one seems to be a path reference in the quotes.

Also this one does not use the curly braces {} like the first one. When I try to put in something like {ServiceActions} (a module in that file) it gives an error on the require saying that a string literal is expected.

What is different about this second usage (from the first one)?

I have also seen these usages in the internet, but I am assuming they are just older syntax (if they are still used please indicate how they are different):

/// <reference path="myModules.d.ts" />
....
import gt = module('greeter');

And last, how does it find the stuff in the quotes? I tried this:

import breeze from "breeze";

and I get the error:

Cannot find module "breeze"

But in my config.js these are defined right next to eachother:

map: {
    //....
    "aurelia-framework": "github:aurelia/[email protected]",
    "breeze": "npm:[email protected]",
   //.....
  }

It seems to me that if the import of aurelia-framework works, then breeze should work too. But I assume that is my ignorance of how 'import' works that is causing the problem.

You mentioned "config.js" what is that? Are you talking about tsconfig.json? — gilamran
– gilamran, Commented Nov 20, 2015 at 13:38
@gilamran - I am not sure what it is, but it seems to manage my dependencies. It is created when I do a jspm init. I assumed it was a common web development dependency manager. Something that let you reference things by a nice name (breeze) instead of the full name ([email protected].) — Vaccano
– Vaccano, Commented Nov 20, 2015 at 17:30
jspm uses systemjs to manage all the dependencies of your app, and load them when needed. It is not related to typescript. — gilamran
– gilamran, Commented Nov 20, 2015 at 19:58

basarat · Accepted Answer · 2015-11-19 23:00:25Z

2

where the part in the quotes is looking up from.

First anything that has declare module "aurelia-framework"
Then depending on the module resolution either a file aurelia-framework up the directory tree (classic module resolution) or Node style lookup up the directory tree (if --module commonjs or explicit node module resolution).

Here is another one that resharper inserted into my code:

Relative files imports are relative .d.ts or .ts or .tsx imports.

More

import foo from "foo" vs import foo = require('foo')

The first is ES6 style import (as supported by ES6) and the second is nodejs style import (modeled after var foo = require('foo'))

import breeze from "breeze";

You probably want to do import * as breeze from "breeze"

answered Nov 19, 2015 at 23:00

basarat

278k60 gold badges475 silver badges528 bronze badges

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

1 Comment

Schadensbegrenzer Over a year ago

import * as breeze from "breeze" did the trick for me. I had to wrap breeze into quotes ('breeze') in the "declare module" definition in breeze.d.ts. It's kinda hacky because on a new machine the pulled definition wont have the quote wrap. But without the quotes it complains that it cannot find module "breeze".

Collectives™ on Stack Overflow

Typescript import statement

1 Answer 1

More

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

More

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related