Scale By The Bay 2020: Jason Swartz, TypeScript - You'll Like It

Scale By The Bay 2020: Jason Swartz, TypeScript - You'll Like It

Recording: Scale By The Bay 2020: Jason Swartz, TypeScript - You'll Like It

[Music] thank all right so the title of today's talk is typescript you'll like it now you can't see my slides right yes you're fine thank you great so hey everyone it's great to be here at scale by the bay well not really here but here online anyways i know we're all figuratively in oakland california right now by lake merritt we're actually all online working from our own homes but it's nice to think that sometime in the future we'll all be back together but i'm glad we could all meet together here today i'd like to go ahead and introduce myself uh my name is jason schwartz and uh i'm a big fan of scale by the bay i used to help out when it was a scala by the bay and i know it's we're all multi-language and multi-methodology here uh i also uh i wrote learning scala from o'reilly so a big scholar fan but i like other languages too and during my time at uh different companies i've enjoyed doing java and python and javascript and go and and typescript so i want to talk about typescript today so here's the agenda for today's talk i'd like to talk about what it is i'd like to talk how you should probably use it and three why should you use it let's jump into the first topic what is this typescript i'm talking about basically you've heard of javascript it runs in the browser it runs on the command line it powers services it's a very popular language typescript is essentially javascript plus types that's the name typescript yeah that's the whole talk uh that covers everything no there's a little more to cover than that i'm just kidding uh but yeah typescript is essentially javascript with types so this is a language that goes back to 2012 microsoft created it and they've been supporting it it's a very well supported language they're great great documentation site and it really does do um it's really nice to have a strong supported language uh it essentially supports everything that's in javascript es6 uh this was the second big version of javascript uh really overdue adds a lot of niceties adds a has a great has a pretty good collection library typescript is basically on top of es6 so if you if you're familiar with es6 and having classes and organizing your code into modules and using lambdas it's very similar to that it it is a compiled language there's a compiler called tsc that you'll run to compile your typescript into super optimized and minimized javascript before you then deploy it say for the uh for a server in node.js or to the browser so there is an extra step that you'll want to do when you want to run your typescript when you want to run your typescript somewhere some of the features like to go into them the what of typescript well uh nice thing is you do have types you can you specify them actually kind of similar to scala style after the name of your variable or constant uh another nice thing is you actually don't have to specify the type the types are optional uh typescript compiler does use type inference so in this first example const is flag well if you're setting it to true the type the compiler will figure out that this is a boolean another nice thing is you have support for generics as you have in java and scala and some other languages here's an example of creating a user's array where i'm saying i want to create a regular array similar to javascript but with the type user with the starting capacity uh now if you try to add uh this is a mutable array but if you try to add something that's not a user you'll get a compilation error so it's nice to have uh use if you're familiar with generics it's really nice to be able to have them in other languages to make sure that you can really express what the type of your data collections are last thing is you do have type aliases so you for example here's a container t is something uh is something which is a object or object literal in typescript with a value t uh t here is uh simply the generic type parameter that's being passed in so i can then reuse this in my constants and variables uh and have them as type container t for example maybe value is a string or an integer or an instance of a class next set of features in typescript null checks which is really nice one of the options you have for typescript the typescript compiler is it can go through and figure out well do you have um uh possibly in all situation here uh so here's an example where i have a name variable and i'm i'd like to uh assign this to another variable called user uh typescript compiler would then flag this if you have strict or strict null checks set and say well this looks like a null condition you should probably check here another nice thing is chaining you have the question.operator to say well go ahead and call the bar method and get the bar field and then call the baz method if foo is non-nullable uh if it is null do nothing so in this case x would be null if food's not otherwise it'll get the bar field and call the baz method uh another nice thing is coalescing and these are really nice checks to have because you don't want to have uh null exceptions happen in your web application in production uh so coalescing here's an example if foo is null it'll do nothing if who is not null it will go ahead and call the bar method anyways really nice that typescript has some easy ways to prevent an all errors from happening in production next feature i'd like to go over is well more types if you're familiar with es6 you're familiar with function literals uh here's an example of a let's see here's an example of a function level called dub takes a number and number being the uh uh base type for uh numerics and typescript takes a number and doubles it uh this uh lambda notation is really from es6 so it's really a javascript holdover but since all of es6 is supported syntax and typescript this works out nice thing is with typescript you can say okay this is definitely the this definitely takes a number one thing i could add to this too is to say not only does this take a number but this um well sorry i have that here this takes a number it has an arrow and says it returns a number and i'm assigning it to a lambda which multiplies by two object literals something you have in a javascript this is behind the whole idea of of json really of saying hey let's just have use braces and to find some type of immediate object or you know similar to a dictionary in python for example well the nice thing is uh it's not really a dictionary uh here i'm just specifying an object uh with types so i'm saying look this is this is an object but with you know um well i'm specifying an object here literally which is really nice uh typescript like javascript isn't super concerned about defining your classes first another nice thing especially for fans of scala is you do have tuples of various sizes in this case here's a dress this is a tuple of two fields uh heterogeneous types here a string and a number and we're assigning it to a literal value something that's really nice to be able to work with and of course you get all the favorites that are defined in javascript's es6 you have classes you have uh inheritance and basic polymorphism which is nice you do have all the collections like map and set and array and all the others that are defined for javascript in this case we're really using putting generics to good use here here's a map from a string to a number and here's an empty set of just strings and since this is es6 you do have a lot of really useful data collection methods here's an example of creating an array of items and then mapping them to double their value and this is this is a standard type script uh it is respecting the types here if i gave it a lambda for example that added it to a string for example it would definitely um i'd definitely be getting a different type back okay i'm not sure if we're taking questions here or afterwards but i'm happy to be interrupted anytime with questions like how do you pick your fonts and other good typescript questions thank you all right you're probably thinking okay this is just language things where's all the other functionality i want to add well that's cool you can go ahead and you know choose all kinds of wonderful add-ons for your typescript project in this case here's a demo of using yarn which is similar to npm this is the package manager for typescript and javascript i'd like in this case i'd like to say oh i'd like the types for i'd like to get uh react but not just react i want the types and the whole document object model as well for this uh yarn will go ahead and get the the typescript data that i need so i can create a nice simple react page here's an example of where i'm using what's called tsx which is like jsx i'm using inline html and i'm defining a react app here this return i'm adding on that the return type from this function and say okay here's a basic element in uh jsx but using tsx uh with very safe types let's say i want to get a little 3d okay i can just simply say yarn add 3 and start using it from typescript here's an example of a basic view in with 3js uh i have bait i have pipes for all of uh everything i need in 3js i'm setting up a i have a constructor which is a core part of any typescript class and an update method it's a little it's a little uh verbose but that is 3js nice thing is for almost any top javascript project you're looking for someone already has the types available for typescript so you can usually depend on the types that you need being available okay last out on because you're probably wondering and this is scale by the bay yeah there's a lot of functional libraries for typescript which is really nice uh fpts is one of the most popular ones and with that you get a lot of scala style add-ons such as option here's an example of a parse function well i'm going to try to parse your string into a number so in case you give me something it's not actually a number i'll set the return type to an option containing a number and check okay is this not a number okay is it actually divisible by one okay so uh uh if you know if there's if it's not divisible by one if it's not a number i'll return num otherwise i'll wrap this with some really nice to have i recommend this i've enjoyed fpts but there's a lot of different typescript functional libraries to choose from all right well that pretty much covers the what is typescript next thing you're probably wondering is okay how do i get started using typescript well it's pretty easy i'm going to walk you through setting up from the command line assuming that you have node.js installed and yarn installed uh yarn is yarn used to be the best package manager i think npm has node has caught up now so whether you use yarn or npm if you install them with home brew you can get the rest of the way in this example i'm going to use yarn and i'm going to say hey i'd like to add a package and i want it as a dev dependency because i want to be able to compile against it not just a runtime dependency well the first package i'm going to add is typescript that's right i want full typescript support plus tsc the compiler to be installed for this project i'd like to get the core types that are available for node node adds the map and set a pretty nice collection library it adds http client it adds ways to call shell commands so i really want to make sure i get all the types there and i'd like to have a reply because i don't really trust my typescript coding and i want to test things out in a ruffle first uh so ts node's kind of fun you can run this as a local repo and test your typescript code out next thing and uh sorry so when you run yard the first yarn the first time in an empty directory it'll set up package.json this is what manages your dependencies has your configurations for your project also has a number of um you can add scripts in here and shortcuts you can uh more easily execute your project in this case i'm just adding types ts node and typescript all the latest version as dev dependencies so they're available at compilation time next thing i'm going to run is tsc itself uh in this case so tsc is the typescript compiler i'm going to say init which says please set up a standard project and the typescript project is a single file called ts config so when i run tsc and i say i want please initialize uh the project it'll set up a standard tsconfig.json with the compiler options the target is what javascript code style are you emitting what modules do you need access to how exactly are you going to be able to call javascript code and my favorite in the middle is strict which says look do you want strict null checks do you want strict type checks do you want me to you know do extra compiler work to make sure that your code is going to run successfully once you have ts config.json in there we uh you have you have package.json which is necessary for yarn which adds the dependencies like typescript we have ts big.json so now we have the configuration for our typescript we can now run the ripple and we're all set here's an example of using the raffle uh let's see i'm going to add an import so typescript uses modules it uses the es6 id of modules so i'm going to go ahead and import exact from child process which is included with node well we added the node type so we have access to all the calls i'm going to set up a string and execute an ls in this directory which just had our has our uh node modules package and packet.json i'm going to get the standard error standard out i'm sorry any an error message standard error centered out in standard error take that and just grab whatever is printed out by standard out and then i'm going to go through all of the items in here and print them out let's see what i have oh i've node modulespackage.json okay minor er on my part i did skip a line where i then uh split what's in string into an array called files sorry that that's left out but the last thing here is you call split similar to what you do in scholar or tokenizing java and convert this into a simple array another quick demo let's say that you have uh let's say i take that that standard out and i want to serve my directory list as an http server well there is an http server that's available in node so now it's available in typescript i can create the server and say look when i get the request go ahead and call response.end and give it this content and send it back and let's listen on port 80 80 and as a result i now have a nice fast server up and running serving the directory contents i can change this of course to simply serve the file contents or serve this as an index.html this is just a super simple way to be able to code things up in the typescript repl all right with 10 minutes left we covered what is typescript we cover how do you use it a question that i probably should have led with is well i already know other languages why should i use typescript well one of the most popular ways to to use typescript is to build websites for example vue.js is really popular it uses classes it's really clean there's a lot of great uh templates out there for using it there's actually a really popular one on the armor site which has a view.js admin everything you need in typescript uh since it's all type safe you can make changes and verify and run it in dev mode the vue.js is super popular of course the the elephant in the room is react from facebook a really really popular way to build sites that's what we're using to build twitch for example twitch is built in react we're using typescript so that we can catch everything at on our ci instead of in production uh angular finally is the other uh really popular one predates react still a really popular way to build websites and the core thing is whether it's you building it or let's say you have a small project you want to hire someone to build this if it's typescript you'll have uh your compilation checks done you can catch yours before they go into production and if you're familiar with the code you have more people who can read the front-end code so that's websites but maybe you're more a uh business and front party in the back developer and you don't you're not really into the front end so much uh that's okay maybe you'll use typescript to build apps for example express.js is one of the most popular way to build a node.js server and node.js is servers in express are powering tons of some of the most popular sites around you may say well i don't really want to build an app i want to build ios or i want to build an android app great react native very similar we you have all the typings available in typescript you can use this to build both ios and android uh really useful uh you may want to set up infrastructure for example with pulami or aws cloud development kit they support typescript you can define all of your infrastructure for example with aws cdk in typescript the types compile when it runs it'll check with you generate the confirmation and ask if you want to go ahead and set your infrastructure really nice compact and type safe way to build out your infrastructure uh if you're building a cli node.js which i like building out clis there's a twilio page that has an overview of the top cli pics really there's so there's a lot of a lot of great options a lot of these are javascript but they do have typescript types and they make it really easy to build everything you need to have a really rock solid cli last thing there i threw out there through in there is package package will build your node.js as a native executable for your platform so that if you want to distribute it to others for example as a mac binary or a linux binary or windows binary makes it really simple to set that up i'll pause here i know this is kind of an information rich slide well you could also use it just to build javascript libraries uh for example nest.js very popular framework uh for a back end this is built with typescript just is crazy popular it's a testing library you probably figured that javascript plus test equals just actually built with typescript used by javascript libraries and type and typescript projects all around but it's actually built with typescript and lastly angular angular is actually built with typescript even though this is a super popular js project they figured well we should probably compile everything before uh we actually build this into javascript to catch any errors uh so not only can you build apps web websites and apps and cli but you can build reusable javascript libraries with typescript all right last part is you might say do i really need to be have a typescript though well you don't really have to if you want to build something in a language that composite javascript for example to build a you know a great website you can go with reason reason is super popular it's very functional uh based on the old campbell syntax uh it's a really nice language uh elm really popular for websites it's also functional has a lot of great tooling on top of it and you can also go with scarlet.js very well supported if you like the scala syntax you get to keep it a lot of great library supports i think there's cats and zeo now for scholar js so you have a lot of options you don't really have to do typescript if you are going to build a website you recommend building something which does have great types though so typescript reason elm scholar js these are all great options for building out your own apps typescript though last part it is the more popular choice so you could go with javascript but since typescript's compiled it's it's very well typed you're going to catch bugs earlier you have great editor support so you can click through straight into types you can navigate much better you clearly build better tools if the tools understand the types uh and it's very loved so if you're gonna start a project and you want to bring on other engineers and find it nearest with similar skill sets typescript is a great choice it's very well understood and a lot of folks a lot of folks use it a good reason to go with typescript and maybe it's kind i've had fun using it too all right that is the why that concludes my talk thanks for listen thanks for watching everyone it was really fun to talk about typescript today you