29th Dec 2018

Modules – understanding imports in TypeScript – Part 3.1 – The novice programmer

I would like to concentrate on importing files and modules with typescript. Now this includes importing external sources or modules from node_modules, internal files/modules that are defined in other TS files and including ES6 exported modules.

It is very important for me to understand the difference and configuring the system in such a manner that all my code with TypeScript, ES6 & node_modules work seamless. but before that let us see what we have done till now.

A friendly reminder

This blog series is not about explaining every module in details, there are ample amount of blogs out there doing that! It is about a learning TypeScript with me.

So if you are looking for detailed explanations please visit the references I have been going through for Modules and Namespaces

Recap:

With previous two episode of this blog series we have learn the following:

• Setting up project with a directory structure and compiling with TSC
• Creating an HTTP server with ExpressJS and TypeScript, thus creating a web interface that can help us deliver our compiled file and log our output to the Logger Console.

Modules & Namespace

Let us make sure we know the TypeScript terminology; internal modules are called namespaces and external modules are just modules just like ES6. So as we start writing code in a simple TS file we write it in the global namespace.

So, I am just going to create a file src/component/global.ts that has a variable called name as below:

const name: string = "Tirth";

and just try to log the variable name inside src/index.ts which is very very stupid of me as I have not included the file and I should not expect it to log anything, it should be undefined and should probably throw an error! But, I was surprised to receive the below error:

node_modules/typescript/lib/lib.dom.d.ts:17405:15 - error TS2451: Cannot redeclare block-scoped variable 'name'.

17405 declare const name: never;
                    ~~~~
  src/component/global.ts:1:7
    1 const name: string = "Tirth";
            ~~~~
    'name' was also declared here.

src/component/global.ts:1:7 - error TS2451: Cannot redeclare block-scoped variable 'name'.

1 const name: string = "Tirth";
        ~~~~
  node_modules/typescript/lib/lib.dom.d.ts:17405:15
    17405 declare const name: never;
                        ~~~~
    'name' was also declared here.

Found 4 errors.

form the error above, I understand that name is already declared in lib.dom.d.ts and I should not re-declare it in same block scope i.e. the GLOBAL scope. Let me just comment it out and just log(name) in our index.ts. I received the output:

(string):: ""

PS: I updated the logger to add type of parameter it is printing, so name is a globally defined variable in typescript.

To know more about the issue view the link:
https://github.com/Microsoft/TypeScript/issues/9850

With my experience, going global is never good. Once should always work in a defined namespace. So let us modify the file src/component/global.ts and add everything to namespace Global.

namespace Global {
  const name: string = "Tirth";    
}

and this seems to work just fine. Now to include this to our index.ts all we need to do is:

• Export the namespace from the file global.ts
• Import the Global namespace into the file index.ts
• Make sure the name variable is also exported from the namespace

Exporting and importing is very very similar to ES6 and thus one can simple follow the rules of ES6

namespace Global {
  export const name: string = "Tirth";    
}
export default Global;

And thus updating the index.ts to

import Global from './component/global';

References:

I will not be explaining everything about modules and namespaces. You may go through the links below as reference as I did 🙂
https://www.typescriptlang.org/docs/handbook/modules.html
https://www.typescriptlang.org/docs/handbook/namespaces.html
https://basarat.gitbooks.io/typescript/docs/project/modules.html
https://basarat.gitbooks.io/typescript/docs/project/namespaces.html

Ideally, we should have access to the variable Global.name, but it would not work as TypeScript does not combine the files until and unless you specify the parameter outFile and module as AMD or System in compilerOptions! And if I do so, then everything inside my src folder would be combined to a single file and there will be no more server.js! So our next step would be adding WebPack to our project and modifying it to emit one client.js and one server.js, there after we will look more into code splitting!

We are getting there, just hang on with me. Wait for my the next episode of this blog series WebPack-ing TypeScript – Part 3.2 – The novice programmer

PS: I am keeping it lite as it is weekend and I have some plans

The code base of this episode, Part 3.1, is available at:
https://github.com/Atyantik/typescript-series/tree/part-3.1