Урок 4: Создание интерфейса¶

Этот урок демонстрирует, как создать интерфейс и включить его в компонент вашего приложения.

Затраты времени: ожидайте, что на выполнение этого урока вы потратите около 10 минут.

Перед началом¶

Этот урок начинается с кода из предыдущего урока, поэтому вы можете:

Использовать код, созданный в Уроке 3, в своей интегрированной среде разработки (IDE).
Начните с примера кода из предыдущего урока. Выберите из Урока 3, где вы можете:
- Использовать живой пример в StackBlitz, где интерфейс StackBlitz является вашей IDE.
- Использовать download пример и открыть его в вашей IDE.

Если вы не просмотрели введение, посетите Введение в Angular tutorial, чтобы убедиться, что у вас есть все необходимое для завершения этого урока.

Если у вас возникнут трудности во время этого урока, вы можете просмотреть готовый код для этого урока.

После завершения¶

Ваше приложение имеет новый интерфейс, который оно может использовать в качестве типа данных.
В вашем приложении есть экземпляр нового интерфейса с образцом данных.

Концептуальный обзор интерфейсов¶

Интерфейсы — это пользовательские типы данных для вашего приложения.

Angular использует TypeScript, чтобы воспользоваться преимуществами работы в сильно типизированной среде программирования. Сильная проверка типов снижает вероятность того, что один элемент вашего приложения отправит другому неправильно отформатированные данные.

Такие ошибки несоответствия типов отлавливаются компилятором TypeScript, и многие такие ошибки также могут быть отловлены в вашей IDE.

В этом уроке вы создадите интерфейс для определения свойств, представляющих данные о местоположении одного жилья.

Шаги урока¶

Выполните эти шаги над кодом приложения в вашей IDE.

Шаг 1 — Создайте новый интерфейс Angular¶

Этот шаг создает новый интерфейс в вашем приложении.

В панели Терминал вашей IDE:

В каталоге проекта перейдите в каталог first-app.
В директории first-app выполните эту команду для создания нового интерфейса.
1
ng generate interface housinglocation
Запустите ng serve, чтобы создать приложение и передать его по адресу http://localhost:4200.
В браузере откройте http://localhost:4200, чтобы увидеть ваше приложение.
Убедитесь, что приложение создается без ошибок.

Исправьте все ошибки, прежде чем переходить к следующему шагу.

Шаг 2 — Добавление свойств в новый интерфейс¶

Этот шаг добавляет свойства в интерфейс, которые необходимы вашему приложению для представления местоположения жилья.

В панели Терминал вашей IDE запустите команду ng serve, если она еще не запущена, чтобы создать приложение и передать его по адресу http://localhost:4200.
В панели Edit вашей IDE откройте файл src/app/housinglocation.ts.

В housinglocation.ts замените содержимое по умолчанию на следующий код, чтобы ваш новый интерфейс соответствовал этому примеру.

export interface HousingLocation {
    id: number;
    name: string;
    city: string;
    state: string;
    photo: string;
    availableUnits: number;
    wifi: boolean;
    laundry: boolean;
}

Сохраните изменения и убедитесь, что приложение не выдает никаких ошибок. Исправьте все ошибки, прежде чем переходить к следующему шагу.

На данном этапе вы определили интерфейс, который представляет данные о местоположении жилья, включая идентификатор, имя и информацию о местоположении.

Шаг 3 — Создание тестового дома для вашего приложения¶

У вас есть интерфейс, но вы еще не используете его.

На этом шаге вы создаете экземпляр интерфейса и присваиваете ему некоторые образцы данных. Вы еще не увидите, как эти данные появятся в вашем приложении.

Для этого нужно пройти еще несколько уроков.

В панели Terminal вашей IDE запустите команду ng serve, если она еще не запущена, чтобы создать приложение и обслужить ваше приложение по адресу http://localhost:4200.
В панели Edit вашей IDE откройте src/app/home/home.component.ts.
В src/app/home/home/home.component.ts добавьте этот оператор import после существующих операторов import, чтобы HomeComponent мог использовать новый интерфейс.
1
import { HousingLocation } from '../housinglocation';

В src/app/home/home/home.component.ts замените пустое определение export class HomeComponent {} на этот код, чтобы создать один экземпляр нового интерфейса в компоненте.

export class HomeComponent {
    readonly baseUrl =
        'https://angular.io/assets/images/tutorials/faa';

    housingLocation: HousingLocation = {
        id: 9999,
        name: 'Test Home',
        city: 'Test city',
        state: 'ST',
        photo: `${this.baseUrl}/example-house.jpg`,
        availableUnits: 99,
        wifi: true,
        laundry: false,
    };
}

Убедитесь, что ваш файл home.component.ts соответствует этому примеру.

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HousingLocationComponent } from '../housing-location/housing-location.component';
import { HousingLocation } from '../housinglocation';

@Component({
    selector: 'app-home',
    standalone: true,
    imports: [CommonModule, HousingLocationComponent],
    template: `
        <section>
            <form>
                <input
                    type="text"
                    placeholder="Filter by city"
                />
                <button class="primary" type="button">
                    Search
                </button>
            </form>
        </section>
        <section class="results">
            <app-housing-location></app-housing-location>
        </section>
    `,
    styleUrls: ['./home.component.css'],
})
export class HomeComponent {
    readonly baseUrl =
        'https://angular.io/assets/images/tutorials/faa';

    housingLocation: HousingLocation = {
        id: 9999,
        name: 'Test Home',
        city: 'Test city',
        state: 'ST',
        photo: `${this.baseUrl}/example-house.jpg`,
        availableUnits: 99,
        wifi: true,
        laundry: false,
    };
}

Добавив свойство housingLocation типа HousingLocation в класс HomeComponent, мы можем подтвердить, что данные соответствуют описанию интерфейса. Если данные не удовлетворяют описанию, IDE имеет достаточно информации, чтобы выдать нам полезные ошибки.

Сохраните изменения и подтвердите, что в приложении нет ошибок. Откройте браузер и убедитесь, что ваше приложение по-прежнему отображает сообщение "housing-location works!".
Исправьте все ошибки, прежде чем перейти к следующему шагу.

Обзор урока¶

В этом уроке вы создали интерфейс, который создал новый тип данных для вашего приложения. Этот новый тип данных позволяет вам указать, где требуются данные HousingLocation. Этот новый тип данных также позволяет вашей IDE и компилятору TypeScript гарантировать, что данные HousingLocation используются там, где это необходимо.

Если у вас возникли трудности с этим уроком, вы можете просмотреть готовый код для него.

Следующие шаги¶

Урок 5 — Добавление входного параметра в компонент

Дополнительная информация¶

Для получения дополнительной информации о темах, рассмотренных в этом уроке, посетите:

Ссылки¶

First Angular app lesson 4 — Creating an interface