TypeScript shares this concept. Modules are executed within their own scope, not in the global scope; this means that variables, functions, classes, etc. Conversely, to consume a variable, function, class, interface, etc. Modules are declarative; the relationships between modules are specified in terms of imports and exports at the file level. Modules import one another using a module loader. At runtime the module loader is responsible for locating and executing all dependencies of a module before executing it.
Export statements are handy when exports need to be renamed for consumers, so the above example can be written as:.
Often modules extend other modules, and partially expose some of their features. A re-export does not import it locally, or introduce a local variable.
Re: TypeScript - Namespace? Module?
Importing is just about as easy as exporting from a module. Importing an exported declaration is done through using one of the import forms below:. Though not recommended practice, some modules set up some global state that can be used by other modules. These modules may not have any exports, or the consumer is not interested in any of their exports. To import these modules, use:. Prior to TypeScript 3.
With TypeScript 3. You can read more in the 3. Each module can optionally export a default export. Default exports are marked with the keyword default ; and there can only be one default export per module. Classes and function declarations can be authored directly as default exports.
Being from Java background, Can someone explain me in nutshell when to use what and what's the right design? I feel I am messing up when I am writing sample project. So far this is my understanding 1. Directly use reference paths? I hope someone can explain in detail with real world scenario. In practice, you have two choices at runtime: 1 combine all transpiled code into one file, or 2 use external modules and have multiple files and require some other mechanism to get at those files.
To make a type or value visible outside of the file that it's in, you have to export it if it's inside of a namespace. Whether you export it at the top level or within a namespace will decide if it's now in an external module.
Classes in a namespace will always need to be explicitly exported for the class to be visible at compile time outside of the file in which it is defined.
This depends of if you're using external modules. An external module will always need to be imported to "use" it. Namespaces that aren't in an external module can span files, so if you're in the same namespace you can refer to anything exported by the namespace without needing any sort of import.
To really understand the above you need some background knowledge. Reference directives are used at compile time to locate type information. Your source has a particular symbol in it. How does the TypeScript compiler locate the definition for that symbol? The reference directive has largely been subsumed by the tsconfig.
If a namespace contain only type information then it has no runtime manifestation at all -- you can check this by looking at the JS output and finding an empty JS file. If a namespace has implementation code, then the code is wrapped inside a closure that is assigned to a global variable with the same name as the namespace.The namespace is a way which is used for logical grouping of functionalities.
Open the terminal and go to the location where you stored your project. Then, type the following command. So, the correct way to compile and execute the above code, we need to use the following command in the terminal window. A namespace also allows us to define one namespace into another namespace.
We can access the members of the nested namespace by using the dot. The following example helps us to understand the nested namespace more clearly.
I've created a little component library with React and TypeScript.
Now I want to reorganize my exported components into namespaces as I've seen this in ant. I want to do the same, because of a context my some components need to be children of others. Currently it looks like this:. That doesn't throw an error, but DSVImport needs to be the default export. Also DSVImport is a function and not the component. Learn more. Asked yesterday. Active yesterday. Viewed 31 times. In ant. Robin Robin 5, 4 4 gold badges 41 41 silver badges 70 70 bronze badges.
The dark mode beta is finally here. Change your preferences any time.
Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. I am trying to make use of the type declarations files in the DefinitelyTyped repository. Many of these files use the following pattern:.
Googling around, I've found references to this being used to make a declaration file usable in both module-based and non-module-based systems. However, I'm struggling to find a clear explanation of a what each of these lines exactly does individually and b how exactly this combination works to support both types of consumers. See the documentation which gives this example:. It can also be used as a global variable, but only inside of a script.
TypeScript - Namespaces
A script is a file with no imports or exports. Here you have a generic type library which doesn't know which module system is being used so it tries to cover all bases. Learn more. Asked 2 years, 9 months ago.Typescript: namespaces
Active 2 years, 9 months ago. Viewed 8k times. ChaseMedallion ChaseMedallion Seems you're not the first to have this question. Not a dupe, since that one wasn't answered either. You might consider tagging this with react as well to see if react experts know.
Library QuickStart. TypeScript's Type System. Errors in TypeScript. TypeScript Compiler Internals. Powered by GitBook. Last updated 3 months ago. Edit on GitHub.GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. Already on GitHub? Sign in to your account. TS Version 2. Actual Behaviour We get the error message: Identifier 'React' must be imported from a module. Expected Behaviour get the error message Cannot find namespace 'React'. Seems like this is related to: export as namespace React; statement in the React type definitions.
The export as namespace. I assume you are loading React via JSPM at runtime which means you should be importing it as an external module where ever you use it. If you do that in even one file you can no longer use the global React because the export as namespace syntax is there to allow use as a global variable or use an external module, but not a mixture. It is intentionally mutually exclusive. I was mistaken, it is file by file. I work with subash-a so will chime in here too. Yes, we are loading React via JSPM, hence we will never use the global React ; this is why we expect any use of React without an import to give the error message:.
So is it the case that the export as namespace line is included to support those people who do use React globally, and the error message:. This is precisely to prevent accidental usage of the global by those using modules but to allow the type declaration to be shared with others using it as a global.
OK, so that case is also guarded against. So long as you are using react from a module, you must import it. Module with error. Corrected Mudule. So my next question is: how does the compiler know that React must be imported when there are no imports to tell it one way or the other?
Does it use compilerOptions. I'm guessing it does. If there are no imports or exports as in the last example, you are writing a global script. A file is only a module if it has at least one top level import or export.
That is how it will be compiled and so it assumes you are looking for React in the global namespace. Since it finds React there. It successfully typechecks. Sorry, but I'm missing something. We're talking about a TypeScript project here that declares a tsconfig. Are you saying that global scripts can be written in this context?
Assuming there is just one. Then doesn't this fail the test that I described above? Namely that it's possible to write code as you did, your global script that uses Reactcompiles, but then fails at runtime?