Infer Typescript - MIKE CANN

so yes as I said my name's Mike can I'm a co-founder and lead developer of marked and talked about tight scripts so I've actually been doing tight script since 2012 so not not last year but but it's only fairly fairly recently that I've dived into some of the more deeper aspects of it so and I was blown away by some of the expressiveness of the language and I thought I would share some of that with you guys today so I don't really know what everybody's sort of level of typescript is or programming years here so I'm gonna try and start off very gently and then ease into some more interesting stuff later on and this is gonna be a live coding talk as well which I've never done before so recipe for disaster probably and to make it even more risky at the end if I have time I want to try it play play a game called infer the type so let's say let's give it a go all right Circe get straight into it all right so let's start simple and look at the ways that we can declare types in typescript so very similar to JavaScript really you've got violet and Const and they work in the same way as JavaScript so you can obviously reassign VARs and you can reassign let's but you can't reassign Const but one thing that Hostgator has that JavaScript doesn't have obviously is types so that means you can't reassign to a string a number and you can't reassign to a number an object for example pretty obvious and one of the powerful thing that typescript has is type inference which means we can actually get rid of these types here and everything still works and this is because typescript is looking at when you're assigning the to the variable it's assuming in this case oh it's a string and in this case it's a number and in this case you might think oh it's a boolean but it's not it's actually true and this is because typescript has seen that you're using Const which means it's never going to change so it's narrowed the type of potential things it could be down to just that the nub the case of true so if we change to false it would be literally false so this is kind of maybe a bit nuanced but it's actually kind of powerful and it's kind of spread throughout the whole system one use case where it might be for example say we wanted to express a binary number well we know a binary number can only be either 0 or 1 therefore when we assign 0 to it it works 1 to it it works if we if we try and sign something that's not 0 1 to it we get an error that's pretty cool but maybe you might not see that on quite often one one thing you might see often though is if we have a function whoops called listen I might have taken an event and we want to restrict the types of events it can take in so for example whoops click or hover for example when we then try and call it we can then see our K can only accept click or hover and if we try and pass something else into it then we get an error so that's pretty handy but there's a bit of a gotcha vs pose which is say we were to declare a variable here we say we say it's a click and we then try and actually call the function with that variable we actually get an error or as you might expect that to work if you hover over over we find out what the errors argument of type string is not a silent a parameter of type click or hover so what's going on here well type scripts because we've used let's type script his inferred that when we use assigning to it it's probably is because it's mutable we're probably going to want to change it in the future therefore has expanded that type out to a string so if we wanted to fix this we could explicitly type it as click and then that works or we could do what we did before we can set it as Const which then turns event into the literal type of click cool so let's see how this works or take a bit step further and see how it's work with objects so say we've got this function add user to dB it takes a user of type user and user has a name with a string and age with a number we can then declare a variable of type user named Mike maybe optimistically age 20 you can then call that function with the user as we'd expect but because types get to the type inference we can remove the type from the user and it still works and if we hover over user we can see the user is typed the literal object type of name age and string a number so this might be kind of odd if you come from like a c-sharp or Java background where you actually have to explicitly always type your variables before you use them typescript has got something called a structural subtype language which means that basically means that if it looks like a duck and quacks like a duck then it is a duck so every property has to match up with the properties that you give it so if we change this to be a different type say to a string then we get an error so it has to be exactly the same thing same same type but there's a bit of a gotcha here so it doesn't prevent you from adding extra properties to your object we don't get a compile error so this is because could be a bit of a problem like if for example this function add used to DB we aren't checking that there are extra properties on this object and then we're just throwing this object in the database well we've now got involved database so how can we get around this well one way we could put the type back on here well then we now get this here saying foo does not exist in type user but maybe what we want to do is we wanted to say like at the function level we want to say okay this is we want to except to use it but we don't accept any other like properties on the user it has to be exactly a user like how would we do that it turns out it's that's actually harder than it probably should be in type scripts and before I can explain that I have to sort of back up and show you some other stuff okay so there's another example so say we've got this function pick and given an object and some keys it's going to return another object with those just those keys on it so given this user with a name age and this function say when we call a pick with it with a name and age should return back just something that looks like this name name and age but obviously because we haven't typed anything yet or getting back is just object which is not very useful and worse than that we're also we can also call it with properties that don't actually exist on the object whereas we will be nice if we actually got an error here telling us you know this foo doesn't exist on this this object so you can't actually use it and even worse than that we can actually call it with something that's not even you know an array of strings so that's kind of problem so let's see well if we can you leverage some types type Script stuff to improve this so the first thing we could probably do is we could probably turn this into an array of strings and then so immediately we get an error here but what about this one well kind of what we want to do here is we want to say that this array here can only be the keys of this object but we don't know what the type of that object is here we need to relate them to each other somehow so what we can do that so we can parameterize this object so we can say okay this is going to be passed in it we're going to parameterize it to type T so now type so it's going to infer we're going to infer the type from our usage here and then we can use this really cool keyword called key of T and that basically does what it sounds like it iterates it lists all the keys of the given type T so now we get the error of foo says string is not a sample to name age or se because those are the keys on the type that we've given it cool so we've fixed those two but what about and what about returning the type of this rather than returning objects how can we return something that is just a subset of these properties on here well what we what we need is a new type so we want to be returning a new type so let's maybe let's put in here so we're going to pick T and then up here we can actually code it separately type pick T equals this so just for now we're going to return it back as an object and have a look at it ah so this is maybe not very useful for purposes because it's showing us the type alias itself and what we want to see is we want to see what it resolves to so there's a little trick you could do that you can save type resolved equals type of picked so now we can see what it actually resolves to so it resolves to a literal object which is what we expect so let's move on so let's work out what we want to do is we want to turn back a literal object where the keys are just these things so before we do that let's first let's let's return back a literal object with all the keys of T so we can do that by doing K in T and we're going to return back any actually its to return back sorry in key of T you can return back the actual we can look up on T with K we can look up the value of the key in this so when we will hover over it now we see we've got our object name string age number say and then the function but what we want to do is we want to be able to narrow it down so it's only the keys that we provide here rather than all the keys here we want to somehow just pass that into this here so we can do that by parameterizing again so if we turn on to a you there and you here it doesn't really matter what generic argument variable name you use but I'm just using you compressor in there another one in here and then we can stick it in here but now we get errors cake and our index T U is not assignable to this not very useful areas what's going wrong is that we haven't linked you to T in here anywhere so what we need to do is we need to put constraints on this U and we need to say that u extends he of T and then we need to do the same on this one extends key of T and now our few errors correctly and our resolve type is we get just the things that we so key off pretty powerful let's take it up a notch so now this functions similar but different so instead of the user supplying the list of keys what we want is the function itself to return to supply the keys and return only the functions that are on given object so say for example this user it's got name age SE and se2 what we wanted to do is we returned back a type that only has SE and se2 on it so if you hover over this pick type we can see it's returning back everything currently that's because when we're doing our pick we're supplying all the keys of T what we want to do is we want to somehow say okay instead of all the keys of T we just want the keys of T which are functions so let's try turning that into a type so let's just say function keys of T up here we can then define one function keys of T equals and then we can do the same sort of stuff we were doing before we're going to construct an object literal and we're going to say K in key of T and then we're going to look up on T what its value is but rather than just returning it this time we're going to do is condition what's known as conditional typing in here so we're going to say extent extends function and then we're doing we're going to conditionally check okay as if it extends function then we want to return back that key and if it doesn't extend function we want return back never and never is a special type in typescript it's like the very lowest thing when everything falls through it's like the lowest subset and so that means we can do something like this little trick in here sorry key of T so we're returning back this little type and then we are iterating over all the keys of T and what this will then do is if anything's never it's an invalid it can't possibly happen so it excludes it so that means this is only going to return back the keys of T so we hover over this now we now get just the function types which is what we want so those conditional types and it's in this really path allows you to like really have basically infinite for next built flexibility and the things you want to express but let's take it a step further and have a look at something else as well so this is very similar to the last one except this time rather than just returning back the function we also want to execute it as well so given this what we want to do is we want to return back all the things that are functions but we also want to return back just the return type of the function so in this case we want to return back say is string and say two is number so tell it what it currently is okay so it's the same as before say and say to what we want really is in our pick here rather than just returning back the value we somehow want to look up into that value and like interrogate it and say okay if your function I want to return back your return return arguments this is where we can have we can use our conditional stuff again and now we can use a new keyword called infer so we can want to infer the return type of that function when we return it otherwise let's return never and now let's have a look what we get now we get our say and I say - so infer is super powerful because you can use it all in place you can use it to work out what the arguments are of the given type for the function is you can use it for an array you can use it for generic parameters it gives you a lot lots of flexibility okay so I promise back in part one bit we can do the strict thing I might not go through the the actual how it's actually implemented but you can see it there and basically it takes advantage of the conditional types and the key of stuff that we just went through and so we can now actually detect if there are extra properties on that object before we pass it in and yes that's about for for everything I want to go through I just wanted to have like an actually have a good time a bonus thing yeah maybe okay I'm gonna go through it so I want to play this little game I haven't actually practiced this so hopefully this works basically I want to ask you guys to shout out say what you think the answer to these types is going to be so what do we think the T 0 is going to be I'll walk through the first one with you maybe it maybe we'll go through it together so it's infer test is being passed a boolean so if we look into it t extends this which is a funk is an array so no it's not that this one's a function no it's not that it's a promise no it's not that so it's going to turn back T so it's boolean and that's what it is so what do we think the next one T one's gonna be anybody just a string will say industry here is just string yeah what about the next one what we think in t2 number correct its number what about t3 number yeah getting rid of this what about t4 string string string array string array correct I bet you get at this what about this final one good luck with that one boolean any other guesses okay we're pooling is your final answer it is bullying well then all right for the bonus the bonus bonus is what about t6 the idea to infers hmm when you say string it is string and what about the final one tea 7 huh no one's gonna guess number never oh I see yeah it's stumped you final one is string or number it's the Union all right so that's that's it thank you everybody [Applause]

Channel: Fenders Perth

Views: 1,284

Keywords:

Id: OFKYo8lvS7E

Length: 18min 33sec (1113 seconds)

Published: Sun Jan 12 2020