TypeScript for Dataverse Mentoring - Day 3

[Music] [Music] hello folks this video is for mentoring sessions that i had conducted in the month of november of 2021 on typescript for database it's a four day mentoring session and the agenda for each day is on the playlist in the video's description the playlist has videos in sequential order so do check that out now let's get into it so welcome everyone for day three of typescript for dataverse uh today we are gonna cover some of the basics of typescript and we're not gonna focus more on database today but we're gonna focus more on typescript itself and how to write your typescript how to write complex scenarios uh things like that and that's what we are gonna cover today so let's get started and let me okay so that goes away so yesterday we saw uh the example where we were showing and hiding the power stats we are just going to build upon the same um same scenario okay so i don't have the demo today because it's more of like what we're going to do in typescript so there's no such demo as such so let's start with first thing that we want to talk about is interface now and let me open up we just shoot your code here so interfaces uh it's it's actually used as a type but it's a it's a contract that you define where you're saying these are all the attributes that are required in in that type basically so for example if you look at xrm [Music] this namespace that comes from xm types right that xm types namespace has everything defined as name as interfaces so if you go to this namespace you'll see that there's a interface called xrm static which has page now page again if you go down to page you'll see that it it is again an interface which is extending form context if you go to form context it will again be an interface so interface is nothing but definition of an object is what you could say it contains attributes but it also contains methods as well that is what is an interface so what we're going to do today is we are going to create an example so i'm going to create a file here called command.ts and in this common.ts i'm going to add an interface so interface uh super hero and then cannot spell this morning okay so i created an interface i superhero and now what i want is i want this interface to have two attributes and one method okay so my attribute first attribute is going to be a super hero name right and this type is going to be of type string then my second attribute is going to be the publisher name publishing like is it owned by dc comics or is it owned by marvel's that's what the publisher is right publisher name again that is going to be string now what i want to do is i want to also add a method to this and that method could be say hi okay and then when i'm defining this method i can also define what the return type of that method is going to be so say hi and the way you define it is say hi and then you do a colon and then colon is because colon defines what that is right so this this is what you're defining but instead of giving a type like number string or whatever you want to do instead of that what you're doing is you're defining it as a function so this is the function definition now when you're defining a function you also have to define what that function is going to return okay so that function is going to return a string now if you want that function to have parameters then you can do parameters like name and then if you're giving name then you can do type as well so that's how you pass in the parameters to that function so but in our case we're not going to use this we're just going to keep it simple so that is how you define your interface now when you define your interface and you want to use them so remember also remember some of the things that we discussed yesterday like input export right this interface is not used in any of the main file which is part of the webpack config so when you are using this in super hero demo anything that doesn't have input or export is on the global scope so whatever you define without an import or export statements in any of the files doesn't matter where you're defining in type type script that would be defined on a global scope what that means is even there is no export keyword here when i'm going to superhero demo i can still use it so let's try to use this on the on load method okay so how and how do i use interfaces so now i would use that interface with let and then i'll provide a variable name so spidey is going to be my variable name and then i'm going to do colon and then now i'm going to define a type now in instead of defining it as number of boolean or string i would use that i superhero this i superhero type okay so i superhero okay so that's my definition of of the interface but because i'm using uh in interfaces and interfaces say these are all the things that you have to define right it's a contract kind of thing if i do equal to and i just do this typescript is gonna yell at me and then tell me hey you are missing some things you have to define superhero name publisher name and say hi method which you have not defined in this so that is what we have to do we have to define superhero name and you're getting intellisense as well and then because it is expecting string if i assign a number it's going to again yell at me saying hey number is not assignable to a string put a string right so we're gonna put string as spider spiderman then we are going to put uh the next one would be publish name and again the intellisense shows up if you uh press ctrl space then you can see all the intelligence available or all the parameters in that are needed to define that interface so publisher name goes marvel and then you say you define the say hi method now say hi method will be defined same thing but instead of just leaving it here what you would do is you would give a definition to that method but but now what happens is say hi returns a string in our case we are not returning a string so that is why it is yelling at us saying that your method is returning void and why it cannot be assigned to a string so now here we will say return i that's it yeah so now we defined our variable which is of types i superhero and everything is required so we defined everything that was needed for that interface to be defined now if i have to use it i can use it as spidey dot and then i can say say hi or i can use any of those other things that we have defined and that is how you you use interface so interfaces is something that you know um we mostly use it when we are we want that structure to be defined like um for example your class like even this classes it's defined as an interface right so what that means is you whenever you're using this you have you get all this intellisense but you also get you also have to define this methods too um so that's what it means yeah uh so now let's see how so sometimes you can have a contract where you would say okay superhero name is kind of required but publisher name may may be available or maybe not available may need can be defined or can be optional right so if you want to do those kind of things where you want certain attributes in that interface to be defined but certain to be optional and let the uh let whoever is going to use those interfaces define whether they want to put assign a value to that attribute or not so in that case we want to go back to common.ts and you just have to put a question mark in front of it if you define a question mark and save it now we don't have to define publisher name and we save it it doesn't yell at us because publisher name is optional now just because we added that question mark in front of the publisher name and whenever you're using it you still have access to it so spidey dot you still get that published name but now if you see the return type that it has is it has string and undefined now here is one thing uh if you're coming from c sharp background in c sharp it's either null or not null but in javascript or typescript you have undefined because undefined is what is called null in javascript but you also have null so null is not equal to undefined keep that in mind undefined is it's not defined yet uh if it is null means it is still defined right so if you want to do some null checks or checks like that always check for undefined so if you're doing if if spidey dot publisher name if you want to do this right this would only happen when the whenever there is a type undefined this checks for undefined right if it is undefined or not if it is if it is defined then it will go in the if block if it is undefined it will not go in the if block is what it means so keep that in mind yeah okay so that's that's what we have for interfaces now moving on to modules so in the modules again same thing let's define a module here greetings of type string and then we'll do this so we have defined a variable called greetings now if we try to use it here let's say i want to put it in the console log i can put it in the console log right the reason why i'm able to do it is because it's defined on the global scope as i said but as soon as i add export i will get an error here it will say not defined so what we are doing is we are whenever you provide an export command it's basically creating that as a module right so this greetings now becomes a module in that common.ts file and if it's a module then you have to import that module whenever you try to use it so here if i just hover over it it will tell me to quickly fix it so this is kind of a nice feature of vs code if i click on it it will say do you want to import greetings from this module common okay and then that's how we can get access to that greetings now because we have used export command here the interface like this entire thing became a module right because common ts now became a common module if you hover over it you can see that it shows this is the module right and because of that even i superhero is not accessible anymore because now it became private kind of so to make it x to expose it you again have to type in export here save it and then if you hover over i superhero it will tell you to fix it if you don't want to do it you can also copy it and paste it like this over here okay so that's how you import modules these are modules and if you define anything with export it automatically becomes a module if you're not defining it as an export then everything is on that global scope okay okay so now cool let's see what happens when like okay i wanted to show you one thing which i forgot let's go back here let's not define this as a module let's keep it like this and let's uh and then say hi is returning a string which is returning high but it's we are not capturing anywhere we're not showing it anywhere so let us show that in the console log so in the console log you should see hi and you should see greetings okay greetings is nothing but hello superheroes now if i build it and this is all on the on load command so [Music] once it completes the build we'll go and deploy this so it completed the build let's go and upload it it's uploaded uh let's go and just publish because we have an issue with the extension today so let's go and quickly publish it okay publish complete so now let's just do ctrl f5 while it's loading up and there you go okay so now let's open up dev tools and then see [Music] where is so in the console where is that pin shown and you can see it's is it it's not shown anywhere can you see it no right if you filter them i forgot how to filter it yeah i know i think i forgot how to filter the log but um you don't see it right the reason is let's go and see what the javascript there's a filter bar on top yeah there is but then i wanted to filter it just based on not this error messages there's a way you can do that yeah uh but anyway so let's go and look at the javascript so as you can see in the javascript you have this spidey and then you have this high spidey and then the greetings um at least the highest spidey should have been locked okay let me just refresh it one more time maybe it didn't load it didn't load the javascript one second superherodemo.js it's not showing the latest one for some reason okay let's do a publish one more time okay published and let's refresh it okay cool so now if you go to console why did it error out that's why okay my name space was wrong so let me build this again and deploy it again and for some reason it is listed twice here [Music] let's go and publish it one time hopefully it has the right code now no uh yeah greetings okay so this is what i was looking for so it shows me that greetings is not defined and if you go here let's see hi been printed but it failed on greetings why was that the reason is when we defined our when we defined these greetings it is not part of the superhero demo and super hero demo file is what is getting uploaded uh and pushing to um to database greetings is defined in common.ps and command.ts is a separate file as i said whenever you're defining anything here it's on the global scope but that works when you're working with node.js projects but it's not a node.js project it is for database and each file it javascript file is individual file so to to fix that um you have to either export com you have to put common.js in the webpack config and then deploy common.js as well but this is where good things happen like webpack comes into that play this typescript plain typescript is not able to do it so if i put export here and export in the like what we had before and it's going to fix it so now it's fixed and now if i compile it here is where that tree shaking comes into play so what webpack does is it goes to greetings it goes to high iso hero interfaces and then see does it really make sense to include it in that superherodemo.js or is it exported as its own file and we have not exported common.ps as its own file uh in in the in this export right or in compilation it's only generating superhero demo so that's why what it does is it goes and adds this definitions whatever is needed intelligently in that superhero demo.js so now if i open that file again you'll see that file has increased right the reason is because it is now referring to that common.ts but it also has the definition for grid interestingly it doesn't have definition for interfaces because interface is something that you're defining only in typescript when it gets compiled into javascript it is still an object i like a regular object and that's what you can see it here so now let's go and deploy this one and see if we are having the same issue and publish and let's go and refresh it and no errors right so now if we go here you can see high got printed and hello superhero also got printed because that greeting definition was now part of that same javascript okay that's where the tree checking comes into play and that's what is one of the benefit of using web packs now moving on uh we'll look at what how what are classes so we already know that whenever you add a typescript file over here is actually uh is x which is getting exported but what if you want to create your own classes so if you want to create your own classes and just because we are short on time i know we are running little behind so i'm gonna just copy the code and i'm not gonna type it all the way you can do the same thing here you can define a class now in this class i have a superhero name i have greetings and then i have constructor where i'm passing in the name and the message and that gets assigned to superhero and then the message gets assigned to the greeting then i have a method called grid yeah now i'm initialize so this is what my class definition looks like now if i want to use it i can use it via that let sh great of type sh grid is equal to new and then undo sh grid and then it will intellisense will prompt me what are the expected parameters for that class so name is one parameter and then i can do i n man and then messages good morning okay so that's how i've defined i've defined my class and i've initialized my class in this way now i have a question for you guys all and i'm going to post it in the teams in a second okay load okay so i've posted a polling question and what you have to do is you have to select the question is will any defined class be part of the compiled javascript is it yes or is it no so this class that we have defined here we want to understand whether this class will be part of the compiled javascript when i click on build dev and i compile this will this class be part of the js file that gets compiled okay uh we have few other things to cover so um let me reveal the answer so whoever said yes all of those are wrong whoever said no are correct the reason is we are defining this in common.ts we have not used this class in superherodemo.js superhero.js superherodemo.js will only in or that class will only get included if it is included in the import statement and that class is not part of the import statement so if i build this [Music] and if i go to demo dot js i only see greetings and this is it right so i'm not seeing anywhere name of that class uh what is that class names essay grader right so let me copy it and then just for sanity check we'll just try to find it ooh that's interesting did i use it oh yes because we're using the common module that's why okay so the way the way i wanted to do it is i want i didn't wanted this i wanted to do it without the module uh the reason yes so whoever said yes are actually correct uh i forgot that we have used the module here already the way i had designed this was i was not using the module i was just doing without the module uh and somewhere in the script i think i missed out uh so because we're using module uh then that class gets included in the common.js as well so the answer is yes but that was not my part of the the thing but yeah so it's included in the js because it's part of the module if it wasn't the part of the module if this wasn't if we weren't using this and we weren't using any of this it would not be part of the module right it the the way it works is whenever you're defining the class the class can only get included whenever you're using it in in here we are that import method if you are using it via import method then it will get included in the js file okay so let's go back so class is pretty simple right um you have variables you have constructor and then you have methods and then you initialize it in this way okay now this class is currently not exported so if you try to use if you try to initialize this class in here you will get an error and you will get also of quick fix where you can include it so you cannot actually get a quick fix here because it doesn't have the export command here so if you write export hover over this you get a quick fix and then you can add it to an existing module okay next thing is any so if you're using typescript limit the use of any any is nothing but you're defining that variable with whatever like it's aware in javascript language so you can have string you can have number in the same variable so for example let's say we have demo any and then again we are defining the type as any right it's again one of the data type and then i'm gonna say hello world and and then now i'm gonna change demo any to say it's gonna be a number or demo any is going to be a bull so in this case i am not getting any errors because initially it was string it was assigned to a string then it was assigned to a number then it was assigned to our true it can have any data type because the the data type that is defined is any yeah so but then we have to limit the use of any only use it whenever we we know that we don't know what the written type is going to be or the return type is going to be the string or integer or if if it's going to be multiple things most of the times whenever i read javascript i always try to identify what the data type is going to be uh one example that i can give you where you need any is again if you go to this zero um typings then this get attributes is so if you go to xrem and uh if you go to xrem dot page form context page form context get attributes right um get attributes returning attributes there's one that returns any somewhere over here i'll try to find it tomorrow and then i'll show it to you but this index.ts has those kind of things where we don't know what the return type is going to be so it returns any anyway so coming back to another usage of any is whenever you're defining a function and function let's say is color i'm using um [Music] num and then if num then return fine something right now it's yelling you and saying that num needs to def needs to have a type defined either it's defined as explicitly you have to define any or you have to define it as string whatever but you have to define a type if you don't define a type by default typescript will tell you that you have to define a type if even if it is any you have to define a type there is a setting in ts config which i don't recommend at all but there is a setting where you can say no implicit any and then you can set it to false if you set it to false and go back here the error would go away but you now you would get a warning so warning will be that you have to define a type yeah so keep that in mind this is one of the thing by default it is always true and i always like to keep it true so that we don't accidentally create functions without any types okay then next is so next we are going to look at arrays how to define arrays how to define tuple how to define enums so to define an array you have to go back here and um array is pretty simple so we can say let um valid trace of type string array okay so first you define the name of the variable and then whenever you're defining the type you say string of array or integer of array right and here what i'm going to do is i'm going to actually define the array in an in this way you can just define the array without anything and then initialize it later on but i'm trying to initialize it here itself cyborg or mutant okay so that that are the valid traces of all the superheroes that we have uh so now what we're going to do is we're going to capture the egg so if you go back to the form there's a race here right so we're going to capture this value from this race so we can do let uh sh race of type uh this is gonna be of type it's string so string is equal to form context dot get attributes race dot get value okay so i got the value of the rays now i'm gonna compare it and then see if if so whenever you're doing arrays you have a lot of functions available with the arrays and one of the function is valid address dot includes so what includes does is it will go and check if this race is included in any of the values in here so it will check the value of sh rays and then check if it exists in any of this three values that are available okay so it's uh this is what it would do and then if it is if it exists then we are going to show form context dot ui dot show notif um ui set form notification and then we're gonna set a notification [Music] saying contains race so another thing and this is very uh like i normally like to do not use double quotes but instead of that use um this tilts right or not tilts but i don't know what what these are called but these are the above tab whatever the keys that that is what it is called uh and the reason why i use this is because this is like in c sharp if you use a dollar sign in double quotes then you can use variables inside of it and you don't have to do string builder or you don't have to you don't have to use plus sign to concatenate the string similarly in typescript or in javascript you can use this um what you call quotes whatever this types of codes to add your string so if i add a string contains a race and then i can do race type right so race type um contents arrays and then dollar double quotes and then i can do raise type here comma and then now what we want is we want xcrm.form notification level which is either info error or warning we're gonna provide info and then we're just gonna give a name okay so that's that's what we're gonna do that's the array we're going to check all this thing at the end of once we complete all tuples and enums and we'll deploy it and then see if it works or not so i'm going to just comment it over here this is for array now another date another data type is called tuple now tuple is an interesting data type because what it does is it's kind of like a dictionary but single level you know how dictionary in c sharp is you can have key value pair key value pad so it's kind of area of key value pair whereas tuple by a by itself is just a single level key value pair okay it's it's not an area of key value pair so that's but then you can create a dictionary using tuple and array so here you can do yes what i have here is because we're running let a little behind on time i'll just copy the code to define what the tp looks like so tuple you're defining the key so key could be string key could be number we can change this we can just say number it's actually not a string value pair you can actually have more than this so you can have string then you can have uh boolean so you can create tuple as complicated as you want it to be but when you're defining it you have to define it in in the same way so 200 then string then a string again string again and then is the true so that that's how you can define to pill so it's not kind of key value but then you can use tuple to create that key value dictionary in typescript as well if you want to go com complex in here we're going to keep it to what we had before and now how do you identify how do you capture these values is what we're going to look next so to capture this value you can use sh intellisense and then you can do dot um now you can see that it it gives you push and pop which means now it's kind of an array so if you see it gives you string and number so because it gives you that area kind of fill you have to use forage okay so for h then you can do e and so in the forage you're defining it's kind of your link you expression or lambda expressions whenever you're doing c sharp i'm comparing everything with c sharp so if if you're in c sharp world this is what how you would write write e like a variable what is coming and then you would define a function and inside this function then you can get access to that e and e here can be of type string or can be of type number because here we have this two right string and number so before you can access it you have to identify what is the type of that thing so i will do if else and type of is a type of is again coming from c shuffle type of is already you guys know that you can get type of that particular variable by using type of e is equal to number [Music] and then similarly uh well we have else but we can do if here as well just to check if type of e is equal to string okay so if it is number then we'll do log again you can use the same thing number and typing and same goes here but here you will instead of typing number will do string okay so that's how you can use tuple uh next is in m in um is same as c sharp so you have to just define enums based on enum keyword and give the name so in here we can do gender of the superhero and then we'll define what that enum would look like so e m can be male and what the value would be so 100 female 200 and other 300 okay so those are the gender genders we define now if you want to use enums then it's pretty simple so let's say let's gender of type now what we are going to do is in our code or in our there's a gender and which is an option set field right so this option set fit if you want to capture it in in the code xrm gives us option set value as one of the data type or it's actually an interface again but you can use it as a data type right so excel dot option set and then you can do form context dot get attribute and here it would become gender dot get value so now when you do get value the get value is what i was actually looking for get value is a returning of type any and because getfull is retaining of type any if you use xm dot option set value this gender is not of type any anymore it becomes of type xrm dot option set value so whenever you use gender now you would get text value right because option set value can either have text and value right so now gender has two things if you want so now how does that conversion works so let's say you want to get based on the value you want to get the text based on the text you want to get the value of the inum so if you want to do that let's just create a small function here static um what do you print gender okay and then gender would have so what i'm going to do is i'm going to create a constant of num okay so here's the thing um yeah gender is of type inum right if you want to access the key or the value the way you do it is you have um you have to use actually i can just copy it from here and i want you to do this not in here because it the class sometimes doesn't allow you to do certain things so i'm gonna paste it here so in the common what we're going to do is we're going to define that inum as a gender and we are going to define a type we don't even need export here so what we did is we defined a gender we defined the type so type is another key word that lets you get the type of the gender so it would give you male female others that's kind of a type and then that is what is needed in uh that is what it will take in as the parameter so that gender keys is now key of type of gender so this is the key female male others that's the key and then that key is goes in as the parameter for print gender and in here uh what i'm doing is i'm just getting the value so based on the key so based on if i'm passing in mail it will give me the value now and that's what is getting printed here so the key is this and then the value is this that is what is happening in here okay uh so i'm gonna get rid of in m from this and what we'll do is we'll do print gender and now it tells me whether i want to pass in female male or other and we can do female male or other here and then it will then print actually it will print to the console what that values are okay so now what we would do is we would just review the code once uh we have initially we created an interface interface is getting logged as high then we created uh greetings as as a variable which got exported from a module and we are printing that as hello super heroes then we created a class and we have this class initialized here but we are not using that class anywhere so let's put that class sh grade dot grid okay so we are calling that sh great method from that class then we have type any and then when we post this on the console log it should post in as true because that is the last value that it holds okay then we have array in the array it would go and get the value of the race check whether it is human cyborg or mutant if it is any of this value it would print that value contains a raise and it would print what address is tuple as i said can contain multiple data types in one single variable and then if you want to access it it kinds of uh converts it into kind of array situation you have to use forage mechanism to go and identify the data in it uh inum is declared using the inum keyword it has same concept as c sharp key value pair and then if you use the key of a type of gender then it becomes a type and then that gives you the only the key values so it would only give you male female or other it would not give you the entire inum you can use them to pass in as a parameter and then in the in when you want to use an enum you can use then them as an array so you can do enum open brackets and then pass in the key which is your male female or other is what your key is going to be so you can either pass in here like male female or other as well and then we are printing the key here and we are using this enum uh in our class where we are getting the gender and we are not actually printing the gender so let's print the gender as well so console log gender dot text text value okay so we are printing that and then lastly we are printing the gender from that function that we created so let's go and deploy this pretty quickly okay and publish it and while it's publishing all right it's not working first okay so let's do a refresher so to answer uh lee's question this question is how many times can a tuple be how many items can a tuple be so i'm not sure of the maximum number of items that it can hold but i have tried with like 10 and still worked so i'll have to find it out what is the maximum okay cool so now we refreshed it let's go and look at the logs and then see if um for some reason tend to play again i guess to check what's wrong with the negan uh okay so let's see hmm why the others are not getting printed it's fresh uh while i'm trying to see why this is not loading maybe it's a caching issue uh i'll answer a question from mohan so mohan's question is why in in c sharp we have double equal to whereas in typescript we are using always triple equal to so you can use double equal to in typescript as well but uh this is like a strict so triple equal to is like strict matching double equal to is not strict matching so it doesn't check for the references as well uh so normally the standard in in javascript or in typescript is to use triple equal to all the time and this is also one of the condition that microsoft checks so whenever your javascript is getting published in and then you're running solution checker installation checker microsoft has a rule where it will go and check each and every conditions and then it will see if you're using the triple equal to or not so to minimize those warnings and those are like minor warnings or maybe medium level warning but still they are one so if you want to get rid of those the best practice is to use or triple equal to in typescript okay and yeah c doesn't have triple equal to it's only in typescript uh any other questions so while i try to still try to figure this out uh are there any other questions you can open up your mic and then ask the questions if you want to i don't know what's going on i'll figure it out later because we're already above time so i don't want to hold everyone up but i believe you got the idea of how this works so that's it [Music] [Applause] [Laughter] you

Channel: Power Maverick

Views: 143

Keywords: Dynamics365, dataverse, msdyn365, poweraddicts, powerapps, powerplatform

Id: 9Jc1a6UjdE8

Length: 60min 3sec (3603 seconds)

Published: Tue Nov 30 2021