Как использовать интерфейс TypeScript?

Интерфейс — это схема объекта. Он указывает, какие свойства существуют, какие из них обязательны, а какие необязательны, и какой тип данных они хранят.

TypeScript стал популярнее, чем когда-либо. Для меня это не было любовью с первого взгляда, но теперь мы связаны. Я не начинаю ни одного проекта без TypeScript! 😅 Так что если вы испытываете те же чувства, вы не одиноки 🤗.

Большинство моделей в TypeScript представляют собой комбинацию интерфейсов и классов. интерфейс — это чертеж класса или объекта. В этом интерфейсе IPizza мы определяем все свойства, которыми обладает пицца. В каждом свойстве мы определяем, к какому типу данных относится информация.

Каждое свойство, определенное в интерфейсе, является обязательным. Если вы хотите сделать его необязательным, вы должны использовать ? . Например, propertyName?: string если мы определяем это свойство в интерфейсе, оно необязательно. TypeScript не выдаст ошибку, если свойство отсутствует в Object. С другой стороны, если свойство является обязательным, он выдаст ошибку, если оно отсутствует.

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

Пример

Мы все можем придумать свойства для пиццы.

• Название
• Кусочки (количество кусочков)
• Топпинги
• Цена
• Сырная корочка
• Веганский
• Вегетарианский

Давайте поместим их в интерфейс и определим, к какому типу данных они относятся.

interface IPizza {
    name: string;
    slices: number;
    toppings: string;
    price: number;
    cheescrust: boolean;
    vegan?: boolean;
    vegetarian?: boolean;
}

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

const pizza: IPizza {
    name: 'Pizza BBQ',
    slices: 6,
    toppings: 'Tomato sauce, BBQ sauce',
    price: 15,
    cheescrust: true
}

Теперь pizza соответствует интерфейсу. Интерфейс interface теперь является формой проверки данных. Если мы добавим свойства, которых нет в interface, или свойства с неправильными типами данных, TypeScript выдаст ошибки.

const pizza: IPizza {
    name: 'Pizza BBQ',
    slices: 6,
    toppings: ['Tomatosauce', 'BBQ sauce'],
    price: 15,
    cheescrust: true,
    meat: true
}

С этим объектом вы получите ошибки! 👇 (Проверьте это сами наCodeSandbox)

Множественные значения

Но что, если нам нужен массив строк или чисел, чтобы задать начинку или размер? Мы можем сделать это довольно быстро; напишите string[] или number[] в interface.

interface IPizza {
    name: string;
    slices: number;
    toppings: string[];
    price: number;
    cheescrust: boolean;
    sizes: number[];
    vegan?: boolean;
    vegetarian?: boolean;
}

Теперь наш объект pizza действителен.

const pizza: IPizza {
    name: 'Pizza BBQ',
    slices: 6,
    toppings: ['Tomatosauce', 'BBQ sauce'],
    price: 15,
    cheescrust: true,
    vegan: false,
    vegetarian: false,
    sizes: [0, 1, 2, 3, 4]
}

Если мы хотим ввести массив с несколькими объектами пиццы, мы можем сделать это тем же способом с помощью IPizza[].

const pizzaArray: IPizza[] = []

Условные значения

Иногда вы можете сказать, что свойство может быть string или null. В этих случаях мы используем символ «труба |», чтобы показать, что это и то, и другое.

// IPizza properties with an array of values.
interface IPizza {
    name: string;
    slices: number;
    toppings: string[];
    price: number;
    cheescrust: boolean | null;
    sizes: number[];
    vegan?: boolean;
    vegetarian?: boolean;
}

Например, для cheescrust он необязателен, но может быть булевым числом или null.

const pizza: IPizza {
    name: 'Pizza Tuna',
    slices: 8,
    toppings: ['Tomatosauce'],
    price: 11.99,
    cheescrust: null,
    vegan: false,
    vegetarian: false,
    sizes: [0, 1, 2, 3, 4]
}

Таким образом, в пицце «Тунец» мы говорим, что не хотим предлагать сырную корочку, поэтому задаем значение null.

Спасибо!

Надеюсь, прочитав эту статью, вы узнали что-то новое или вдохновились на создание чего-то нового! 🤗 Если это так, подпишитесь на рассылку по электронной почте (прокрутите верхнюю часть этой страницы) или следуйте за мной на Hashnode.

Знаете ли вы, что вы можете сами создать блог разработчика, подобный этому? Это совершенно бесплатно. 👍💰🎉🥳🔥

Если у вас остались вопросы или вы хотите что-то сказать в ответ, прокрутите страницу вниз и напишите мне сообщение. Пожалуйста, отправьте мне DM на Twitter @DevByRayRay, если вы хотите сохранить конфиденциальность. Мои DM всегда открыты 😁.