反應 - Typescript 默認值在 class 構造函數錯誤

Question

我像這樣制作了 Class：非常簡單。 我有一個構造器，有一個值：必須通過的 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;
    }
   }

我想像這樣制作一個新組件 REACT：

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

您應該能夠向您的 state 應用interface或type ，而不是 class 實例。

首先，定義一個interface ：

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

創建 object state：

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

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

Answer 2

這是您可以做的一個技巧，以便僅使用一些字段初始化 Player object：

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