An Introduction to Typescript for Python Programmers

Key Takeaways

here's a piece of python code and here is that same code but written in typescript looks pretty similar doesn't it well typescript and python are both widely used versatile and Powerful but actually they couldn't be more different today I'm going to explore what you need to know about typescript as a python nista I'm going to look at the syntax the ecosystems and the overall philosophy of these two languages and how these intertwine yes that's a fancy word it's time we become a bit more more intellectual over here by the end you'll know a lot more about typescript when to choose it over Python and how it compares to languages like rust and go this video is sponsored by localize more about that later I'm going to start with the story my first encounter with typescript was in 2016 when I started a company to build a website platform for musicians the idea was to create some sort of mix of Wix or Squarespace with patreon where fans could support musicians with monthly payments now we made a ton of technical mistakes while building that product I still have some of the code and well it's pretty cringeworthy actually if you happen to follow my software architecture course then I actually show some of the code and the questionable architectural decision that I made at the time but at least one thing we absolutely got right was choosing typescript over plain JavaScript for both the front end and the back end typescript static typing make made managing our code so much easier especially as the project got more complex that experience is also why I'm always pushing for type hints in Python types save you so much hassle in the long run now python was launched in 1991 by G for rosom it was designed to be simple and readable almost like English and this also one of the reasons that python became so popular JavaScript and typescript as well as a very different story JavaScript was thrown together in just 10 days back in 199 5 to add quick scripts to websites like form validation nobody expected it to take over the world but now it Powers websites servers thanks to nodejs and even desktop apps like vs code early JavaScript was a total mess no real classes no modules endless browser compatibility headaches and by the 2010s it was clear that JavaScript wasn't scaling well for larger projects and that's where typescript comes in it was launched in 2012 by Microsoft with static typing and much better tooling than JavaScript and with the release of vs code in 2015 typescript became the go-to choice for many developers including me if you Ed to python coding in typescript can feel a bit strange for example python uses ination for scope while typescript uses braces and semicolons actually if you watch some of my early videos you'll even catch me mistakenly adding semicolons to python code the horror now when comparing typescript and python a really important thing we need to cover is typing JavaScript is dynamically typed and while typescript adds static typing it still compiles down to JavaScript which remains dynamically typed at runtime being dynamically typed means you don't have to specify a variable's type when declaring it the type is determined at a runtime based on the value that's assigned to the variable here's a typescript example that illustrates this so we have a variable that assign the value 42 to 42 to and then it's of type number but then later I can just assign it a string and now it's of type string to show you that this actually works let's add some good oldfashioned console logs to the code like so and then when I use npx to actually run this code then you see that it actually first prints the number and then it prints the string note that I'm using the any type here and that's basically to indicate the typescript that it should not do step type checking if I do this then actually you see we already get a problem here in the IDE but now when I try to run this again you see that we actually get an error it doesn't compile to JavaScript anymore because typescript found a type error here I have a python version of this code so again I have the variable I set it to 42 and then I set it to a string let me just print the variable to show you this and then when I run this you see that it simply prints this without any issue JavaScript and therefore typescript is also pretty loose in terms of conversion it always tries to come up with at least a reasonable value here I have again my piece of typescript code what you can do in typescript is let me type the variable name again and then I'm going to assign hello plus 5 to it and then a semicolon ah gosh I hate these semicolons and then I'm simply going to console lock that variable again and so when I run this you see that this actually runs without any issue whatsoever in Python that doesn't work so if you try to do this in Python this is actually going to raise a type error because python is actually strongly typed you can also see that happening when I run this if you want to fix this in Python then well you basically have to turn this into a string like so and now when you run this there is no problem whatsoever now the fact that JavaScript tries to come up with a reasonable value for something also means that sometimes conversions are a bit weird like here for example we can do true plus true and then we can compare that with two and that's going to return true and there's also this the triple equal sign which I don't even want to get into it's a bit of a mess how that all works and you also have this example that also evaluates true and there are more of these cases where it's kind of unexpected why something is truthy or falsey which can lead to some pretty frustrating bugs here's what happens when I run this code python has Type hints that provide optional static typing adding typing in Python has Zero Effect on how your code actually runs types are purely there as a helpful tool during development they're ignored at runtime now there are of course type Checkers like mypi but they're optional I personally find I don't really need them since type checking is most useful to me in the IDE this is very different from typescript which has static typing by default and that enables errors to be caught during compile time so for example if you go back to this code and it change the type of this variable to a number now you see that we get an issue here and then when I try to run this like so you see we get a type error it's not a runtime error it's actually something that happens before the code is actually run that can be an advantage because if your code actually doesn't run because of an error well then you need to fix the issue whereas in Python you can get away with hiding the error just ignoring it or it just happening in some particular cases where you pass around the wrong value so in typescript that doesn't happen that much what's interesting though is that the difference in type systems between Python and typescript makes sense if you look at their use cases typescripts and javascripts dynamic typing makes it's super flexible for handling all kinds of data on the web while Python's Dynamic but strong typing combined with optional typin focuses on readability and reliability this is especially handy in fields like data science and machine learning where understanding and managing data types is absolutely critical speaking of handling data effectively there's another challenge that many developers face which is localization if you've ever had to translate your app or website or machine learning tool you know it can be a total headache that's where today's sponsor localize comes in localize automates all your translation and localization projects they have a really simple API let me show you how it works here's a basic streamlit data dashboard that displays Uber pickup when you take a look at the code you see that this dashboard uses localized to provide the translated text in the interface I'm using the python SDK here that localize provides you with setting up the connection with localize is really easy you just need to create an API key in the interface and then create a client in your app now I simply Supply the API key that I take from the environment and I also have a project ID and then I have a couple of helper methods functions to quickly get a translation from a key so once you have this basic boiler pay code it's actually really easy now to get translations in the interface now as you can see in the dashboard one line of text hasn't been translated yet so let's add this here I have the localized interface and I'm going to define a new key called NB eups hour and I'm going to give it a default English translation in my app I don't need to do anything I can simply restart the app and as you can see the new translation is now right here now it's really easy I can now also add other translations like for example the Dutch translation now ai is directly integrated if I can simply click that save that and now I have my Dutch translation ready to go switching to another language in my dashboard is not really easy I simply replace the value of this language consent by Dutch in this case and now I have a translated dashboard this is all being handled by localized so if you dealing with complex localization localize makes things way easier with AI power translations you get results in seconds literally 10 times faster than doing it manually and it's not just fast localized AI keeps things accurate with gloss and context aware translation so your content actually makes sense in every language faster better translations mean you can launch a new markets without the usual headaches on top of that you can assign review and approve translations in one place no more messy spreadsheets or endless back and forth Just A streamlined workflow and when it comes to tracking progress localize gives you real insights like how much of your content is AI versus human translated and predictions on when translations will be ready so you can launch on schedule try localize for your project today using the link in description now back to the video another important difference between Python and typescript to me is that in certain aspects you notice that typescript has been built from the ground up to properly work with types whereas in Python they were added kind of later although you could argue typescript is a kind of later version of JavaScript now typescript can infer types without requiring explicit annotations in many cases making your code both concise and safe it allows for complex type combinations which enables you to Define very precise types using Union and intersection types for example now python of course also has this up to a certain level Union types in Python and typescript work pretty much in the same way you can clearly see that in this example where I have a function that prints some input input can be a string or an INT so that's a union type and then I'm using this instance to decide what to do in terms of Design This is not great let's be honest but I just wanted to show the possibility of having a union type in Python if I didn't put the unit type I would probably use something like single dispatch from the fun tools package now in typescript this looks exactly the same so here also we have a string or a number Union type and then I print that input and in typescript I'm using type off to determine whether it's a string or whether it's a number and by the way this is not the only way to do it in typescript you can also use instance of of but since we're actually looking at a type I find type of to make more sense in this particular case intersection types are something that python is not that good at so here I have an example in typescript again where I Define a few types like has name and has age and then I have a type person that's an intersection between these two types so person both has a name and an age so here I have a person who's aged 35 which is not really my age by the way guess how old do you think I am if you know post it in the comments anyway and then I do console log of the name and the age of the person and this is what happens when I run this code now in Python you can't do that but there are some workarounds so here I'm using a protocol for example to do exactly the same thing so I have a class as name which is a protocol that uses python duck typing and I have has age and then I have a sort of intersection type which is a person class which is then a subass of has name and has age and that kind of works however in my opinion this is pretty ugly it reeks of multiple inheritance and miense and I'm not really a big fan of that at least when you're doing it with types then you staying clearly away from classes and inheritance and instances so I much prefer that route and by the way if you're wondering if there is some other alternative for protocols in typescript then actually there is typescript has something called an interface which is like a specification of the structure of an instance of something so in this case we have an interface vehicle which has a speed and has a drive method and then I can have a class C that implements the vehicle interface this kind of similar to how it works in C and I believe Java as well so there you simply have your Constructor which has a speed and then we have drive which then does something and then I can create a vehicle my car and then I can have some other random object and then actually assign that to another car which is of type vehicle and that actually works because this random object matches the interface so in essence both interfaces and protocols that Define a sort of contract that an object should adhere to but in Python Protocols are actually classes and in typescript and interface is really a different syntactical element so that's the that's the main talking about types another thing I don't really like about Python's typing system is the cable type which I find quite clunky and verbose now I kind of understand where it's coming from because I mean if you add these things later to a language you sort of have to make sure that it fits with the rest of the syntax so I can definitely understand why they chose that particular Syntax for the cable type but I still don't really like it you can see the difference in readability right here so this is a typescript type definition of a function something that takes a name and then returns a string as a result and then you could have a function that's of that type that then gets a name and then returns something right I find this really easy to read it's pretty clear what the arguments are we see what the return type is I love it I really like this a lot in Python though it's going to be different here we have a type greet which is a cable and there you have these square brackets and then you have another pair of square brackets and that's where you define the arguments and then you have the return type now you already see some problems with this in that I find it kind of hard to distinguish between the arguments and the return type even though these are between square brackets it's easy to overlook especially if for example there is no return type uh then well you probably have to Define none here what happens can I just leave this out now it's basically gone and then let's say if I add more types here then now it's pretty hard to figure out what is the argument and what is the return type right or you might miswrite it for example and then accidentally put it behind the bracket whereas actually you intended it to put it inside the bracket because it was an arguments another return type that's that's pretty frustrating another limitation of this way of defining cbles in Python is that you can't specify the name I really like this type of specification where I can actually specify what the argument is going to be because then as part of my type definition it provides information I know that the greet function expects a name well and then I can probably surmise that it's going to do something with that name like send a greeting to it or something in the python version of that this is simply not possible of course you can not use the colable type in this way you could also define a class and then Define the call thund attributes and then you can actually specify the arguments there but that's also pretty for both and honestly kind of hard to read so there's not really an ideal solution in Python it would be nice if python adopted a syntax that is actually pretty close to this but I'm not really sure that's ever going to happen overall though my impression is that typescripts typing system goes beyond Python's typin because it's a bit more expressive flexible and better integrated into the development workflow features like unit types Advanced generics more intuitive function type syntax in my opinion make typescript a better choice for teams and large scale projects where type safety and maintainability are really important a few words about the ecosystem running Python scripts is actually pretty easy you install python you can run simple Python scripts right away if you need to install dependencies there Python's default package manager pip that supports Python's extensive libraries like npy pandas and fast API as of recording this video you can see on piie that we have over 600,000 projects that are available which is huge the issue though is that there's no good native python project management solution I mean there are good third party options available such as poetry and UV which is my current favorite these allow you to create virtual environments manage Project Specific dependencies and even publish python packages on pii typescript is different it's built on JavaScript equal system there's a package manager called mpm which is part of node we don't have an exact number of packages on mpm at least I couldn't find it if you know where to find it post it in the comments but if you look on the website of npm you see that they both having over 2 million packages which is way more than python but there's a reason for that I'll talk about that in a minute to run JavaScript or typescript you need a browser or Nos and there you're going to quickly notice a difference between Python typescript has way less batteries included than python so you quickly need external dependencies it's not really a problem but that is actually the case and that's probably also why there are so many different mpm packages way more than Python and things can actually get pretty complicated you're going to need a build to that compiles typescript into JavaScript you work with pretty complex Frameworks like nexs react there's also HTML CSS all sorts of Frameworks built on top of that and the list of dependencies that you're going to need in a typical typescript project are often way larger than a typical python project because python just has more things included out of the box I've had several projects in the past where my node modules folder that contains all the dependencies was over a gigabyte that said the add that complexity makes sense because the languages have different use cases python has extensive libraries for science Ai and backends API is an automation but a bit less focus on web development even though there are Frameworks like typi for building data dashboards for example or obviously jangle now typescript since it compiled to JavaScript really dominates in web and network applications both front end with libraries like react and vit and backend with no GS typescript is really ideal for building complex scalable web apps and maintaining really large code bases the type system provides safety at the cost of more verbosity complexity and an overall learning curve and by the way if you're starting a new project you want to learn the seven most important things to consider check out my free design guide R.D designu it's a really practical guide that will help you get started quickly the link is also in the description overall I'd say Python and types skp both have their strengths and trade-offs but like I said at the start of the video they are actually quite different python focuses on things being easy and flexible for the developer but harder for the user developing a python script is really easy but deploying it to users is harder than need to deal with installing the right version of python dependencies Etc typescript and JavaScript focuses on things being easy and flexible for the user you open your browser type URL and you're off it's going to do everything to avoid crashing with an error because that's not a great user experience however for developers it's pretty hard to set up everything debug your code especially if it runs client side make sure it works on a variety of devices which is a whole kind of worms that I haven't even covered in this video but now I'd like to hear from you have you used typescript how do you feel it compares to python do you enjoy having a node modes folder of several gigabytes let me know in the comments you might wonder how types script and python relate to other languages I've talked about on the channel like rust for example which sort of combines python like readability with typescript strict typing but with more performance and safety it's great for system level programming but it does come with a really steep learning curve go on the other hand is more closely related to python but it's still statically typed like typescript and there are definitely cases where I prefer using it over python to learn more about that check out my full video covering go thanks for watching and see you next time