Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Typescript import statement

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.

like image 920
Vaccano Avatar asked Oct 31 '22 15:10

Vaccano


1 Answers

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"

like image 151
basarat Avatar answered Nov 15 '22 07:11

basarat