Develop Reference

How to include functions in namespace when don't have module?

How to include functions in namespace / module when don't have module?
example: I have a namespace:
namespace Java {}
in typescript, usually when we need a function in namespace or module, we add 'export':
namespace Java {
export function version() {
return "java8";
}
}
namespace JavaScript {
function JavaVer() {
return Java.version();
}
}
But if I set module to none:
// tsconfig
"module": "none",
If module is none, I cannot use import / export:
website/sourcecode/main.ts:17:21 - error TS1148: Cannot use imports, exports, or module augmentations when '--module' is 'none'.
17 export function version() {}
so what can I do?
image:

You can use a plain object:
TS Playground
const Java = {
version () {
return "java8";
},
};
const JavaScript = {
JavaVer () {
return Java.version();
},
};
const vJ = Java.version(); // string
const vJS = JavaScript.JavaVer(); // string
console.log(vJ === vJS); // true

It was answered in here: It's actually "can't have any imports or exports at the top level". Imports and exports inside namespaces are fine because they don't export anything from .ts file at runtime, and as long as file remains 'not a module' module=None works fine. Long explanation here

JavaScript module not defined with BabelLoader

I'm trying to import a package that I've written into another package that I've written.
Pre-Babel Loader
class TestClass {
constructor() {
// Load flags on import here
console.log("TESTING CONSTRUCTOR");
}
log(message) {
console.log("TESTING LOG");
}
}
export default new TestClass();
Post Babel Loader
var TestClass = function () {
function TestClass() {
_classCallCheck(this, TestClass);
// Load flags on import here
console.log("TESTING CONSTRUCTOR");
}
_createClass(TestClass, [{
key: "log",
value: function log(message) {
console.log("TESTING LOG");
}
}]);
return TestClass;
}();
exports.default = new TestClass();
The import itself is simply a import TestClass from 'testclass-js'. However, every single time I'm trying to load it I get a "Darklaunch is not defined" error, and can't call any of the methods of the class.
I'm wondering what I've done wrong here.

If you're trying to import the ES5/commonjs version, you'll need to import 'yourmodule'.default; This change came in around babel 6
Babel 6 changes how it exports default
Read more on the original issue: https://github.com/babel/babel/issues/2212
If your package contains both an es5 and es6+ version, you can point to the es6 version in the module key in package.json and webpack/rollup will pick that up and bundle it instead of the commonjs version

Bundling js files with webpack class undefined

Im bundling together the following files contents:
a.js:
class BaseC {
doIt(){
console.log(this);
}
}
class A extends BaseC{
}
b.js:
class B extends BaseC{
}
var b = new B()
b.doIt();
These are bundled in a final app.bundle.js. When running it i get : "Uncaught ReferenceError: BaseC is not defined". This is very odd to me as i can see it as defined first and foremost in the app.bundle.js prior to the rest of the classes as follows:.
var BaseC = function () {
function BaseC() {
_classCallCheck(this, BaseC);
}
_createClass(BaseC, [{
key: "doIt",
value: function doIt() {
console.log(this);
}
}]);
return BaseC;
}();
Any clues?
P.S: Im not using the require/import system. I know this is how webpack is normally used but what im doing is providing an array with all the js files i want bundled to webpack using the glob module and expected that with such a simple example, it should work.

Try exporting the class from a.js:
export class BaseC { ...
and importing it into b.js:
import {BaseC} from './a.js'
...

what's the proper way to implement this custom typescript module?

Let's say I want to implement and use the following ts module. It's just a basic validator that validates a first name:
export namespace Validators
{
export class NameValidator
{
constructor()
{
}
FirstNameIsValid(firstName: string)
{
return firstName.length < 20;
}
}
}
What would be the correct way for me to implement the module above? Also, what would be the correct way for me to reference and use this module from my ng2 component? The following import statement doesn't work:
import { Validators.NameValidator } from './modules/name-validator';

The way I have done it in the past is to create a module
module Formatter{
export class SsnFormatter {
ssn: string;
constructor(unformattedSsn: string) {
this.ssn = unformattedSsn.replace(/(\d{3})(\d{2})(\d{4})/, '$1-$2-$3');
}
formatSsn() {
return this.ssn;
}
}
}
Then within the other typescript files call it as
let f = new Formatter.SsnFormatter('111111111');
console.log(f);
As long as your class is within the same module namespace you should be able to reference it directly.
This was from an angular 1.x project but the version of TS or angular should not matter this is typescript communicating between modules.

Browserify ES6 - Dynamic Requires

I am looking to create a Modules system within my Application. I'm unsure on how to implement the following:
Module 1
class SomethingModule {
}
export default SomethingModule;
Module 2
class SomethingElseModule {
}
export default SomethingElseModule;
Module Loader
class ModuleLoader {
load(module) {
// "module" could be "Something" which should create a
// new instance of "SomethingModule"
module = module + 'Module';
// Require and create an instance of "module"
}
}
export default ModuleLoader;
Main File
var ModuleLoader = require('./ModuleLoader');
var loader = new ModuleLoader();
loader.load('SomethingElse');
I'm pretty new to modularised JavaScript and have no idea if this is even possible/feasible. If not, is there a way of doing this you'd suggest without polluting the global namespace and referencing window[moduleName]?

If I understand well your problem, you can create a Map and load your module in there:
class ModuleLoader {
constructor() {
this._modules = new Map();
}
load(module) {
// you should check if the module exist in a good world to not get any error
// and probably adjust the path of what you are requiring
this._modules.set(module, new require(`${module}Module`));
}
getModuleByName(name) {
return this._modules.get(name);
}
}
Edit: To make it work with browserify, you will need to have this list of all the modules somewhere. You can create a separate file ModuleBag like this:
//moduleBag.js
import yourModule from './yourModule';
import yourSecondModule from './yourSecondModule';
var map = new Map();
map.set('yourModule', yourModule);
map.set('yourSecondModule', yourSecondModule);
export default class map;
//moduleLoader.js
import moduleBag from './moduleBag';
class ModuleLoader {
constructor() {
this._modules = new Map();
}
load(module) {
var mod = moduleBag.get(module);
this._modules.set(module, new mod());
}
getModuleByName(name) {
return this._modules.get(name);
}
}
or just put it in the same file.
With this, browserify will be able to load all the necessary files.