So discriminated unions really really useful and not a very useful feature is typecasting typecasting
helps you tell typescript that some value is office specific type where typescript is not able to detect
it on its own but you as a developer know that it will be the case and a good example for days is if
we get access to something in the dorm let's say here we have a paragraph from the dorm only a paragraph.
Nothing else in there and it's an empty paragraph.
So obviously if we save that we don't see anything here on the screen.
Now we can get access to that paragraph from inside our script here cons para graph with document queries
selector P for example.
Now when we use queries selector and we pass in P as a selector so it's selecting by the p tag then
typescript is actually able to find out as you can see if I hover over it that this will be of type
paragraph element or now because maybe such element doesn't exist in the page but that's a different
thing.
Let's ignore the or null case for now.
The important thing is to typescript actually finds out that this is a paragraph element.
Notice changes if we select by something else.
Let's say an I.D. we named as here.
Message output.
So this paragraph has an idea of message output.
Now we as a developer of course know that we assign this I.D. to this paragraph but typescript doesn't
know that typescript does not dive into our HQ and files and analyze them.
So if we now select by that idea here for example with get element by I.D. then we see what types infers
is that this is just an H html element or null.
It doesn't know which specific aged him Al element that is now for a paragraph that might not matter
too much.
Maybe we just want to do things with it that we could do with any H.M. element for example access its
text content or anything like that but what if we had a input here.
What if we actually had an input type text and we want to get the value the user entered.
So I'll give it an idea of user input and now I select this in my typescript code.
So here I select by idea user input and it's no longer a paragraph but user input element.
Now we as a developer we know that here we reach out to this input element but as a said typescript
doesn't know that typescript doesn't read our age similar code.
So types God only knows that it's some H html element.
Now if I would want to set the value property off this deal for and I would try to do user input element
dot value equal high.
There you see that I actually get an error I get an error because for one does object as possibly no
we can fix this by adding an exclamation mark after this and I'll come back to this in a second but
even then I still get an error that value does not ex system type h him l element because this generic
type which basically any H to male element has as a type does not support properties that are specific
to well specific H HTML elements so we would need to tell typescript that actually what we select here
is not just not null but that it's also of type H HTML input element and that's what we can do with
typecasting.
Now there are two ways of type cost and as syntax taxes we can use and they are equivalent.
One is that we add something in front of the thing we want to convert or where we want to tell typescript
the type we add angle brackets opening and closing and then between these brackets the type of the thing
after the angle brackets.
In this case h him l input element and this type is globally available because of my t as conflict file
I am including the DOM lib with that typescript knows that whatever we select here after the angle brackets
will be of type H to male input element and therefore it doesn't complain anymore.
So this is where John in.
Let me copy that and comment it out and show you the alternative.
This works absolutely fine and you can use this.
Now if you know react however you know that there you also have such a angled bracket syntax inside
of JavaScript or typescript if you use that for react files where are you right J as X code in your
react components.
Now if you don't know react that might not tell you much.
Just be aware that a similar syntax exists in react projects and are the angle brackets are not used
to pass any information regarding the types you're using but instead they are parsed by some bill tools
and by react ultimately to know what you want to render on the screen.
So totally detached from typescript to not clash with that J is X syntax.
The typescript team provides an alternative to this angled bracket typecasting.
You can also add something after the thing you want to type cost.
So after this selection in this case and that thing is the as keyword.
And then here you again add the type to which you want to cost this.
So this now tells typescript that the expression in front of it.
In this case this expression here will yield a value of type HD him El input element and therefore again
we get no error.
So this is an alternative and you can use eval of the two soon taxes whatever you prefer.
You just should try to be consistent throughout your project then so that you don't alternate between
these two syntax but with that you can past is valuable extra information to TypeScript and make code
like this work even though typescript on its own would not be able to find out that this year yields
are aged male input element of course since you're forcing typescript to use this type it's your responsibility
as a developer to ensure that whatever does expression yields will be of that type.
Otherwise you might get a runtime error or unexpected behaviour at runtime if you try to interact with
that element in a way that actually is not supported so typecasting is a powerful feature.
So is this exclamation mark here.
I actually did X Florida's a little bit earlier in the course already.
This exclamation mark allows us to tell typescript that the expression in front of it will never yield
now and does this required for some expressions like this here when we select something from the dom
that might return null if we know as a developer that this will never return null.
Then we can use this exclamation mark otherwise and you'll learn that already.
I just want to reiterate on that otherwise if you're not sure that this will not return now you can
use a if check.
So you could check if user input element is true 3 and Alfred does not now and then use it in there.
Now I had to remove the typecasting in this case because if we do type cost here we also tell typescript
that this will not be null and since I'm not certain about that I can't cast here.
Instead I have to do that here when I use to value and therefore I want to do it before I access to
value property by adding as H2 l input elements like this.
Of course dad however would fail this is invalid syntax.
We would try to access a value property on a H2 Mel input element thing and this doesn't even make sense.
We simply have to wrap this expression into parentheses then to make sure that this is evaluated first
and then we try to access value on the result of this expression.
And now we have an alternative to using the exclamation mark.