Type Error in Vue: properties not correctly recognized within computedRefs?

[dckz74]

Hello everybody!

I am kinda stuck with a problem and I do not know if this is intended or if I am missing the simple solution.

Reproduction
Here is a reproduction of my case in the Vue SFC Playground.

The issue

As you can see I have an interface called Human with name and surname properties and an optional age property. While I get the correct error message for my humanWithHeight that says:

Object literal may only specify known properties, and height does not exist in type Human. ts(2353)

I do not get the same message for my computedHumanWithHeight. I really want to have that type safety for my computed values so that I cannot just add some random properties.

This leaves me with two questions:

1. Why does that happen?
2. Is there a better solution to guarantee that only known properties can be used in computedRefs?

Greatly appreciating your answers!

[hecticme]

I believe this is the intended behaviour of TypeScript. It's better that you take a look at -> https://github.com/Microsoft/TypeScript/wiki/FAQ#indirect-excess-properties-are-ok. The discussion is still ongoing so I'm not sure if it's gonna be changed in the future.

This is the type of the function you pass into computed():

export type ComputedGetter<T> = (oldValue?: T) => T;

Then take a look this TypeScript Playground. I wrote a similar function, you will see that excess properties does not yield an error, while missing property will still give a type error.

If you want to have an exact type checking, I think you will have to do this. But this is probably not what you want.

const computedhumanWithHeight = computed<Human>(() => {
  const value: Human = {
    ...human,
    height: 160
  }

  return value
})

[dckz74]

Thank you very much for your quick answer and the provided information!

Looking at the given issue it seems that a lot people would love to see something like this. Unfortunately, this already yielded an error in my project as the typo did not get recognized.

[hecticme]

Well I don't really know about your context, but if what you want to do is similar to the reproduction that you have provided, then I think ref() is more suitable, and it will throw error if you add invalid or excess properties to it.

See -> Vue Playground

If you elaborate more on your intention then I think we can come up with something, but I find it hard to understand the purpose of computedhumanWithHeight. If you add an abitrary property like height, shouldn't the interface not be Human anyway?

[dckz74]

Oh, you are right, my example is a little bit misleading. I indeed want a computed (readonly) value.

My intention was not to have a human with height, I just used it to illustrate the problem - not the best naming here.
My case is really similar to the example in the FAQ (e.g. you have a typo like aeg instead of age). Or let us pretend that somebody thinks that the property is not age but lifetimeInYears or numberOfYears - the person that uses the Human interface would then just assume that this is the correct property since there is no error.

I hope I could clarify my problem a little bit better!