Как правильно назначить интерфейс свойствам следующих объектов? - PullRequest
0 голосов
/ 09 февраля 2020

Я новичок в TypeScript, и мне не удалось назначить интерфейс.

У меня есть такой массив:

const data = [{ size: 1, count: 3, normal: 'one' }, { ... }]

, который я передаю функции, поэтому я может отображать данные в представлении HTML. Я создал интерфейс для объектов, чтобы убедиться, что свойства имеют правильный тип:

function getWebviewContent(data: object[]) {
    interface Properties {
        normal: string
        count: number
    }

    return `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cat Coding</title>
</head>
<body>
    <ul>
    ${data.map((item: Properties) => `
        <li>${item.normal} ${item.count}</li>
    `).join('')}
    <ul>
</body>
</html>`
}

Однако TypeScript / TSLint выдает эту ошибку:

Argument of type '(item: Properties) => string' is not assignable to parameter of type '(value: object, index: number, array: object[]) => string'.
  Types of parameters 'item' and 'value' are incompatible.
    Type '{}' is missing the following properties from type 'Properties': normal, count

Почему это так и как это исправить?

1 Ответ

1 голос
/ 10 февраля 2020

В первой строке вы определяете data для типа object[], который позволяет данным быть массивом объектов без каких-либо ограничений. Но функция, которую вы затем предоставляете data.map, может работать только с объектами, имеющими свойства normal и count. Но data.map из-за типа data ожидает функцию, которая может работать со всеми объектами. Чтобы решить эту проблему, вы должны переместить определение интерфейса перед вашей функцией getWebviewContent и изменить тип параметра этой функции на Properties[], чтобы обеспечить передачу только правильно введенных данных.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...