How to declare an interface above an angular component?

Question

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'.)

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 !

Answer 1

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;
}