Develop Reference

TypeScript classes into Javascript

I am learning about classes in Typescript and extend. Once I compiled .ts file and looked into .js. The code for class and extend in js is quite different. In .js class is made with function not with class.
My TS code
class User4 {
private city: string = "xyx";
protected number: number = 123123;
constructor(public name: string) {}
}
class additional extends User4 {
method1() {
console.log(this.number);
}
}
export {};
While the code in **.js ** is
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
exports.__esModule = true;
var User4 = /** #class */ (function () {
function User4(name) {
this.name = name;
this.city = "xyx";
this.number = 123123;
}
return User4;
}());
var additional = /** #class */ (function (_super) {
__extends(additional, _super);
function additional() {
return _super !== null && _super.apply(this, arguments) || this;
}
additional.prototype.method1 = function () {
console.log(this.number);
};
return additional;
}(User4));
I am wondering, if there is any issue with my system or its something else because the code in .js file is really crazy

JavaScript doesn't have real classes. Classes in JS are syntax sugar, take a look at this article: How Classes work in JavaScript
You're getting this "crazy" code, because the transpiler is by default set to handle old versions of JavaScript, before class was even added as part of the language.

Pure Javascript : Override functions

I would like to override some functions (for logging some informations)
I'm trying to do something like:
function universe() {
return 42;
}
universe = universe.override(function(){
console.log("Calling universe");
return this.$super();
});
Full sample:
Function.prototype.override = function (fn) {
var $super = this;
var f = function overrided() {
var context = this || $super || {};
context.$super = $super;
return fn.apply(context, arguments);
};
f.$super = $super;
return f;
};
Function.prototype.unoverride = function () {
if (this.$super) {
return this.$super;
}
return this;
};
function universe() {
return 42;
}
function mulBy10() {
console.warn("calling overrided function");
return this.$super() * 10;
}
console.log("---------");
console.log("original:", universe());
universe = universe.override(mulBy10);
console.log("new one:", universe());
universe = universe.unoverride();
console.log("reverted:", universe());
console.log("--With Object");
var MyObject = function() {
this.value = 42;
}
MyObject.prototype = {
constructor: MyObject,
getValue: function() {
return this.value;
}
};
var o1 = new MyObject();
console.log("MyObject original:", o1.getValue());
o1.getValue = o1.getValue.override(mulBy10);
console.log("MyObject new one:", o1.getValue());
o1.getValue = o1.getValue.unoverride();
console.log("MyObject reverted:", o1.getValue());
console.log("--With Object prototype");
o2 = new MyObject();
MyObject.prototype.getValue = MyObject.prototype.getValue.override(mulBy10);
console.log("MyObject.proto new one:", o2.getValue());
MyObject.prototype.getValue = MyObject.prototype.getValue.unoverride();
console.log("MyObject.proto reverted:", o2.getValue());
console.log("--With recursive");
function recur(it, max) {
console.log("it:", it, "max:", max);
if( it >= max ) {
console.log("finished");
return;
}
recur(it + 1, max);
}
recur = recur.override(function(it, max){
console.warn("Overrided recur");
return this.$super(it, max);
});
recur(0, 4);
This works fine with function, object functions.
But it doesn't work when i try to override CasperJs "require" function.
I did:
require = require.override(function(file){
console.log("require(" + file + ")");
return this.$super(file);
});
So i was wondering, in which case, override function will not work ?
Did i missed something in CasperJS require function ?

Why wrong order execution system.js?

Why system.js first performs __extends and then initializes?
Although I see no initialization at all since the first thing is called the __extends and throw out errors. How to fix it?
var __extends = (this && this.__extends) || function (d, b) {
console.log('set:__extends', d, b); // set:__extends undefined undefined
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
__.prototype = b.prototype;
d.prototype = new __();
};System.register(['some.js'], function(exports_1) {
console.log('set:exports', exports_1); // #####
var some_js_1;
var Index;
return {
setters:[
function (_some_js_1) {
console.log('set:setters'); // #####
some_js_1 = _some_js_1;
}],
execute: function() {
console.log('set:execute'); // #####
Index = (function (_super) {
console.log('set:before __extends'); // #####
__extends(Index, _super);
function Index() {
_super.call(this);
//console.log('some', some_js_1.SomeSuperClass);
}
return Index;
})(some_js_1.SomeSuperClass);
console.log('set:before exports_1'); // #####
exports_1("default", Index);
}
}
});

What is the meaning of e.fn in this code

