DevTips Daily: The Typescript constructor function

so in today's web dev tip we're going to take a look at how you can use the constructor function or feature within a typescript class so this is going to be pretty much the same as it would be within a javascript class but there is one key difference which i'll show you which is a really useful feature so in the previous web dev tip we created this basic class of a user that has these three member properties but in order to actually assign values to those properties we needed to create a new object and then manually assign each value in turn so what we can do instead of doing that is create a constructor function like this and it's just using the keyword constructor and it looks very much like the login function that we created before but this is a special function that will get called when we create a new user object using the new keyword down here okay so what we can do in the constructor function is accept several arguments and then use those within our class so for example we might accept a name property and we also might accept an age property and notice how i'm typing these exactly the same as the properties we've already got in the user class and we could also say is pro dev which is exactly the same as what we've got up here okay so now if we scroll down to this line here where we're creating a new user uh we've got a problem because typescript is recognizing that the uh when we create a new user object this constructor function is being called and this location here is where we need to pass the arguments in which is what is called in the constructor function so you can see here it's expecting those three arguments that we've defined but obviously we're not providing any so so it's worth saying at this point as well you can make any of these properties optional just by using the question mark as we saw when we were creating our interfaces and types and it should now say that we're expecting two or three arguments but we got zero so we need at least two arguments to create a new user object so that's fine we can just pass in some literal values here so we need to pass in a string and it should also still be respecting the types as well so you can see age needs to be a number so let's make sure we put in a correct number in here and now you can see that the typescript errors have gone and if we were to create our user object again we should get the same output as we had before so let's just check that here from npm run start but actually what we're seeing is an empty object and the reason for that is that even though you've provided these values as uh values to the constructor you need to still assign them to the user class itself so typically that would be done like this so you'd say this dot name is equal to name this start age is equal to age and this dot is pro dev is equal to is pro dev and if that's undefined we can just make sure we set that as false so if we were to run that again you'll see the output that we get is name age and is prodev have all been set on the object and we've also got this default value of false because we didn't provide a value for ispro dev down here in the call to the new user constructor so if you've got lots of options that you're passing into your constructor this constructor function can get a little bit unwieldy so imagine if you've got 10 different arguments you're passing in then obviously you will have need to have 10 different lines to assign those values and that can be a bit of a problem unless you need to have any particular logic in here like this so what we can do a little typescript feature is to assign an access modifier to the arguments in the constructor function and that will automatically do some assignment to the values that we're passing in so we're going to cover these in a bit more depth in another tutorial what we can do is actually just remove those assignments here and if here next to the actual argument name we put the keyword public and then also do the same for age and also for is pro what this will actually do is when we pass in these values down here they will be automatically assigned as member values member properties to the class that we're creating and you can see we're getting an error at the moment and you should see that it's saying that in visual studio code that we're getting a duplicate identifier so if you do use this approach you don't actually need to have the members defined within the class so we can just delete these from here so if we save that and run it again you can see that the object has been created successfully and the name and age properties that we've passed in and down here have been successfully assigned and that's just a nice little shortcut so you don't have to do the this dot name is equal to the value that's passed in and of course you don't have to have the member properties themselves defined within your class itself so it's a bit of a time saving and neatness thing and it's a nice little feature of typescript there you go hopefully that's explained to you a little bit more about constructor functions in typescript make sure you stay tuned for more web dev tips

Channel: Code With Bubb

Views: 2,171

Keywords: devtipsdaily, devtips, javascript, html, css, javascript html css, javascript tips, html tips, css tips, junior developer central, typescript, typescript constructor, typescript constructor function, constructor function

Id: HE5-kNUjkqs

Length: 5min 4sec (304 seconds)

Published: Tue Oct 19 2021