React - 类构造函数错误中的 Typescript 默认值

Question

我做了一个这样的类：非常简单。 我有一个构造器，有一个值：必须通过的 ID 有一个参数，另一个是可选的。

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;
    }
   }

我想像这样制作一个新组件：

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">

自从我决定在我的项目中使用它以来，我失去了很多时间原因 TYPESCRIPT:: 我疯了

我做错了什么？

非常感谢

Answer 1

您应该能够向您的州申请 interface 或 type，而不是类实例。

首先，定义一个interface：

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

创建对象状态：

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

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

Answer 2

您可以使用以下技巧来初始化 Player 对象，只使用其中的一些字段：

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)

如果您还想创建一个带有其他字段的播放器：

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