I am looking at this javascript code from the quojs library:
(function() {
var e;
e = function() {
var e, t, n;
t = [];
e = function(t, r) {
var i;
if (!t) {
return n()
} else if (e.toType(t) === "function") {
return e(document).ready(t)
} else {
i = e.getDOMObject(t, r);
return n(i, t)
}
};
n = function(e, r) {
e = e || t;
e.__proto__ = n.prototype;
e.selector = r || "";
return e
};
e.extend = function(e) {
Array.prototype.slice.call(arguments, 1).forEach(function(t) {
var n, r;
r = [];
for (n in t) {
r.push(e[n] = t[n])
}
return r
});
return e
};
n.prototype = e.fn = {};
return e
}();
which comes before this:
(function () {
(function (e) {
var t, n, r, i, u, a;
r = "parentNode";
t = /^\.([\w-]+)$/;
n = /^#[\w\d-]+$/;
i = /^[\w-]+$/;
e.query = function (e, r) {
var u;
r = r.trim();
if (t.test(r)) {
u = e.getElementsByClassName(r.replace(".", ""))
} else if (i.test(r)) {
u = e.getElementsByTagName(r)
} else if (n.test(r) && e === document) {
u = e.getElementById(r.replace("#", ""));
if (!u) {
u = []
}
} else {
u = e.querySelectorAll(r)
}
if (u.nodeType) {
return [u]
} else {
return Array.prototype.slice.call(u)
}
};
e.fn.find = function (t) {
I am trying to understand the meaning of e.fn.
I see that fn is not a reserved word. I think that e is just the name given to the event object passed as a parameter. So what is the meaning of e.fn? Is the code assuming that whatever is passed as e has a property called fn? Or is fn some kind of abbreviation that references the function?

Whatever is passed as e should have a property called fn. I would search the rest of the code for "fn" and see what you come up with.

How do I do JavaScript Prototype Inheritance (chain of prototypes)

This is a question for the guru of JavaScript. I'm trying to do work with JavaScript prototype model more elegant. Here is my utility code (it provides real chain of prototypes and correct work with instanceof operator):
function Class(conf) {
var init = conf.init || function () {};
delete conf.init;
var parent = conf.parent || function () {};
delete conf.parent;
var F = function () {};
F.prototype = parent.prototype;
var f = new F();
for (var fn in conf) f[fn] = conf[fn];
init.prototype = f;
return init;
};
It allows me to do such thigns:
var Class_1 = new Class({
init: function (msg) { // constructor
this.msg = msg;
},
method_1: function () {
alert(this.msg + ' in Class_1::method_1');
},
method_2: function () {
alert(this.msg + ' in Class_1::method_2');
}
});
var Class_2 = new Class({
parent: Class_1,
init: function (msg) { // constructor
this.msg = msg;
},
// method_1 will be taken from Class_1
method_2: function () { // this method will overwrite the original one
alert(this.msg + ' in Class_2::method_2');
},
method_3: function () { // just new method
alert(this.msg + ' in Class_2::method_3');
}
});
var c1 = new Class_1('msg');
c1.method_1(); // msg in Class_1::method_1
c1.method_2(); // msg in Class_1::method_2
var c2 = new Class_2('msg');
c2.method_1(); // msg in Class_1::method_1
c2.method_2(); // msg in Class_2::method_2
c2.method_3(); // msg in Class_2::method_3
alert('c1 < Class_1 - ' + (c1 instanceof Class_1 ? 'true' : 'false')); // true
alert('c1 < Class_2 - ' + (c1 instanceof Class_2 ? 'true' : 'false')); // false
alert('c2 < Class_1 - ' + (c2 instanceof Class_1 ? 'true' : 'false')); // true
alert('c2 < Class_2 - ' + (c2 instanceof Class_2 ? 'true' : 'false')); // true
My question is: Is there more simple way to do this?

Yes, there is a better way to do this.
var call = Function.prototype.call;
var classes = createStorage(),
namespaces = createStorage(),
instances = createStorage(createStorage);
function createStorage(creator){
var storage = new WeakMap;
creator = typeof creator === 'function' ? creator : Object.create.bind(null, null, {});
return function store(o, v){
if (v) {
storage.set(o, v);
} else {
v = storage.get(o);
if (!v) {
storage.set(o, v = creator(o));
}
}
return v;
};
}
function Type(){
var self = function(){}
self.__proto__ = Type.prototype;
return self;
}
Type.prototype = Object.create(Function, {
constructor: { value: Type,
writable: true,
configurable: true },
subclass: { value: function subclass(scope){ return new Class(this, scope) },
configurable: true,
writable: true }
});
function Class(Super, scope){
if (!scope) {
scope = Super;
Super = new Type;
}
if (typeof Super !== 'function') {
throw new TypeError('Superconstructor must be a function');
} else if (typeof scope !== 'function') {
throw new TypeError('A scope function was not provided');
}
this.super = Super;
this.scope = scope;
return this.instantiate();
}
Class.unwrap = function unwrap(Ctor){
return classes(Ctor);
};
Class.prototype.instantiate = function instantiate(){
function super_(){
var name = super_.caller === Ctor ? 'constructor' : super_.caller.name;
var method = Super.prototype[name];
if (typeof method !== 'function') {
throw new Error('Attempted to call non-existent supermethod');
}
return call.apply(method, arguments);
}
var Super = this.super,
namespace = namespaces(Super),
private = instances(namespace)
var Ctor = this.scope.call(namespace, private, super_);
Ctor.__proto__ = Super;
Ctor.prototype.__proto__ = Super.prototype;
namespaces(Ctor, namespace);
classes(Ctor, this);
return Ctor;
}
example usage:
var Primary = new Class(function(_, super_){
var namespace = this;
namespace.instances = 0;
function Primary(name, secret){
this.name = name;
_(this).secret = secret;
namespace.instances++;
}
Primary.prototype.logSecret = function logSecret(label){
label = label || 'secret';
console.log(label + ': ' + _(this).secret);
}
return Primary;
});
var Derived = Primary.subclass(function(_, super_){
function Derived(name, secret, size){
super_(this, name, secret);
this.size = size;
}
Derived.prototype.logSecret = function logSecret(){
super_(this, 'derived secret');
}
Derived.prototype.exposeSecret = function exposeSecret(){
return _(this).secret;
}
return Derived;
});
var Bob = new Derived('Bob', 'is dumb', 20);
Bob.logSecret();
console.log(Bob);
console.log(Bob.exposeSecret());

After some research I've concluded there is no more simple way to do this.