This is my main class (it uses a subclass:)
import SubClass from './SubClass'
class MainClass extends classes(SubClass) {
constructor () {
// some code
}
}
window.MainClass = new MainClass()
export default MainClass
This is the subclass:
class SubClass {
constructor () {
this.someMethod = function () {
// some code
}
}
}
export default SubClass
If I want to use a method from the SubClass I can write: MainClass.someMethod.
How to modify this code so I write: MainClass.SubClass.someMethod instead?
So I can write:
MainClass.SubClass.someMethod
MainClass.SubClass2.someMethod
In case I need another SubClass?
I think you need to call super(). And classes() seem doen't need to be added.
When used in a constructor, the super keyword appears alone and must be used before the this keyword is used.
See document
import SubClass from './SubClass'
class MainClass extends SubClass {
constructor () {
super();
console.log(this.someMethod)
}
}
Hope this help
Related
I tried the following way to create an interface and implement it.
class AInterface {
constructor () {
if (!this.methodA) {
throw new Error('class should implement a methodA() method')
} else if (!this.methodB) {
throw new Error('class should implement a methodB() method')
}
}
}
export default AInterface
implemented that in a class by extending it. (Note that I have used ts-mixer to have multiple inheritance.
import AInterface from './AInterface'
import { Mixin } from 'ts-mixer'
class ClassA extends Mixin(AnotherClass, AInterface) {
constructor () {
super()
}
methodA () {
return 'test'
}
methodB () {
return 'test'
}
}
export default ClassA
This will throw the error class should implement a methodA() method. Which means the check I do in the interface fails if (!this.methodA).
This works fine when I remove the Mixin and extend only the interface. (class ClassA extends AInterface)
Is there a better way to do this or how can I fix this?
Node version - 14
The problem appears to be that the constructor of AInterface does not get the right this. So it does not see the methodA or methodB.
The workaround is to avoid doing that check in the constructor.
import AInterface from "./AInterface.mjs";
import { Mixin, settings } from "ts-mixer";
settings.initFunction = "init";
class ClassA extends Mixin(AnotherClass, AInterface) {}
AInterface.js
class AInterface {
init () {
if (!this.methodA) {
throw new Error('class should implement a methodA() method')
} else if (!this.methodB) {
throw new Error('class should implement a methodB() method')
}
}
}
export default AInterface
Notice the use of init() method above.
In a library that I wish to extend without modifying its code, several classes inherit from the same imported one. That is in this BaseClass I would need to overwrite a specific method.
In the library (written in TypeScript) :
import { BaseClass } from './base_class';
export class ClassA extends BaseClass {}
import { BaseClass } from './base_class';
export class ClassB extends BaseClass {}
…
In the external extension I wish to write :
import { BaseClass } from 'library';
export class ExtendedBaseClass extends BaseClass {
oneMethod() {
const data = BaseClass.prototype.oneMethod.call(this);
// make additional things with data
return data;
}
}
Is there a way for this new ExtendedBaseClass to become the parent of all ClassXs ? At least in a new extended and re-exported version of them without the need to copy their internal code.
Is there a way for this new ExtendedBaseClass to become the parent of all ClassXs?
No.
An alternative might be to replace the one method directly on the base class:
import { BaseClass } from 'library';
const oneMethod = BaseClass.prototype.oneMethod;
Object.defineProperty(BaseClass.prototype, 'oneMethod', {
value() {
const data = oneMethod.call(this);
// make additional things with data
return data;
},
});
There's no way to do exactly what you're asking, but you could achieve the same result by extending each class individually.
ExtendedClassA extends ClassA {
oneMethod() {
// call a shared method if you need to reuse
}
}
// ExtendedClassB, etc
I need to extend the two classes from the same namespace.
for ex:
declare namespace myNameSpace{
class class1{
///some methods will be here
}
class class3 extends class1{
//some method wil be here
}
class class2 extends myNameSpace. class3 {
//some methods will be here
}
export namespace class2 {
//declaration will be here
}
}
i need to extend the 'myNameSpace.class1' class as well as 'class2' namespace.
class newClass extends myNameSpace.class1, myNameSpace.class2 {
constructor() {
super();
}
}
If i call the both the classes, i got an error message
classes can only extend a single class
Is there any other way to fix this issue in typescript.
Is there any other way to fix this issue in typescript.
TypeScript is single inheritance by design.
You can use mixins but you can't override methods (unless you write a custom applyMixins methods)
Using the method:
function applyMixins(derivedCtor: any, baseCtors: any[]) {
baseCtors.forEach(baseCtor => {
Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
derivedCtor.prototype[name] = baseCtor.prototype[name];
});
});
}
You have to implement (on empty way)
class NewClass implements myNameSpace.class1, myNameSpace.class2 {
// empty implementation
public methodFrom1 : ()=>void;
public methodFrom2 : ()=>number;
constructor() {
// no super()
}
}
now use mixing to actually make it multi extend classes:
applyMixins(NewClass, [myNameSpace.class1, myNameSpace.class2]);
and now you can create the class
const foo = new NewClass()
foo.methodFrom1() // actually calls nameSpace.class1.prototype.methodFrom1
I am currently trying to figure out a way to assign methods to the super object in a class, in order to extend a functionality inside a class.
I want to create a "Component" class and have each class that extends the "Component" class have different methods depending on the component needs. I want to use the term "describe" for the method that would extend the super object. Therefore, I am describing the component.
Here is an example:
class Component {
constructor (args) {
this.template = args.template;
}
getTemplate () {
return this.template;
}
describe () {
//The magic should happen here
}
}
Class Controller describer
class Controller {
constructor () {
}
getEvents () {
return {};
}
}
Extending the Component class.
Then, using the "describe" method to inject other methods from other classes.
class example extends Component {
constructor () {
super({template: '<div></div>'});
super.describe({
Controller
});
super.getTemplate();
super.getEvents();
}
}
var app = new App({
example
});
Is it possible? Thank you :)
Suppose I have a class in one big file like this:
export default class {
constructor () {}
methodA () {}
methodB () {}
methodC () {}
}
And I want to break up the class definition so that methodA, methodB, and methodC are each defined in their own separate files. Is this possible?
You should be able to, as class is supposed to just be syntax sugar for the usual prototype workflow:
import methodOne from 'methodOne'
import methodTwo from 'methodTwo'
class MyClass {
constructor() {
}
}
Object.assign(MyClass.prototype, {methodOne, methodTwo})
export default MyClass
#elclanrs gave a correct answer, but I would modify it to allow for the use of this. I also think this is more readable.
import methodOne from 'methodOne'
import methodTwo from 'methodTwo'
class MyClass {
constructor() {
this.methodOne = methodOne.bind(this)
this.methodTwo = methodTwo.bind(this)
}
}
export default MyClass
Tip: although if your class is so large that it warrants being split into multiple files, a better solution might be to split up the class into multiple classes.