Question

我使用角度5（TS）构建应用程序，我试图启动我的界面的空对象时遇到困难。
所以我见过的唯一可接受的解决方案就是这个：

article: Article = {} as Article;

虽然它似乎合法但它不起作用; 尝试使用文章[＆＃34;某些东西＆＃34;]会失败，因为它只是一个没有任何键的空对象。

求得的结果看起来像这样：

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

在init之后：

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

Answer 1

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

你应该创建一种创建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' });

Answer 2

如果要初始化没有属性的对象，则必须声明它没有属性才有效。属性也必须是可选的：

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

如果没有，你必须按照你提到的那样初始化对象

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

Answer 3

Interfeces（和一般类型）只是一个编译时构造，以帮助编译器验证我们的代码，因此你使用的类型断言（{} 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 {
        ....
    }

}

Answer 4

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

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

let article = new Article()时，它已经拥有默认值

的属性

Answer 5

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

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

TypeScript启动空接口对象

5 个答案: