Creating TypeSafe Dapps with TypeScript and TypeChain by Chris Kaczor (Devcon5)

[Applause] sir further today the first period some think about the ecologist and I'm grateful that so many people came and talked the pest or two type of Korean three times in the title so thanks for being here my name is first I work at maker Foundation and today I'm going to be talking about creating site type site tops so let me ask you a question how many it with your use faces more than more than half our room already so in the in the last two months yes even we have seen like this tremendous growth of time popularity and presently it even got more popular than you know well-established languages like Ruby for example as you see like steady growth of NPM and so on and so on so basically typescript has this huge company kind itself called Microsoft and you know there's a lots of workforce workforce work young language itself and on the whole tree tooling around so for example like Visual Studio code was for many people and entropy like you know entry drugs or types because they work so well so for those who don't respect people I think if you like you know more or less what to expect from the language itself some some ideas behind it so first of all like you can think about typescript as a JavaScript with types and the only twisting this explanation is that the tank system is very different from the one that you will find in classical of different programming languages like Java or C sharp so first of all you tractors I think so imagine you have two types with like interface and interface person name property of the string type and in typescript these types are in turkette interchangeable so you can assign one to another this is totally unexpected for a Java programmer which has nominal type II so this is totally doable in types but it's not possible has festered all the languages and you might be wondering about that picture on the right right side that image so if your JavaScript programmer it might be familiar with that type in concept so this is that the idea is just as follows walks like a duck quacks like an occupant company is a duck so you don't need to know the exact shape of entity that you're interacting with in just now if it you know answer some some common sense a and that's why we have that thank you so so so structure attacking is like a duck typing but queuing compile-time so then we have touched it press advanced level programming internet so pretty basically it allows us to transport high doing compile time like unimaginable a so here we have a complex object type which has like some nested mr. properties we have some area is nested and so on so on and now we can use some generic type like for example departure coming from the health ER library called des essentials and associate and and we gonna get like an object with all properties marked as optional recursively and this is pretty awesome like you know you can have a config which is like strict and then we can have like you know some defaults and then make automatically user input which is like optional of this of this config object and finally we have gradual typing this means basically that we don't have to type our application 100% correctly of course you should try to have this we can come up with type type coverage metric which basically means like we can count the number of symbols now programs that are typed as any any means that it's pre untied and divided by all the symbols in our program and we be able to come up with this presentation how my how your program is you know tight and this is still tight coverage test first and basically this allows us to just fall back to JavaScript if we don't have tight coverage or we don't have typed information or we just don't care about types in this specific place but a person should be used as a thesis as possible so now let's talk about how well I did the challenge is about typescript and web free and iam ecosystem challenges so Amy so now I created like a simple web free diet called snippet so here we so what web page is is a library written in JavaScript it's not types hi neighbors so here even though it's a type of pipe we use it as it's marked as any we don't have any type information about it but we can still use it and just operate like if we just write out that moved right normally in JavaScript so if you're like really desperate you can still use it like this so for example here used when we're getting like when we're creating web freeze and in what we're getting the block number it's any when we're loading ABI to interact with smart contracts that died contract on the magnet it's again any and you know everything is any like you do in JavaScript so some people are happy with this but basically this like active in this case doesn't have a stuff much like you know it's there but when interacting with doctrine it's a dime so the easiest approach here is to load typing so Taipings is just like external type information that was provided by community usually and it just provides this information for library written in JavaScript and there are typing for web free usually you would inside by our types window we're free but we don't have internet connections I can adjust again actually that they did before the stop and now each change in the code is that the way that we import library instead of using require use es6 style imports and then suddenly our code is properly tight oh so the web free is properly typed we see that the block number is not number as we expected we get like normal competition and so on and so on but when we interact with a contract because of the main that with all this we love this API on the fight the support of it it was really this contract is is the dynamic structure changes you know depending of the API that you love so in this case so basically this metals are like I've only a little bit right like see you see here the balance of his type has just take some arguments the area of argument so it's not read properly type and return type is a any which in fact is pick number so you know it's also it would be cool if it will say to us that it's big number because people are often thinking that it's just number and try to I don't know use fast on it and they just get an urgent runtime which sucks so how do we fix this so so thank you says this limitation like it lacks API changes as well so if if there's a change to web P yes like freedom tie things needs to be changed by someone like that and as mentioned before it doesn't work with the dynamic interfaces I love API and them that and we generator a wrapper on the fly during the round there so so it's impossible to type solution for this problem is to generate type things from the sky so basically we can gather API files from our project project up front before combining it with active Kamiya and in the separate bits that just generate this these typing type typing so basic it ETS files and this is exactly what type China does so another twist here is that we need to generate typing specific to the web 3 like blockchain access libraries of people using web 3 is the API of a smart contract a wrapper is society different than from others or from truffle and Samsung so basically type chain gathers are like the eyes gathers like the target that you want to use so for example a spider to use enters and it generates the these GPS files for you so let me let me show you how this works so again we will just do young type train and a specific target so in this case we want to lock target of wet dream because reusing web 3 now matters and and then this is a see a title that you could you know made like a post post insta hook or anything but here we just go around it directly so as you can see it let me go so basically you specify the target as I mentioned can you see okay you specify target and we specify the API files in this case it's just one file but examples about well patterns and so on and so on and basically we can see that we generated generated some some general types or web 3 and ears 20 DTS 5 and now in called application we need an explicit cast for this interface that was generated because it's just two possible to to guess that like to make a connection between the address that can be random between the compile time working with the typing so here we just need something like this explicit cast and well now that is your ECT 2010 and balance is number as you would expect and we're getting proper proper code competition here so these are all here see plenty plus some others metals ductile contracts have passed and as well as events for me here yeah so you know he supports events as well we can also browse this citing investor generated so basically you can also see that sometimes it allows us to specify either number or string because this is what what free allows us were three players allows us to those also you know these titles are really convenient and they they're like they're as open as possible right like if there are some progression happening your filter sit here as well so now we don't have to be super strict about something okay so in general I train works perfectly with any idea if your IDE supports typescript it supports type change generated wrappers it supports officially free different targets so it's web free the one point that at Thursday's and travel it supports custom targets so what you like for example imagine that you're not developing it down you're developing like protocol and you want to have generated acts generated library to use by different developers and you want to you know have come up with your own interface you know like some metals whatever you can generated automatically by providing here your custom target which just takes first API and generate some code and by the way can generate even called in different language than type space it's very general interface and basically then you can just hide implementation details from from the users of your library you could swap internal web 3 like about China access the library without affecting your clients and so on some patron has full API version to support so you know things extracts things like callback functions are overrated overridden functions now works and I work and it supports events as I shown before and what's pretty cool that it works with travel so we can do smart contract development not top development on me so here I have this example of single cell DD contract it it's like traffic onto the traffic project or some simple scientific contract of return and it has some functions we have some tests here and you know it's super nice now to write this because we have not called competitions having them to guess them there that the method name change PI's to do you know be sure what was the name of the method and what's cool is that if we introduce a change to the so difficult like let's say we rename say hello to screen hello and we regenerate or we don't and we originally the rappers we're gonna find automatically without rounding our as we're gonna find breaking changes so if you do a lot of my strength development is just faster to find breaking terms like this you know it just saves a lot of time and by the way is to use something like what are similar to track but using enters it works as well generate better style packing so recently it's it's telling that beat array I started to release it today because it works very well it will test the deterrent effect of this protective access cure unique so basically actually version 1.0 you can see a few new additions so if you use it before now the targets as are extracted as a separate packages which which is much nicer because you can even get your own package your own target like without you know polluting the types type trainers are a repository the avi parser is much nicer so you might be wondering why do we have a DI parser at all so basically we can parse you know try some styles avi to something type site like discriminated unions in in typescript winds up writing the the code generation part a lot and it just like you know less error-prone and basically their architecture of type train now reassembles and with the compiler general compiler architectures where you have you know this processing in pipeline so first we parsing VI and the code generation and this basically means the code generation is just function that takes in gyeom to return some strings without any i/o and so on so it's as simple as possible and I want to talk a little bit now about the two Gs organization special and I'm dumb because I'm running out of time and we gonna we have here so that chain is already used by well-known companies like maker now if I'm changing and so and song so it's not like you know some project uses its various in a while and keep going also sponsored like many counties and to you know inject some cash or for external developers to help us with exact issues and basically that's it man see that's my twitter handle but you can consider following [Applause]