Questions tagged [class-fields]
55 questions
215
votes
4 answers
How to use arrow functions (public class fields) as class methods?
I'm new to using ES6 classes with React, previously I've been binding my methods to the current object (show in first example), but does ES6 allow me to permanently bind a class function to a class instance with arrows? (Useful when passing as a…
Ben
- 5,283
- 9
- 35
- 44
114
votes
2 answers
What are the differences between the private keyword and private fields in TypeScript?
In TypeScript 3.8+, what are the differences between using the private keyword to mark a member private:
class PrivateKeywordClass {
private value = 1;
}
And using the # private fields proposed for JavaScript:
class PrivateFieldClass {
…
Matt Bierner
- 58,117
- 21
- 175
- 206
93
votes
6 answers
How do I make a "public static field" in an ES6 class?
I'm making a Javascript class and I'd like to have a public static field like in Java. This is the relevant code:
export default class Agent {
CIRCLE: 1,
SQUARE: 2,
...
This is the error I get:
line 2, col 11, Class properties must be…
aebabis
- 3,657
- 3
- 22
- 40
77
votes
7 answers
How do I configure ESLint to allow fat arrow class methods
ESLint is throwing a Parsing error: Unexpected token = error when I try to lint my Es6 classes. What configuration parameter am I missing to enable fat arrow class methods in eslint?
Sample class:
class App extends React.Component{
...
…
CodeOcelot
- 3,403
- 3
- 22
- 23
62
votes
5 answers
Correct use of arrow functions in React
I am using ReactJS with Babel and Webpack and using ES6 as well as the proposed class fields for arrow functions. I understand that arrow functions make things more efficient by not recreating the functions each render similar to how binding in the…
kojow7
- 10,308
- 17
- 80
- 135
43
votes
4 answers
Eslint does not allow static class properties
I'm current developing an API on Node 12.14.1 and using Eslint to help me write the code.
Unfortunately it does not allow me to set static class properties as shown below:
class AuthManager {
static PROP = 'value'
}
The following error is given:…
Lucas Fabre
- 1,806
- 2
- 11
- 25
37
votes
4 answers
How to avoid bind or inline arrow functions inside render method
We should avoid method binding inside render because during re-rendering it will create the new methods instead of using the old one, that will affect the performance.
So for the scenarios like this:
Mayank Shukla
- 100,735
- 18
- 158
- 142
34
votes
3 answers
What is the difference between using constructor vs state = {} to declare state in react component?
I found there is two way to declare state in class component like below
class App extends Component {
constructor(props) {
super(props);
this.state = {
name: 'John'
}
}
render() {
return …
Dreams
- 8,288
- 10
- 45
- 71
28
votes
2 answers
What is the difference between class method vs. class field function vs. class field arrow function?
What is the difference between class method, class property which is a function, and class property which is an arrow function? Does the this keyword behave differently in the different variants of the method?
class Greeter {
constructor() {
…
Combine
- 3,894
- 2
- 27
- 30
28
votes
2 answers
Declare a class property outside of a class method
See how x and y are declared in constructor:
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
is there an way to declare properties outside of functions for…
Cisum Inas
- 11,552
- 11
- 40
- 55
26
votes
2 answers
Why are derived class property values not seen in the base class constructor?
I wrote some code:
class Base {
// Default value
myColor = 'blue';
constructor() {
console.log(this.myColor);
}
}
class Derived extends Base {
myColor = 'red';
}
// Prints "blue", expected "red"
const x = new…
Ryan Cavanaugh
- 209,514
- 56
- 272
- 235
24
votes
2 answers
unexpected token = for class properties in node 8.4
running the following code in node (v8.4)
class TodoStore {
todos = [];
get completedTodosCount() {
return this.todos.filter(
todo => todo.completed === true
).length;
}
report() {
if…
Elad Katz
- 7,483
- 5
- 35
- 66
23
votes
4 answers
Eslint - `Parsing error: unexpected token =` error for assigned fat arrow / property initializer
I'm using an arrow function and it's complaining about a parsing error:
Parsing Error: Unexpected token =
However my code is valid (please tell me if i'm mistaken). Additionally, i've set the .eslintrc settings to use es6 parsing:
.eslintrc
{
…
chrisjlee
- 21,691
- 27
- 82
- 112
22
votes
3 answers
ES6 Classes: Unexpected token in script?
I'm copying an example trying to learn ES6 but i'm getting a compile error:
Unexpected token (2:5)
It appears to be referring to the count = 0;
What am I doing wrong?
class Counter {
count = 0;
constructor() {
…
panthro
- 22,779
- 66
- 183
- 324
16
votes
2 answers
eslint Parsing error: Unexpected token =
Why is eslint throwing this error? The Javascript runs without issue inside of React Native. The code was taken from the react-navigation example at : https://reactnavigation.org/docs/intro/
Javascript:
static navigationOptions = { header: null…
Jeremy
- 555
- 2
- 4
- 10