TypeScript 启动一个空的接口对象答案

【问题标题】：TypeScript initiate an empty interface objectTypeScript 启动一个空的接口对象
【发布时间】：2018-09-19 08:49:00
【问题描述】：

我正在使用 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: '[]' }

【问题讨论】：

接口不是类；你需要定义一个实现Article接口的类（例如BlogPost），然后创建一个new BlogPost()。
它不需要是一个类。任何对象都可以实现该接口。

标签： javascript angular typescript

【解决方案1】：

接口（和一般类型）只是一个编译时构造，用于帮助编译器验证我们的代码，因此您使用的类型断言 ({} as Article) 只会告诉编译器空对象字面量具有那个形状。如果您想为界面创建一个“空”对象，则必须自己创建它：

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

function emptyArticle(): Article {
    return {
        slug: '',
        title: '',
        description: '',
        body: '',
        tagList: []
    }

}

好消息是，如果您忘记为任何必填字段添加默认值，编译器会警告您。

或者，如果您想确保还指定可选字段，您可以创建一个映射类型，从字段中删除可选字段。

type Mandatory<T> = { [P in keyof T]-?: T[P] };
function emptyArticle(): Mandatory<Article> {
    return {
        ....
    }

}

【讨论】：

类型断言的很好解释。值得注意的是，这种删除? 修饰符的方法只能在typescript 2.8（当前最新）之前使用。
@JeffreyWesterkamp 没错，在 2.8 之前也可以选择：stackoverflow.com/questions/49655419/… 10x 赞成票 :)

【解决方案2】：

这是另一种初始化方式。为我工作：

const article: Article = ({} as any) as Article;

【讨论】：

【解决方案3】：

接口不为实际对象定义初始值，而是定义对象必须满足的要求才能成为该接口的实现。

您应该创建某种类型的工厂来创建Article 类型的对象，这可以像这个函数一样简单：

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

您还可以创建一个函数，该函数接受 Partial<Article> 的对象 - 作为 described here。这使您能够将初始值的子集传递给函数。这个例子使用了上面定义的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' });

【讨论】：

【解决方案4】：

或者更简单地将Interface 替换为Class，方法是设置默认值，例如：

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

当let article = new Article() 时，它已经拥有具有默认值的属性

【讨论】：

谢谢，虽然我可以通过接口来实现它。

【解决方案5】：

当你想初始化一个没有属性的对象时，必须声明它在没有属性的情况下是有效的。属性也必须是可选的：

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

如果不需要，您必须像前面提到的那样初始化对象

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

【讨论】：