Fun with advanced TypeScript

so so i'm always look on the hunt  for how to make uh my static analysis   stricter and in 4.1 there's a new option  which gives me the opportunity to make things   even more strict but it's quite a challenging  rule so let me show you so let me start and   write an array so let's say one two three four  five so far so good and then i can do b equals   a at index zero right maybe  i do so what is the type of b so the type of b should be number i guess  yes perfect or let me just disable the slint   yes first talk about how how strict  everything is then disable it can i actually   and i think it's like yes disable but then i have  and then then i have a rule to disable yes so it's   getting pretty oh but now you can use a quick fix  and like yes ignore that's perfect wow and yeah   speaking of making everything strict here we are  no because i only want to show typescript things   so you're right b's of type number so now there  is a new option to check the indexes of a and that   option is called no unchecked indexed access wow  so now if i set it to true what's the type of b is it is it one what that's a good point actually no no no no  it's not one i i've heard something like this   is also like possible if you put if you use like  the ass const key um keyword yes um but okay it's   still number i guess so a is not of type uh one  two three four five no it's of type number array   number oh i figured it out so now it's number  or undefined exactly because maybe it could be   an empty array yes wow so now like you said we  can make it a tuple so right now it's typed as   a ray of number so we make it a tuple and so now it's typed as a  immutable one two three four five   um so now b is of type one and of course the  advantage of this rule is that if i do 10   and i get an error because 10 is  not a key of a wow that is so nice   that's super nice the problem is that you know  if you apply it to existing huge code bases   it relies so all the map filter radius they  don't know about topple and so we make a lot   of inferences about the code we're writing  which suddenly the compiler is not catching   so let me show you a couple of examples so  first of all here if i remove the as const   and so b is of tap undefined but you know  that uh b like for instance if i do one   you know that b shouldn't be undefined so one  way you can you can use the new la session   operator so this asserts that base of  type number so that's how you could   if you have this rule in number then you want to  try some legacy legacy code to work that's how   you could make it work i find it to be pretty  dirty but so if we go back to a topper now   but that's basically on the 4.1  announcement that's the technique   they say okay if you want to make it your  code work you can use a null type assertion   um so now if we do a map so the problem is that  the whole error infrastructure doesn't know about   topple so if you do map of  element index and i do b equals   let's say e at index of course here you  have the element but let's say i have b   right i have another array sometimes we match  right arrays together so i do c equals b at i   so what's the type of c i would hope  that it's um one two three four five   one more type of c oh yeah yeah uh even make  sense here it makes sense because i is of type   number and it's not of type key right it should be  of type 0 1 2 3 4. keys of b right so here if i do   i want to type so here it's not going to work  anyways so even if i overlap the type it's not   going to work because on the standard function  it's typed as number and not typed as key of of the tuple so this one  actually is typed properly   which is great i see so if the index could be  between 0 and four yes then typescript would   have enough information to assure that  whatever c is it is not undefined yes so   i love this stuff and by the way there is a  whole and i haven't uh digged into it yet but   there is a lot of community there is a community  that love uh loves digging into this advanced   and this is nothing for them it's like not even  advanced type script but then you see that people   they go pretty far on you know experimenting  with how far you can go with the type system   but so i was thinking let's say i have  my own map implementation and now i can   specify the type of i to not be number so first  i was like intuitively what would you write for i zero or one or two or three or four yes but  how do you get this value automatically because   you know for any intuitively i  don't know about you but i wrote   key off type of a or typo i think yeah  you can do that but here we get all these you see these uh and here we so we get number oh  so it's it's kind of messed up yeah and then it's   like it's not even it's like a string yes a string  of one yes it's kind of strange yeah very strange   um i mean which is correct right because here  you can access uh the indexes through the   string representation yeah right so i wrote  so here i don't think it's useful but uh   that was a lot of fun to do and here  i have to give a big shout out to   pierre antoine mills who taught me this  technique and is writing really great   articles about advanced typescript patterns i we  will link to it in the video description but so   based on his help i was able to write so we want  to write a generic chord but honestly that might   not even be the best practice but that was  a lot of fun to write so index off type of so we can create index of so do you know how to we would define the type but  no this is something that i yeah i'm just not good   enough i i know there was like like a typescript  puzzle site and it's like like 120 exercises to   um to improve your typescript skills and how you  write types and i was like doing number one and i   had no idea exactly so but i love it so yes you're  gonna love this one so we get um a type here right   which extends okay or some sort of topple okay  makes sense so the way you get all the keys   i love it we're going to use recursive types  and so if you have something recursive you   need to stop condition right so we're going  to add the so this is the type parameter   and the second generic is going to be the state of  our recursive type which we're going to pass along   and the stop condition so we're  going to increase an array in size   and once the size of the array of azure state  reaches the same size of the input tuple we're   going to stop and return the result and so here  we're going to do we're going to store a state   and so this default value is an  empty array so what we want to do is to increase for each iteration or each  recursive call we want to increase the state   by one and when the array size has reached the  size of t we return the result so actually let's   start with the stop condition so we can do  t length wow hang stands yeah that's pretty state length let me just make it oops um here we return the result so we return s  the state and if not we do a recursive call   so we pass t as parameter and then we increase  the array of side off by one so we pass   so you can just do plus one in typescript yes  so here i want zero one two three four five so   you can count in typescript like this wow and  how do you count how do i get 0 1 2 by doing   a state length because at the beginning it's  going to be 0. in the next index of recursive   call it's going to be 1 and so on so index length  and you pass the rest of the array like this   did i misspell length or how do i need to  do x stands here it's going to be numbers   so now index of type a so here we have an array  right so it returns an array of all indexes 0 1   2 3 4. we want the union type right so i do here  select our number of all the data types number   and here we get the proper type for index  and so c now is uh is indexed properly   it's not undefined anymore wow that's insane  i'm not saying that's the best practice for   to for doing this but that's a lot of fun to  build with like so if you would now say like c   equals b one i i plus one then it would once  again recognize that it could become undefined no way but here you could almost argue i know it's  that's correct because it could be six it could be   five so therefore it's uh wow that's so crazy  i had no idea you could do this with typescript   and i i want to investigate this  further because like you said   people are writing these crazy puzzles i feel  like i'm only scratching the surface with it and   i this is a hell of fun so i want to to go deeper  with this and another advanced uh type feature   i got to play with last week is type string  literals which we talked about a couple of weeks   ago so in this week's video we build a chess  game and so you have the chess bone notation   h2 a3 and so on and then we move the pieces  along the bottom so we have translation   like you know x y and so we want to be able  to go from x y values to chess notation and   so here you can do crazy things like i mean you  can type all the chess notations in types even   like the pcs and so on and have everything  strictly typed because you could do raw type type row is let's say a or b type call is let's say one or two and so then you  can do a function let's say two position and you   get uh sorry you get let's say position and you  can type it as ah you don't have the backtick on   the swiss keyboard oh no oh you do a backtick oh  no you have it actually so let me switch to the swiss key yes it's like shift and like yeah but then it's like it's weird so let me  see it does like america three back takes if   you press back and now you can do raw so  it's a concatenation of raw and column and now position is all the possible  combinations wow so nice it's pretty cool and   yeah it makes so much sense because  the chessboard has 64 fields yes so   i mean of course you're a noob if you write  a1 a2 a3 a4 so this is super knowledgeable   yeah and you have like even also with  the pieces instead of writing you know   black pawn black you have like color piece type  piece and then you and again here i think it's   only barely scratching the surface so um pretty  exciting stuff also i think i don't know what you   feel like but i think that it gives us a vision of  where typescript is going into the future because   i feel like now the topper support needs to go way  further so things like what we just tried to wrote   index of tuple we should be built in right  uh support for topple in map filter reviews   in the standard library i guess should or  maybe i'm misunderstanding the issue but i   feel like now that that's where it needs to  go forward i don't know but pretty exciting   absolutely and i feel like this type system that  you've just demonstrated or like the capabilities   of it are like so superior to other programming  languages if i if i thought about the types in   in go for example it's uh such a pain they don't  even have generics and it's really it's really not   you you reach the end of the capability so soon  but typescript wow it's like um it's a monster   to you yes uh to your point i was um always  you know i always go back to the beginning   of typescript where people were telling me um  yeah but because you have so much baggage and   you have to type the untyped world of javascript  you will never be as good as typed languages and   at the time i was like oh yeah you're right  actually that's a huge challenge and now to see   that exactly like you said they became better than  a lot of professional type systems it's like oh   i don't know crazy stuff and here this is only  scratching the surface i mean we see stuff online   that are much crazier advanced typescript patterns  and yeah maybe next week i'll show you a new one   i'm super excited cool i mean it just reminded  me that typescript it's not just like javascript   of types it's so much more i'm and i'm still  eating some but again here it might be because   i'm a beginner with advanced typescript  i'm eating some use cases which i cannot do   uh with these advanced type patterns you know i  was for instance i do interpolate path in redash   so here you pass the input range the output range  so you know that these tuples are equal right the   size of the tuple needs to be the same for input  engine right and then you pass path and you know   actually that paths are on a tuple of basic curves  yeah and here all these uh basic curves need to be   equal in size right they need to be a topper also  of the same size and so to have like nested topple   size thing and you know you need to do  to do it with generics because the size   can be dynamic for both input range output  range and the size i still didn't get it to   work i think there is a way it's just i'm not  advanced enough but then it gets pretty tricky   so still some use cases for which this option is  very difficult but then also some i enabled the   option and it really made my code better in some  places because then to fix the error i had to   think about the code and it really made it better  actually and it may also enable me to see some   weaknesses in some parts of the code so sometimes  can be an improvement sometimes can be very   challenging and sometimes maybe too difficult to  move a legacy code base to this this new option   but yeah absolutely i would definitely enable it  for a new project yes exactly that's the way to go   yeah i mean it's pretty common error that you  do not handle undefined as a case um and this   can help you fix a lot of bugs that lead to real  world crashes yeah today it will it almost makes   you want to be able to enable the rules only for  some like folders or subfolders of your project   is that something you can do in typescript i  don't think so um so there's like this typescript   references thing which um divides your project  into several subfolders and then like you can   build them dynamically and still import them  otherwise and you have multiple ts config files   um and i did it but would not recommend it so  much because then like the automatic import   in vs code seems to seems to break for some reason  unfortunately because that would be nice right if   you could uh add this option incrementally say oh  i'm writing these new components i want this rule   to be enabled but then i have this huge legacy  component there is no chance i don't know but yeah   yeah for i mean there will always be  new code written and if this is being   enabled we can more and more of the code that  just be right and that is on github will use   these options and be more strict than ever more  bug free than ever looking forward to that cool

Channel: William Candillon

Views: 54,019

Rating: 4.8543477 out of 5

Keywords: TypeScript

Id: nNse0r0aRT8

Length: 19min 52sec (1192 seconds)

Published: Fri Jan 29 2021