Why is the extended interface in TS not accepted by the compiler?

Question

typescript

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
}

Logically, it should accept this object at the bottom because it corresponds to the Field that was extended by the InputField

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

But the compiler throws an error

Answer 1

The extension of interfaces (this is exactly an extension, not inheritance) works according to the AND principle , and in the formation of Record you expect the OR principle from it .
The types in TypeScript are subject to sufficiently strict mathematics, due to which it is able to statically type the full power of the chaos of dynamic JavaScript.
If you do not take into account the ability of interfaces to merge , then the extension of interfaces can be considered sugar over the operation & over types, that is:

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
}

similar to this:

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
}

And the logic you expect can be obtained using the operation | in the following way:

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'
        },
});

PS For one report on TypeScript, I prepared this example:
https://gist.github.com/bingo347/00652993abf31702c...
If you understand how it works, you will know most of the Zen of TypeScript