Почему расширеный интерфейс в TS не принимается компилятором?

Question

[Максим Золотой]

interface Field {
  value: any,
  validation?: FieldValidation
}

interface InputField extends Field {
  value: string,
  placeholder: string,
  textarea?: boolean,
  maxChars?: number,
  type?: 'text' | 'email' | 'password' | 'tel' | 'url',
  dark?: boolean,
  disabled?: boolean,
  onInput?: () => any,
  onKeyDown?: () => any,
  onFocus?: () => any,
  onBlur?: () => any
}

По логике он дожен внизу принимать этот объект потому что он соответствует Field который был расширен InputField

const fields = ref<Record<string, Field>>({
        name: {
          value: '1',
          placeholder: '123'
        },
});

Но компилятор выдает ошибку

Comments

[Василий Банников]

В вашем коде нет смысла, тк из-за типов всё равно никто не сможет прочитать поле placeholder у объекта

Answer 1

[Дмитрий Беляев]

Расширение интерфейсов (это именно расширение, а не наследование) работает по принципу И, а в формировании Record Вы от него ожидаете принципа ИЛИ.
Типы в TypeScript подчиняются достаточно строгой математике, за счет которой он способен статически типизировать всю мощь хаоса динамического JavaScript.
Если не брать в расчет способность интерфейсов к слиянию, то расширение интерфейсов можно считать сахаром над операцией & над типами, то есть это:

interface Field {
  value: any,
  validation?: FieldValidation
}

interface InputField extends Field {
  value: string,
  placeholder: string,
  textarea?: boolean,
  maxChars?: number,
  type?: 'text' | 'email' | 'password' | 'tel' | 'url',
  dark?: boolean,
  disabled?: boolean,
  onInput?: () => any,
  onKeyDown?: () => any,
  onFocus?: () => any,
  onBlur?: () => any
}

аналогично этому:

interface Field {
  value: any,
  validation?: FieldValidation
}

type InputField = Field & {
  value: string,
  placeholder: string,
  textarea?: boolean,
  maxChars?: number,
  type?: 'text' | 'email' | 'password' | 'tel' | 'url',
  dark?: boolean,
  disabled?: boolean,
  onInput?: () => any,
  onKeyDown?: () => any,
  onFocus?: () => any,
  onBlur?: () => any
}

А ожидаемую Вами логику можно получить c помощью операции | следующим образом:

interface BaseField {
  value: any,
  validation?: FieldValidation
}

interface InputField extends BaseField {
  value: string,
  placeholder: string,
  textarea?: boolean,
  maxChars?: number,
  type?: 'text' | 'email' | 'password' | 'tel' | 'url',
  dark?: boolean,
  disabled?: boolean,
  onInput?: () => any,
  onKeyDown?: () => any,
  onFocus?: () => any,
  onBlur?: () => any
}

interface SelectField extends BaseField {
  options: string[],
  value: string,
  placeholder: string,
  dark?: boolean,
  disabled?: boolean,
  onSelect?: () => any,
  onKeyDown?: () => any,
  onFocus?: () => any,
  onBlur?: () => any
}

type Field = InputField | SelectField;
const fields = ref<Record<string, Field>>({
        name: {
          value: '1',
          placeholder: '123'
        },
});

P.S. Для одного доклада по TypeScript готовил такой пример:
https://gist.github.com/bingo347/00652993abf31702c...
Если поймете, как оно работает, то познаете большую часть дзена TypeScript

Comments

[Максим Золотой]

Спасибо, хороший ответ. Буду смотреть ваш пример )

[Дмитрий Беляев]

Максим Золотой, посмотрите еще вот этот раздел хандбука: https://www.typescriptlang.org/docs/handbook/union...
Это очень помогает в извлечении отдельного типа из юниона (результата ИЛИ)

Answer 2

[Алексей Ярков]

Может вы хотели написать так?
Record<string, InputField>

Comments

[Максим Золотой]

Нет, я хотел именно Input
потому что потом разных полей будет много, но все они будут наследоваться от Input
и я хочу просто проверять Input ли туда передается или нет.

Пока сделал так - работает но помоему это не очень правильно.

interface Field {
  value: any,
  validation?: FieldValidation,
  [index: string]: any,
}

