reactjs - การตั้งค่า state เริ่มต้นด้วย array ที่มี type ว่างใน Typescript และ React

พูดว่าฉันมีโค้ดตัวอย่างดังต่อไปนี้:

interface State {
  alarms: Alarm[];
}
export default class Alarms extends React.Component<{}, State> {
  state = {
    alarms: []
  };

เนื่องจากฉันพยายามตั้งค่า alarms: [] Typescript ไม่ชอบมัน เพราะว่า [] != Alarm[] ฉันพบว่าฉันสามารถใช้ alarms: new Array<Alarm>() ซึ่งจะสร้างอาร์เรย์ที่มีประเภทแต่ละค่าเป็น Alarm ที่ว่างเปล่า แต่ฉันไม่ค่อยชอบไวยากรณ์นี้ - มีวิธีที่ง่ายกว่าหรือดีกว่านี้ไหม?

คำตอบ #1

ปัญหาคือเมื่อคุณสร้างฟิลด์ในคลาส คอมไพเลอร์จะกำหนดประเภทของฟิลด์นั้นตามความเหมาะสม (โดยใช้ประเภทที่ระบุไว้โดยตรงหรือประเภทที่คาดเดาจากนิพจน์การเริ่มต้น เช่นในกรณีของคุณ)

ถ้าคุณต้องการประกาศฟิลด์ใหม่ คุณควรกำหนดประเภทอย่างชัดเจน:

export default class Alarms extends React.Component<{}, State> {
    state: Readonly<State> = {
        alarms: []
    };
}

หรือกำหนดสถานะในตัวสร้าง:

export default class Alarms extends React.Component<{}, State> {
    constructor(p: {}) {
        super(p);
        this.state = {
            alarms: []
        };
    }
}

คุณยังสามารถแปลงอาร์เรย์เป็นชนิดที่คาดหวังได้ แต่ถ้ามีฟิลด์มากๆ จะดีกว่าถ้าให้คอมไพเลอร์ตรวจสอบออบเจ็กต์ลิทเทอรัลให้คุณ

คำตอบ #2

จะ

alarms: [] as Alarm[]

ทำงานสำหรับ Typescript และสำหรับคุณไหม?

ดูคำถามนี้เกี่ยวกับวิธีที่คุณสามารถแปลงอาเรย์ใน Typescript : การแปลงอาเรย์ใน TypeScript