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 Global.name
src
server.js
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
Tags In
Categories
- Charts (1)
- Deployment Tools (1)
- IDE (1)
- JavaScript (3)
- Operating System (1)
- Other (30)
- PHP (1)
- Programming (6)