[Алексей Ярков]

Максим Золотой, в смысле неправильно? Вы смотрите что сами пишете? В интерфейсе Field нет поля placeholder, о чём вам TS и сказал. А вот в InputField есть. Поэтому я и спросил.

[Максим Золотой]

Я думал расширение интерфейсов тут работают по типу наследования классов в PHP.

типа если у меня есть классы Cat и Dog которые наследуется от Animal то
я могу потом проверять везде является ли эта переменная инстансом от Animal а не проверять
это инстанс от Cat или Dog и тд

[Алексей Ярков]

Максим Золотой, ну так вы в другую сторону расширяете )) Вы InputField наследуете от Field, а не наоборот.
Вам как-то так надо:

interface InputField {
  value: string,
  placeholder: string,
  textarea?: boolean,
  maxChars?: number,
  type?: 'text' | 'email' | 'password' | 'tel' | 'url',
  dark?: boolean,
  disabled?: boolean,
  onInput?: () => any,
  onKeyDown?: () => any,
  onFocus?: () => any,
  onBlur?: () => any
}

interface Field extends Omit<InputField, 'value'> {
  value: any,
  validation?: FieldValidation
}

[Максим Золотой]

Алексей Ярков, я просто не очень понимаю логику.
Есть общая сущность Field и от нее уже должны наследоваться более специфические поля формы.

Типа как Dog от Animal потому что собака это вид животного. А тут инпут это вид поля ввода формы.

[Алексей Ярков]

Максим Золотой,

Всё верно. Базовая сущность Field. От неё наследуется InputField.
Но вы по прежнему используете базовую Record<string, Field>, у которой нет свойства из наследуемой placeholder.
Теперь ясно?

[Максим Золотой]

Алексей Ярков, ясно) но не у каждого поля формы есть placeholder - зачем мне его вставлять в Field?
с такой логикой мне придется все поля из всех форм запихать в Field

[Алексей Ярков]

Максим Золотой, ну откуда же я знаю зачем? )) А зачем использовать интерфейс без свойства там, где свойство есть?

[Максим Золотой]

Алексей Ярков, странно, вот это работает корректно, хотя по сути это тоже самое что у меня

interface Shape {
        color: string;
      }
      
      interface Square extends Shape {
        sideLength: number;
      }
      
      interface Polygon extends Shape {
        edgesCount: number;
      }
      
      let square = {
        color: 'blue',
        sideLength: 10,
      };
      
      let poligon = {
        color: 'red',
        edgesCount: 3,
      };
      
      const test = (a: Shape) => {
        console.log(a);
      }
      
      test(square);
      test(poligon);

[Максим Золотой]

у Shape тут тоже нет полей edgesCount и sideLength
однако

[Алексей Ярков]

Максим Золотой, а теперь не используем переменные, а вставляем напрямую объекты:

test({
        color: 'blue',
        sideLength: 10,
      });
      test({
        color: 'red',
        edgesCount: 3,
      });

И удивляемся ))

[Максим Золотой]

Алексей Ярков, а почему так?

тогда вот так надо писать если без переменной?

const fields = ref<Record<string, Field>>({
        name: {
          value: '1',
          placeholder: '123'
        } as InputField,
});

[Алексей Ярков]

Максим Золотой,

а почему так?

Потому что это так работает.
Вы передаёте переменную, TS смотрит что есть все свойства, которые ожидаются в интерфейсе и молча хавает.
А когда передаёте объект, то TS смотрит и видит, что в объекте есть лишнее свойство, которого нет в интерфейсе и ругается.

[Алексей Ярков]

Максим Золотой,

тогда вот так надо писать если без переменной?

Я бы по рукам бил за такое )) Зачем вам TS, если вы его обмануть пытаетесь?
Надо приводить данные к нужному формату.

[Максим Золотой]

Алексей Ярков, понял, спасибо что помогли разобраться, я еще только изучаю TS как вы поняли )

[Алексей Ярков]

Максим Золотой, да все начинали )) Удачи!

[WbICHA]

Максим Золотой, добавлю:

const test = (a: Shape) => {
        console.log(a);
        console.log(a.sideLength); // error
        console.log(a.edgesCount); // error
      }
      
      test(square);
      test(poligon);