Как заставить typescript поверить, что в объекте есть свойство?

Question

[Антон Антон]

Перевожу прооект на typescript, параллельно разбираясь с этим самым typescript'ом
Есть вот такой кусок кода:

export async function create (path: string, data: object) {
  return (await api.post(`${path}`, data)).data.data
}

export async function update (path: string, data: { id: number | string }) {
  return (await api.put(`${path}/${data.id}`, data)).data.data
}

export async function upsert (path: string, data: { id?: number | string }) {
  if (Object.hasOwn(data, 'id')) { // тут пробовал разные проверки наличия свойства у объекта
    return await update(path, { ...data, id: data.id ?? '' }) // но никакая проверка не помогает, пришлось подставить костыль
  } else {
    return await create(path, data)
  }
}

как заставить поверить typescript что свойство есть, чтобы убрать костыль и передавать просто data?

Comments

[WbICHA]

как заставить поверить typescript что свойство есть

Так он и не спорит, что оно есть, просто ты делаешь не ту проверку.

if (typeof data.id !== undefined) {

[Антон Антон]

WbICHA, без кавычек не дает:

с кавычками как и было - не верит:

[WbICHA]

Антон Антон, сори, я на солнышке перегрелся, похоже. Какой ещё тайпоф?

if (data.id !== undefined) {
    return update(path, { id: data.id, ...data })

Это проверка проверяет само свойство и его тип перестаёт быть андефайнд, но этот костыльчик необходим, потому что типизация не совсем правильная.
По факту тебе надо юнион здесь и тогда тс поймёт, что дата может быть только одного типа после проверки.

export async function upsert(
  path: string,
  data: { id?: never } | { id: number | string }
) {
  if (data.id !== undefined) {
    return update(path, data)
  } else {
    return create(path, data)
  }
}

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

interface SomeDataCreate {
  name: string
}

interface SomeDataUpdate {
  id: number | string
  name: string
}

export async function upsert(
  path: string,
  data: SomeDataCreate | SomeDataUpdate
) {
  if ("id" in data) {
    return update(path, data)
  } else {
    return create(path, data)
  }
}

[Антон Антон]

WbICHA, вот это тоже вариант, спасибо! напиши ответом, отмечу решением

type NewData = {
  id: never,
  [propName: string]: unknown
}
type CreatedData = {
  id: number | string
  [propName: string]: unknown
}

export async function create (path: string, data: NewData) {
  return (await api.post(`${path}`, data)).data.data
}

export async function update (path: string, data: CreatedData) {
  return (await api.put(`${path}/${data.id}`, data)).data.data
}

export async function upsert (path: string, data: NewData | CreatedData) {
  if ("id" in data) {
    return await update(path, data)
  } else {
    return await create(path, data)
  }
}

при этом без id: never не работает, ругается на update, причем с очень странной формулировкой:


а если применять другие проверки (не in, а, вроде, любые, даже всякие Object.hasOwn) с never, то ругается уже на другое:

[WbICHA]

Антон Антон, id: never сделай опциональным, иначе объект этого типа не создашь и не передашь.
А ругается потому, что без id: never у тебя этот самый проп ид подпадает под [propName: string]: unknown, то есть тоже самое, что: id?: unknown

[Антон Антон]

WbICHA, но все равно проверка с 'in' не совсем походит, потому что в моем случае там может быть Null или undefined, и для таких случаев должен вызываться create, а добавление доп проверок все равно приводит к всякой ругани. в итоге тип получился такой:

type NewData = {
  id?: null|undefined,
  [propName: string]: unknown
}

и проверка с typeguard как в текущем ответе

[WbICHA]

Антон Антон, если нужна проверка именно на нулл и андефайнд, то да, нужен тайпгуард. Но если ты уверен, что ид не может быть пустой строкой или нулём, то нет необходимости строго сравнивать:

interface SomeDataCreate {
  id?: null
  [key: string]: unknown
}

interface SomeDataUpdate {
  id: number | string
  [key: string]: unknown
}

export async function upsert(
  path: string,
  data: SomeDataCreate | SomeDataUpdate
) {
  if (data.id) {
    return update(path, data)
  } else {
    return create(path, data)
  }
}

Впрочем, ничего не мешает и напрямую проверить невалидные значения:
if (data.id && data.id !== "" && data.id !== 0) {

Answer 1

[modelair]

есть такая штука - typeguard. он сообщает ts'у, что этот объект определенного типа, который указан после is. вот простенький, дальше разберешься, думаю.

function isData(data: any): data is { id: number | string } {
  return data.id !== undefined
}

Comments

[Антон Антон]

Спасибо! Выглядит как костыль, но пусть будет так. И заинлайнить нельзя (

[modelair]

Антон Антон, не, это обычный guard, типичный инструмент. точно так же работает, к примеру, Array.isArray.
заинлайнить? а как ты хотел сделать

[Антон Антон]

modelair, if (Object.hasOwn(data, 'id'): data is { id: number | string })

[modelair]

Антон Антон,

export async function upsert (path: string, data: unknown) {
    return await (isData(data) ? update(path, data) : create(path, data))
}

всё ж просто.

[modelair]

Антон Антон, за true ts уже знает, что там полюбому есть поле id, а в create соответственно приходит unknown или какой там может быть еще, на твой выбор

[Антон Антон]

modelair, да не, я про то, чтобы не делать функцию isData отдельной функцией, а приписать data is { id: number | string } к условию в if.

[modelair]

Антон Антон, ну, всё таки ts он не в рантайме :) поэтому налегке так проверить нельзя. типов не существует в компилированном коде. typeguard дает тебе стопроцентную гарантию соответствия

[Антон Антон]

modelair, 10 лет пожеланию: https://github.com/Microsoft/TypeScript/issues/3744 ))

[modelair]

Антон Антон, я когда начинал изучать ts, у меня местами рвало пукан. данная ишью - фантазии неподготовленного узера)
вот че они хотели от

function drawGeometry(shape) {
    if(shape is Point2D) { ... }
    if(shape is Point3D) { ... }
    if(shape is Line) { ... }
}

таким образом никак не отличить один интерфейс от другого средствами javascript, здесь только функции. если делать это сахаром, то как понять, что именно сахар делает? куда идти-то.

[Антон Антон]

modelair, но я-то хочу то, что решается именно гвардами. просто заинлайненными. например с jsdoc/phpdoc можно написать комментарий: здесь мы считаем эту переменную такого типа. и все будет работать. Почему бы тут не сделать синтаксис для такого инлайна? типа

export async function upsert (path: string, data: Type1|Type2 ) {
  if ((data.id !== undefined): data is Type1) {
    return await update(path, data)
  } else (data is Type2) {
    return await create(path, data)
  }
}

[modelair]

Антон Антон, а ну, если так посмотреть, то это простой as. но as это небезопасно.
ты можешь сразу сделать let data = somedata as DataType и ts перестанет ругаться. но а так, по сути, при должной проверке это - то же самое. просто гарды надежней и удобней. гард расскажет всей области видимости, что data is {id: string}, а с as надо в каждом месте приводить или делать const _data: {id: string} = data as {id: string}. as редко используется в коде, оно не то что бы моветон, но нежелательно

export async function upsert (path: string, data: { id?: number | string } ) {
  if (data.id !== undefined) {
    return await update(path, data as { id: string } )
  } else {
    return await create(path, data)
  }
}

Answer 2

[WbICHA]

Тебе надо юнион здесь и тогда тс поймёт, что дата может быть только одного типа после проверки.

export async function upsert(
  path: string,
  data: { id?: never } | { id: number | string }
) {
  if (data.id !== undefined) {
    return update(path, data)
  } else {
    return create(path, data)
  }
}

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

interface SomeDataCreate {
  name: string
}

interface SomeDataUpdate {
  id: number | string
  name: string
}

export async function upsert(
  path: string,
  data: SomeDataCreate | SomeDataUpdate
) {
  if ("id" in data) {
    return update(path, data)
  } else {
    return create(path, data)
  }
}

Comments

[Антон Антон]

отметил решением так как способ неплох, хоть и не совсем подходит в моем случае (см комментарии к вопросу)