javascript - TypeScript สร้างอ็อบเจ็กต์อินเทอร์เฟซว่าง

ฉันกำลังสร้างแอปโดยใช้ Angular 5 (TS) ฉันติดขัดในการพยายามสร้างวัตถุว่างของอินเทอร์เฟซของฉัน
ดังนั้นวิธีแก้ปัญหาเดียวที่ฉันเห็นว่ายอมรับได้คือวิธีนี้:

article: Article = {} as Article;

แม้มันดูเหมือนถูกต้อง แต่ก็ใช้งานไม่ได้; การพยายามใช้ article["something"] จะล้มเหลวเพราะมันเป็นเพียงออบเจกต์ว่างๆ ที่ไม่มี คีย์ ใดๆ

ผลลัพธ์ที่ฉันต้องการจะมีลักษณะประมาณนี้:

export interface Article {
slug: string;
title: string;
description: string;
body: string;
tagList: string[];

หลังจากเริ่มต้น:

article = { 'slug': '', 'title': '', 'description': '', body: '', tagList: '[]' }

คำตอบ #1

อินเทอร์เฟซไม่ได้กำหนดค่าตั้งต้นสำหรับวัตถุจริง แต่กำหนดข้อกำหนดที่วัตถุต้องเป็นไปตามเพื่อให้สามารถเป็นการใช้งานของอินเทอร์เฟซนั้นได้

คุณควรสร้างโรงงานชนิดใดชนิดหนึ่งที่สร้างวัตถุประเภท Article ซึ่งสามารถทำได้ง่ายๆ ด้วยฟังก์ชันนี้:

const emptyArticle = (): Article => ({
    slug: '',
    title: '',
    description: '',
    body: '',
    tagList: [],
});

คุณสามารถสร้างฟังก์ชันที่รับออบเจ็กต์ซึ่งเป็น Partial<Article> ได้เพิ่มเติม - ดังที่อธิบายไว้ที่นี่ ซึ่งจะช่วยให้คุณส่งชุดย่อยของค่าตั้งต้นไปยังฟังก์ชันได้ ตัวอย่างนี้ใช้ emptyArticle ที่กำหนดไว้ข้างต้น:

const createArticle = <T extends Partial<Article>>(initialValues: T): Article & T => {
    return Object.assign(emptyArticle(), initialValues);
};

// Initialize a new article with a certain slug:
createArticle({ slug: 'my-awesome-article' });

คำตอบ #2

หรืออย่างง่าย ๆ ให้แทนที่ Interface ด้วย Class โดยการตั้งค่าค่ามาตรฐานดังนี้:

export class Article {
   slug: string = '';
   title: string = '';
   description: string = '';
   body: string = '';
   tagList: string[] = [];
}

เมื่อ let article=new Article() มันจะมีคุณสมบัติพร้อมค่าดีฟอลต์อยู่แล้ว