How do I import other TypeScript files

Question

When using the TypeScript plugin for vs net  how do I make one TypeScript file import modules declared in other TypeScript files   file 1   module moo       export class foo           file 2     what goes here   class bar extends moo foo

User · Answer

Quick Easy Process in Visual Studio      Drag and Drop the file  with  ts extension from solution window to   editor  it will generate inline reference code like          lt reference path        components someclass ts   gt

User · Answer

Typescript distinguishes two different kinds of modules  Internal modules are used to structure your code internally  At compile-time  you have to bring internal modules into scope using reference paths        lt reference path  moo ts   gt   class bar extends moo foo       On the other hand  external modules are used to refernence external source files that are to be loaded at runtime using CommonJS or AMD  In your case  to use external module loading you have to do the following   moo ts  export class foo       test  number       app ts  import moo   module  moo    class bar extends moo foo     test2  number      Note the different way of brining the code into scope  With external modules  you have to use module with the name of the source file that contains the module definition  If you want to use AMD modules  you have to call the compiler as follows   tsc --module amd app ts   This then gets compiled to  var   extends   this   extends    function  d  b        function        this constructor   d           prototype   b prototype      d prototype   new         define   require    exports    moo    function require  exports    moo          var moo     moo         var bar    function   super              extends bar   super           function bar                  super apply this  arguments                      return bar         moo foo

User · Answer

If you are doing something for the web you need to use the js file extension  import   moo   from  file js     If you are doing something for nodejs I don t think use the js file extension  import   moo   from  file

User · Answer

If you are looking to use modules and want it to compile to a single JavaScript file you can do the following   tsc -out  compiled main js Main ts   Main ts      lt reference path  AnotherNamespace ClassOne ts   gt      lt reference path  AnotherNamespace ClassTwo ts   gt   module MyNamespace       import ClassOne   AnotherNamespace ClassOne      import ClassTwo   AnotherNamespace ClassTwo       export class Main               private  classOne ClassOne          private  classTwo ClassTwo           constructor                         this  classOne   new ClassOne                this  classTwo   new ClassTwo                        ClassOne ts      lt reference path  CommonComponent ts   gt   module AnotherNamespace       export class ClassOne               private  component CommonComponent           constructor                         this  component   new CommonComponent                        CommonComponent ts  module AnotherNamespace       export class CommonComponent               constructor                                 You can read more here  http   www codebelt com typescript javascript-namespacing-with-typescript-internal-modules

User · Answer

used a reference like      lt reference path  web ts    gt   and then in the VS2013 project properties for building  app ts   Typescript Build -  Combine javascript output into file   checked -  app js

User · Answer

If you re using AMD modules  the other answers won t work in TypeScript 1 0  the newest at the time of writing    You have different approaches available to you  depending upon how many things you wish to export from each  ts file   Multiple exports  Foo ts  export class Foo    export interface IFoo      Bar ts  import fooModule   require  Foo     var foo1   new fooModule Foo    var foo2  fooModule IFoo           Single export  Foo ts  class Foo     export   Foo    Bar ts  import Foo   require  Foo     var foo   new Foo

User · Answer

import  className  from  filePath     remember also  The class you are importing   that must be exported in the  ts file

User · Answer

From TypeScript version 1 8 you can use simple import statements just like in ES6   import   ZipCodeValidator   from    ZipCodeValidator    let myValidator   new ZipCodeValidator      https   www typescriptlang org docs handbook modules html  Old answer  From TypeScript version 1 5 you can use tsconfig json  http   www typescriptlang org docs handbook tsconfig-json html  It completely eliminates the need of the comment style referencing   Older answer    You need to reference the file on the top of the current file    You can do this like this        lt reference path     typings jquery d ts   gt       lt reference path  components someclass ts   gt   class Foo       etc   These paths are relative to the current file   Your example        lt reference path  moo ts   gt   class bar extends moo foo

User · Answer

Since TypeScript 1 8  you can use simple simple import statement like   import   ClassName   from     relative path to file     or the wildcard version   import   as YourName from  global-or-relative     Read more  https   www typescriptlang org docs handbook modules html

User · Answer

I would avoid now using      lt reference path  moo ts   gt but for external libraries where the definition file is not included into the package   The reference path solves errors in the editor  but it does not really means the file needs to be imported  Therefore if you are using a gulp workflow or JSPM  those might try to compile separately each file instead of tsc -out to one file   From Typescript 1 5  Just prefix what you want to export at the file level  root scope   aLib ts    export class AClass        exported i e  will be available for import export valueZero   0     will be available for import     You can also add later in the end of the file what you want to export    class AClass        not exported yet valueZero   0     not exported yet valueOne   1     not exported  and will not in this example   export  AClass  valueZero     pick the one you want to export     Or even mix both together    class AClass        not exported yet export valueZero   0     will be available for import export  AClass     add AClass to the export list     For the import you have 2 options  first you pick again what you want  one by one   anotherFile ts    import  AClass  from    aLib ts      you import only AClass var test   new AClass        Or the whole exports    import   as lib from    aLib ts      you import all the exported values within a  lib  object var test   new lib AClass        Note regarding the exports  exporting twice the same value will raise an error   export valueZero   0  export  valueZero      valueZero is already exported

[typescript] How do I import other TypeScript files?

Examples related to typescript