React - Typescript default value in class constructor error

Question

i made a Class like this : It is very simple. i have a constructeur, with one value : ID which is must be pass has an argument, and the other are optionnal.

export default class Player {
    // 1. Typage des propiétés d'un participant à GF.
    id: number;
    name: string;
    picture: string;
    status: number;
    achievement: Array<number>;
    biography: string;
    pictures: Array<number>;
    created?: Date;
     
    // 2. Définition des valeurs par défaut des propriétés d'un Player.
    constructor(
     id: number,
     name: string = 'name',
     picture: string = 'http://...',
     status: number = 0,
     achievement:[0],
     biography:string = "",
     pictures:[0],
     created: Date = new Date()
    ) {
     // 3. Initialisation des propiétés d'un Player.
     this.id = id;
     this.name = name;
     this.picture = picture;
     this.status = status;
     this.achievement = achievement;
     this.biography = biography;
     this.pictures = pictures;
     this.created = created;
    }
   }

And i want to make a new component REACT like this :

import React, {FunctionComponent, useState} from 'react';
import PlayerForm from '../components/player/player-form';
import Player from '../models/player.class';

const PlayerAdd: FunctionComponent = () => {
    const [id] = useState<number>(new Date().getTime());

    const [player] = useState<Player>( new Player(id) ); 

    return (
        <div className="row">

        </div>
    )
 

}

D:/feodalapp/src/pages/player-add.tsx
TypeScript error in D:/feodalapp/src/pages/player-add.tsx(8,40):
Expected 7-8 arguments, but got 1.  TS2554

     6 |     const [id] = useState<number>(new Date().getTime());
     7 | 
  >  8 |     const [player] = useState<Player>( new Player(id) ); 
       |                                        ^
     9 | 
    10 |     return (
    11 |         <div className="row">

I lost many time cause of TYPESCRIPT since i decided to used it in my project :: I become crazy

What did i wrong ?

thank so much

mehowthe · Accepted Answer · 2021-03-08 21:58:24Z

0

Here's a trick that you can do, in order to initialise Player object with only some of the fields:

export default class Player {
  // 1. Typage des propiétés d'un participant à GF.
  id: number;
  name: string = "name";
  status: number = 0;
  achievement: Array<number> = [0];
  biography: string = "";
  pictures: Array<number> = [0];
  created: Date = new Date();

  // 2. Définition des valeurs par défaut des propriétés d'un Player.
  constructor(id: number, init?: Partial<Player>) {
    this.id = id;
    Object.assign(this, init);
  }
}

// you should be able to do this now:
const player = new Player(id)

If you would like to create a Player also with other fields:

const otherPlayer = new Player(new Date().getTime(), {name: "Bob"})

answered Mar 8, 2021 at 21:58

mehowthe

8517 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Baptiste Bauer Over a year ago

I tryed and it works. I have to study this way i didnt know. It is new ? why my way doesnt work? ( i am following a tutorial from Udemy, and the guy did like i shown here ... it seems worked before some TypeScript Update ? )

mehowthe Over a year ago

Partial<T> was introduced in TS 2.1 update 7/12/2016 devblogs.microsoft.com/typescript/announcing-typescript-2-1-2/…, here's also similar case on stackoverflow that you can follow: stackoverflow.com/questions/14142071/…

AdriSolid · Accepted Answer · 2021-03-08 21:42:12Z

0

You should be able to apply to your state an interface or type, not a class instance.

First, define an interface:

interface Player {
  id: number;
  name: string;
  picture: string;
  status: number;
  achievement: Array<number>;
  biography: string;
  pictures: Array<number>;
  created?: Date;
}

Create the object state:

const initialState = {
  // other props
  id: 1
} as Player;

const [player, setPlayer] = useState<Player>(initialState);

answered Mar 8, 2021 at 21:42

AdriSolid

2,8231 gold badge10 silver badges18 bronze badges

2 Comments

Baptiste Bauer Over a year ago

thank you for answered. But why should i use an interface indeed of class ? whatever i instantiate the "player objet" outside the state, i still have this error. It is like TypeScript dont understand that my class definition has a constructor with default values. If i use an interface , my class become useless, and all my app logical fall down :/ cause i use this class definition to receive data from REST API

Baptiste Bauer Over a year ago

Strangely this is OK : const playerInitialized = new Player(id); const [player] = useState<Player>( playerInitialized );

Collectives™ on Stack Overflow

React - Typescript default value in class constructor error

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related