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

Posted 2023-03-13

【中文标题】React - 类构造函数错误中的 Typescript 默认值

【英文标题】：React - Typescript default value in class constructor error

【发布时间】：2021-06-06 18:57:01

【问题描述】：

我做了一个这样的类：非常简单。 我有一个构造器，有一个值：必须通过的 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:: 我疯了

我做错了什么？

非常感谢

【参考方案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); 

【讨论】：

感谢您的回答。但是我为什么要使用类的接口呢？无论我在州外实例化“玩家对象”，我仍然有这个错误。就像 TypeScript 不明白我的类定义有一个带有默认值的构造函数。如果我使用接口，我的类将变得无用，并且我的所有应用程序逻辑都会崩溃：/因为我使用此类定义从 REST API 接收数据

奇怪的是这没问题： const playerInitialized = new Player(id); const [player] = useState( playerInitialized );

【参考方案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")

【讨论】：

我试过了，效果很好。我必须以我不知道的方式学习。它是新的 ？为什么我的方法行不通？ （我正在关注 Udemy 的教程，这个人确实像我在这里展示的那样......它似乎在一些 TypeScript 更新之前有效？）

Partial<T> 是在 TS 2.1 更新 7/12/2016 devblogs.microsoft.com/typescript/announcing-typescript-2-1-2/… 中引入的，您可以关注 *** 上的类似案例：***.com/questions/14142071/…