typescript 如何在角度组件上方声明接口?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/41550356/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 04:09:21  来源:igfitidea点击:

How to declare an interface above an angular component?

angularjstypescript

提问by Vivien Adnot

I have a component with a method that receives values from a form. I would like to describe the form data with an interface.

我有一个带有从表单接收值的方法的组件。我想用一个界面来描述表单数据。

However, at runtime (ng serve), the compiler tells me that the interface is unknown. (Public property 'friendshipFormModel' of exported class has or is using private name 'IFriendshipFormModel'.)

但是,在运行时(ng serve),编译器告诉我接口未知。( Public property 'friendshipFormModel' of exported class has or is using private name 'IFriendshipFormModel'.)

How can I declare the interfaces properly ? If possible, I would avoid to create a separate file only for this interface, as it belongs to the component.

如何正确声明接口?如果可能,我会避免仅为此接口创建单独的文件,因为它属于组件。

The file:

文件:

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import * as moment from 'moment';
import { FriendshipModel } from '../models/friendship.model';

interface IDatePickerDateModel {
    day: string;
    month: string;
    year: string;
    formatted: string;
    momentObj: moment.Moment;
}

interface IFriendshipFormModel {
    name: string;
    meetingDate?: IDatePickerDateModel;
}

@Component({
    selector: 'app-create-friendship',
    templateUrl: './create-friendship.component.html',
    styleUrls: ['./create-friendship.component.css']
})

export class CreateFriendshipComponent {
    @Output() friendshipCreated = new EventEmitter<FriendshipModel>();
    friendshipFormModel: IFriendshipFormModel;

    constructor() {
        this.friendshipFormModel = {
            name: '',
            meetingDate: null
        };
    }

    createFriendship() {
        const friendshipCreation: FriendshipModel = this.frienshipFactory(this.friendshipFormModel);
        this.friendshipCreated.emit(friendshipCreation);
    }
}

Thank you !

谢谢 !

回答by Radim K?hler

In this case, just export interfaces as well

在这种情况下,也只需导出接口

export interface IDatePickerDateModel {
    day: string;
    month: string;
    year: string;
    formatted: string;
    momentObj: moment.Moment;
}

export interface IFriendshipFormModel {
    name: string;
    meetingDate?: IDatePickerDateModel;
}