Mixing
Allow subclass to override with either a function property or a method
class Foo {
foo: () => void
}
class Bar extends Foo {
foo() {}
}
Is there any way to tell TypeScript to allow the above example?
Playground
Class 'Foo' defines instance member property 'foo', but extended class 'Bar' defines it as instance member function.
typescript
asked Jan 1 at 16:32
aleclarsonaleclarson
10.3k64066
add a comment |
class Foo {
foo: () => void
}
class Bar extends Foo {
foo() {}
}
Is there any way to tell TypeScript to allow the above example?
Playground
Class 'Foo' defines instance member property 'foo', but extended class 'Bar' defines it as instance member function.
typescript
asked Jan 1 at 16:32
aleclarsonaleclarson
10.3k64066
add a comment |
class Foo {
foo: () => void
}
class Bar extends Foo {
foo() {}
}
Is there any way to tell TypeScript to allow the above example?
Playground
Class 'Foo' defines instance member property 'foo', but extended class 'Bar' defines it as instance member function.
typescript
asked Jan 1 at 16:32
aleclarsonaleclarson
10.3k64066
class Foo {
foo: () => void
}
class Bar extends Foo {
foo() {}
}
Is there any way to tell TypeScript to allow the above example?
Playground
Class 'Foo' defines instance member property 'foo', but extended class 'Bar' defines it as instance member function.
typescript
typescript
asked Jan 1 at 16:32
aleclarsonaleclarson
10.3k64066
asked Jan 1 at 16:32
aleclarsonaleclarson
10.3k64066
edited Feb 21 at 23:08
aleclarson
asked Jan 1 at 16:32
aleclarsonaleclarson
10.3k64066
asked Jan 1 at 16:32
aleclarsonaleclarson
10.3k64066
asked Jan 1 at 16:32
aleclarsonaleclarson
10.3k64066
10.3k64066
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
That's because you can call a parent method, but not a parent instance member.
The reason for that is proper methods are saved to the prototype chain, whereas member functions are not.
class Foo {
foo() {
return `Successfully called Foo.foo()`;
}
bar = () => {
return `Successfully called Foo.bar()`;
}
}
console.log(
('foo' in Foo.prototype), // true (methods are correctly inherited)
('bar' in Foo.prototype), // false (instance properties are not inherited)
);
If the property is not in the property chain, an attempt to call it by using super will cause a runtime error.
class Bar extends Foo {
foo = () => {
return super.foo(); // Good: `foo` is in the prototype chain
}
bar = () => {
return super.bar(); // Runtime error: `bar` is not in the prototype chain
}
}
This makes it safe to go from a method to class instance property (here: foo), but not the other way around.
answered Jan 1 at 17:21
Karol MajewskiKarol Majewski
4,186215
add a comment |
The other way around is allowed by TypeScript. 👇🏻
class Foo {
foo() { }
}
class Bar extends Foo {
foo: () => void
constructor() {
super()
this.foo = () => { }
}
}
You could also prefix the method with an underscore and then bind it in the constructor. 👇🏻
class Foo {
foo: () => void
}
class Bar extends Foo {
constructor() {
super()
this.foo = this._foo.bind(this)
}
_foo() {}
}
It would be nice if TypeScript let you do the following:
class Foo {
foo: () => void
}
class Bar extends Foo {
constructor() {
super()
// TypeScript should see that the method is always bound.
this.foo = this.foo.bind(this)
}
foo() {}
}
answered Jan 1 at 16:37
aleclarsonaleclarson
10.3k64066
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53997107%2fallow-subclass-to-override-with-either-a-function-property-or-a-method%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
That's because you can call a parent method, but not a parent instance member.
The reason for that is proper methods are saved to the prototype chain, whereas member functions are not.
class Foo {
foo() {
return `Successfully called Foo.foo()`;
}
bar = () => {
return `Successfully called Foo.bar()`;
}
}
console.log(
('foo' in Foo.prototype), // true (methods are correctly inherited)
('bar' in Foo.prototype), // false (instance properties are not inherited)
);
If the property is not in the property chain, an attempt to call it by using super will cause a runtime error.
class Bar extends Foo {
foo = () => {
return super.foo(); // Good: `foo` is in the prototype chain
}
bar = () => {
return super.bar(); // Runtime error: `bar` is not in the prototype chain
}
}
This makes it safe to go from a method to class instance property (here: foo), but not the other way around.
answered Jan 1 at 17:21
Karol MajewskiKarol Majewski
4,186215
add a comment |
That's because you can call a parent method, but not a parent instance member.
The reason for that is proper methods are saved to the prototype chain, whereas member functions are not.
class Foo {
foo() {
return `Successfully called Foo.foo()`;
}
bar = () => {
return `Successfully called Foo.bar()`;
}
}
console.log(
('foo' in Foo.prototype), // true (methods are correctly inherited)
('bar' in Foo.prototype), // false (instance properties are not inherited)
);
If the property is not in the property chain, an attempt to call it by using super will cause a runtime error.
class Bar extends Foo {
foo = () => {
return super.foo(); // Good: `foo` is in the prototype chain
}
bar = () => {
return super.bar(); // Runtime error: `bar` is not in the prototype chain
}
}
This makes it safe to go from a method to class instance property (here: foo), but not the other way around.
answered Jan 1 at 17:21
Karol MajewskiKarol Majewski
4,186215
add a comment |
That's because you can call a parent method, but not a parent instance member.
The reason for that is proper methods are saved to the prototype chain, whereas member functions are not.
class Foo {
foo() {
return `Successfully called Foo.foo()`;
}
bar = () => {
return `Successfully called Foo.bar()`;
}
}
console.log(
('foo' in Foo.prototype), // true (methods are correctly inherited)
('bar' in Foo.prototype), // false (instance properties are not inherited)
);
If the property is not in the property chain, an attempt to call it by using super will cause a runtime error.
class Bar extends Foo {
foo = () => {
return super.foo(); // Good: `foo` is in the prototype chain
}
bar = () => {
return super.bar(); // Runtime error: `bar` is not in the prototype chain
}
}
This makes it safe to go from a method to class instance property (here: foo), but not the other way around.
answered Jan 1 at 17:21
Karol MajewskiKarol Majewski
4,186215
That's because you can call a parent method, but not a parent instance member.
The reason for that is proper methods are saved to the prototype chain, whereas member functions are not.
class Foo {
foo() {
return `Successfully called Foo.foo()`;
}
bar = () => {
return `Successfully called Foo.bar()`;
}
}
console.log(
('foo' in Foo.prototype), // true (methods are correctly inherited)
('bar' in Foo.prototype), // false (instance properties are not inherited)
);
If the property is not in the property chain, an attempt to call it by using super will cause a runtime error.
class Bar extends Foo {
foo = () => {
return super.foo(); // Good: `foo` is in the prototype chain
}
bar = () => {
return super.bar(); // Runtime error: `bar` is not in the prototype chain
}
}
This makes it safe to go from a method to class instance property (here: foo), but not the other way around.
answered Jan 1 at 17:21
Karol MajewskiKarol Majewski
4,186215
edited Jan 1 at 17:39
answered Jan 1 at 17:21
Karol MajewskiKarol Majewski
4,186215
answered Jan 1 at 17:21
Karol MajewskiKarol Majewski
4,186215
answered Jan 1 at 17:21
Karol MajewskiKarol Majewski
4,186215
4,186215
add a comment |
add a comment |
The other way around is allowed by TypeScript. 👇🏻
class Foo {
foo() { }
}
class Bar extends Foo {
foo: () => void
constructor() {
super()
this.foo = () => { }
}
}
You could also prefix the method with an underscore and then bind it in the constructor. 👇🏻
class Foo {
foo: () => void
}
class Bar extends Foo {
constructor() {
super()
this.foo = this._foo.bind(this)
}
_foo() {}
}
It would be nice if TypeScript let you do the following:
class Foo {
foo: () => void
}
class Bar extends Foo {
constructor() {
super()
// TypeScript should see that the method is always bound.
this.foo = this.foo.bind(this)
}
foo() {}
}
answered Jan 1 at 16:37
aleclarsonaleclarson
10.3k64066
add a comment |
The other way around is allowed by TypeScript. 👇🏻
class Foo {
foo() { }
}
class Bar extends Foo {
foo: () => void
constructor() {
super()
this.foo = () => { }
}
}
You could also prefix the method with an underscore and then bind it in the constructor. 👇🏻
class Foo {
foo: () => void
}
class Bar extends Foo {
constructor() {
super()
this.foo = this._foo.bind(this)
}
_foo() {}
}
It would be nice if TypeScript let you do the following:
class Foo {
foo: () => void
}
class Bar extends Foo {
constructor() {
super()
// TypeScript should see that the method is always bound.
this.foo = this.foo.bind(this)
}
foo() {}
}
answered Jan 1 at 16:37
aleclarsonaleclarson
10.3k64066
add a comment |
The other way around is allowed by TypeScript. 👇🏻
class Foo {
foo() { }
}
class Bar extends Foo {
foo: () => void
constructor() {
super()
this.foo = () => { }
}
}
You could also prefix the method with an underscore and then bind it in the constructor. 👇🏻
class Foo {
foo: () => void
}
class Bar extends Foo {
constructor() {
super()
this.foo = this._foo.bind(this)
}
_foo() {}
}
It would be nice if TypeScript let you do the following:
class Foo {
foo: () => void
}
class Bar extends Foo {
constructor() {
super()
// TypeScript should see that the method is always bound.
this.foo = this.foo.bind(this)
}
foo() {}
}
answered Jan 1 at 16:37
aleclarsonaleclarson
10.3k64066
The other way around is allowed by TypeScript. 👇🏻
class Foo {
foo() { }
}
class Bar extends Foo {
foo: () => void
constructor() {
super()
this.foo = () => { }
}
}
You could also prefix the method with an underscore and then bind it in the constructor. 👇🏻
class Foo {
foo: () => void
}
class Bar extends Foo {
constructor() {
super()
this.foo = this._foo.bind(this)
}
_foo() {}
}
It would be nice if TypeScript let you do the following:
class Foo {
foo: () => void
}
class Bar extends Foo {
constructor() {
super()
// TypeScript should see that the method is always bound.
this.foo = this.foo.bind(this)
}
foo() {}
}
answered Jan 1 at 16:37
aleclarsonaleclarson
10.3k64066
answered Jan 1 at 16:37
aleclarsonaleclarson
10.3k64066
answered Jan 1 at 16:37
aleclarsonaleclarson
10.3k64066
answered Jan 1 at 16:37
aleclarsonaleclarson
10.3k64066
10.3k64066
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53997107%2fallow-subclass-to-override-with-either-a-function-property-or-a-method%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
