Problem with creating an instance of a class in SPFX(TypeScript/React)

Question

I am facing a problem with creating an instance of a class in SPFX. I am not sure what I should put in as a parameter. The compiler complains on whatever I put as a parameter. Here is my code:

import { DefaultButton, values } from 'office-ui-fabric-react';
import * as React from 'react';
import { IReduxCounterProps } from '../components/IReduxCounterProps';
import Output from '../components/CounterOutput/Output';
import { ICounterState } from './ICounterState';

export default class Counter extends React.Component<IReduxCounterProps, ICounterState> {

    constructor(props: IReduxCounterProps) {
        super(props);
        this.state = {
            counter: 0
        }       
    }

    private counterOnIncrement() {
        console.log("Counter Increment");
        this.setState({ counter: this.state.counter + 1 });
        console.log(this.state.counter);        
    }

    private counterOnDecrement() {
        console.log("Counter Decrement");
        this.setState({ counter: this.state.counter - 1 });
    }
    
    public render() : React.ReactElement<IReduxCounterProps> {
        return(
            <div>
                <Output value={this.state.counter} description="test" />
                <DefaultButton text="Increment" onClick={() => this.counterOnIncrement()} />
                <DefaultButton text="Decrement" onClick={() => this.counterOnDecrement()} />
            </div>
        );
    }
}

const states = new Counter(1);
const test = new Counter("blavla");
const props = new Counter(props).state.counter;

IReduxCounterProps.ts:

export interface IReduxCounterProps {
  description: string;
  value: number;
}

ICounterState.ts:

export interface ICounterState {
    counter: number;
}

I am actually practicing some Redux on SPFx so what I am trying to do is access my state outside the Counter class in order to pass my state as a prop but the instance is requiring a parameter and complains on whatever I put as a parameter.

Here are my errors:

I would appreciate if someone could help me out with this issue. Thanks in advance.

Answer 1

The error message is quite clear, you can't assign a type 'number' or 'string' as 'IReduxCounterProps' on line 40 & 41. The type must be strictly according to the definition.

const c = new Counter({ description: `blavla`, value: 1 });

Whereas for line 42, you've declared a const 'props' to create an instance of class Counter with the same const 'props'.