We Keep Coding

JS: How to create child class from a parent class in Javascript?

How to avoid circular references at the same time create some child classes from the parent class? And keep the constrain that each class need to reside in a different file.
//Parent.mjs:
import Sub from "/.Sub.mjs"
export default class Parent {
static createSomething(){
new Sub();
}
}
//Sub.mjs:
import Parent from "/.Parent.mjs"
export default class Sub extends Parent {
contructor(){}
}
This question was originally posted here. But there is no solution under that question. If I really want to create a subclass from the superclass what code should I write?

The parent class should not need to know anything about subclass(es).
I don't see why the parent class would need a static method for creating a subclass,
but if you feel you really, really need that, then extend the Parent class object from within the Sub.mjs file:
Parent.mjs:
export default class Parent {
}
Sub.mjs:
import Parent from "/.Parent.mjs"
Parent.createSomething = function () {
return new Sub();
}
export default class Sub extends Parent {
constructor(){} // fixed typo here
}
Still, I think it is a bad idea to define such a function on the parent class. This looks like an XY problem. The original reason that made you look for such a function in the first place, certainly has a better way to be solved that doesn't involve a parent class that needs to know about a subclass.

Create instance inside abstract class of child using this

I have an abstract class that does new this(), however, it isn't creating an instance of itself, but it is creating an instance of the class that extended it.
This works in JavaScript when compiled and returns the proper class. However, TypeScript is complaining.
Cannot create an instance of an abstract class.
abstract class Model {
static find<T extends Model>(someVar) {
let inst = new this() as T
// Do some extra stuff with the instance
return inst
}
}
class A extends Model { }
A.find()

The first problem of your solution - it isn't safe, T type may not contain empty constructor. The second problem: even if you call find() on A class, return type will be inferred as Model if it isn't set explicitly.
Because anyway you should specify A type when you call find, it would be better to pass the type constructor to the find method, in this case both problems will be solved.
abstract class Model {
static find<T extends Model>(ModelClass: new () => T, param: string): T {
let inst = new ModelClass()
// Do some extra stuff with the instance
return inst;
}
}
class A extends Model {}
const a = Model.find(A, "param");

Why do propTypes live on the class but not other methods?

I read that using static for propTypes puts the it on the class instead of the instance of the React component. I don't get the difference between putting something on the class vs. the instance though. Why is propTypes on the class but not methods like render and componentDidMount, or other custom made methods inside the component?

It's for the same reason as the keyword static. This is un-changing static metadata that helps describe your class. It can be accessed without needing to instantiate your class (accessed without calling the constructor).
class example extends Component {
static propTypes = {
something: PropTypes.object,
}
static displayName = "ExampleDisplay";
render() {
return <div />;
}
}
// I can access static properties here directly
var types = example.propTypes;
var name = example.displayName;
// I can NOT access the render method without instantiating the class.
var instance = new example(); // <- this calls the constructor and creates an instance.
var renderFn = instance.render;
The question is really: why should I need to create the class just to read the propTypes or displayName? you shouldn't need to. that's why you have static.

Create New Instance of Derived Class From Parent Class Javascript es6

Im getting the following error when doing this.
Super expression must either be null or a function, not undefined
What I'm trying to do in javascript which I can do in c# is have the child class be able to call the parent class and use functions that instantiate the base class again. Say for instance you have a navbar on a page and each icon takes you to a different page but the navbar is always visible. By inheriting from the parent page I would be able to keep the code dry like we do in c# but for some reason javascript is flipping out when trying to do the same thing even if I just pass null into the super.
Doing this would allow me to havenew Support(browser).someMethod().cb().someMethod()
import { Support } from "./community/Support";
export class NavigationController {
constructor(browser){
this.browser = browser;
}
cb(){
this.browser.cool()
return new Support(this.browser);
}
import { NavigationController } from "../navigation_controller";
export class Support extends NavigationController {
constructor(browser){
super(browser);
this.browser = browser;
}
someMethod(){
this.browser.blah()
return this;
}

Javascript execute function in es6 class on extend

How can I execute a function that is aware of a newly created class's name which is derived from a certain parent at the time that the class is extended?
What I currently do:
class component {
constructor() {
// this.constructor.name returns the derived class name on instantiation
// we need to register class components derived from component
registerIfUnknown(this.constructor.name);
}
}
However this means the registerIfUnknown function will be called every time we create a new instance of any subclasses of component. Is there a way to execute a method/function that understands what the class's name is whenever the component class is extended?