Почему нет ошибки при присваивании массива из других интерфейсов?

Question

[lavezzi1]

Всем привет. Прошел курс для начинающих по TS и начал внедрять в проект Vue 3.

Есть функция REST API, которая вытаскивает данные вида: { meta, volumes }

export const getVolumes = (
  params: RequestMeta,
): Promise<{ meta: RequestMeta, volumes: Volume[] }> => request({
  url: '/volumes/',
  params,
});

Дальше на странице data выглядит так:

data() {
  return {
    volumes: [] as Array<Volume>,
  };
}

И вот тут самое интересное, тянем данные и кладем в ранее заданный массив:

methods: {
  fetchVolumes() {
    getVolumes().then((data) => {
        this.volumes = data.volumes;
    });
  }
}

Все работает замечательно, но! Если я заменю API функцию с getVolumes() на getSnapshots() и положу в this.volumes = data.snapshots, массив типов Snapshot, то никакой ошибки не будет. Почему так?

Comments

[lavezzi1]

Uneasy Hearts Weigh the Most, Спасибо, буду знать, но сути не изменилось, ошибок нет.

[Aetae]

lavezzi1, не слушай Uneasy Hearts Weigh the Most, он фигню говорит. Нормально там всё типизировалось. Тапскприпт прекрасно выводит типы, тем более когда указано явно.
Использование as лучше конечно минимизировать, но практических проблем с ним нет.

[lavezzi1]

Aetae, почему минимизировать?

[Aetae]

lavezzi1, в данном случае всё норм, но в целом кастование типов не рекомендуется, так как чревато ошибками.

interface Volume {
  id: number;
  volume?: string;
}
const foo = {} as Volume; // не ошибки
const foo:Volume = {}; // ошибка

[lavezzi1]

Aetae Спасибо! Еще вопрос, а если допустим у меня в data (vue) или в state (react) данные формы скажем:

data() {
  return {
    form: {
      select: null // после присваивания должен быть Volume
    }
  }
}

При присваивании вроде проблем нет, а вот когда форму надо почистить, то есть присвоить null пишет ошибку. Как грамотно сделать?

[Aetae]

lavezzi1, либо использовать foo?: bar; и чистить не с помощью null, а с помощью undefined, либо тип ставить явно foo: bar | null, либо установить параметр компилятора strictNullChecks: false(не рекомендую).

Кстати, с этим и изначально проблемы должны быть, не только при чистке, если вы не использовали as, о чём собсно и предупреждал постом выше.)

Answer 1

[Aetae]

В ts структурная типизация. Такое может происходить если Snapshot структурно укладывается в тип Volume.

Т.е. вот так типы взаимозаменяемы:

interface Volume {
 id: number;
 volume?: string;
}

interface Snapshot {
 id: number;
 snapshot?: string;
}

А так нет:

interface Volume {
 id: number;
 volume: string;
}

interface Snapshot {
 id: number;
 snapshot: string;
}

И так нет:

interface Volume {
 id?: number;
}

interface Snapshot {
 id?: string;
}