DevTips Daily: TypeScript Strict Property initialisation

so in today's web dev tip we're going to take a look at strict property initialization in typescript and if you don't know what that is i'll go through a few examples but essentially it's a way of ensuring that you assign a value directly to a property when you're creating a new class or you can override this behavior if you need to so we had in our previous web dev tip we created a class called user and there's some items that are passed into the constructor which are set as public properties on top of the user class which means anything we pass into the constructor is available on the user object but what about if we want to add some extra properties to this particular user class so we could for example very trivial example we could have is the user logged in for example and we could set that to a type of boolean and that will be either a true or false value to denote whether the user is logged in or not but you can see here we're getting an error a compilation error with typescript and if we just hover over that you can see that it's telling us that this new property that we've set up has not been initialized and we don't actually assign it a value in the constructor so this is a setting that you can turn off and i'll just show you how you can do that in a second but it's there to basically say you've created a property but you haven't actually assigned any values so we're not really sure whether you need this or not and obviously it could cause errors later on down the line if you're relying on this property having a value so a couple of things here we could assign the logged in property of value straight away so you can do that when you define the actual property itself as well so you could say something like is the user logged in is equal to false and a little side note as well with typescript if you are assigning a particular type to a property or any variable for that matter you don't actually need the type because typescript will be able to infer or work out what type of data you're assigning and therefore what type of data the property should have so you can see here it's been assigned the type of boolean we'll just leave that in there for the moment for clarity so that's one approach that you can do to get rid of that problem the other thing if we just recreate the problem again is in the constructor we might not be passing that in as a value to the constructor function down here but there's nothing stopping us from in the construct function doing some more assignment work so we could say this dot logged in is equal to false and again the error goes away because we're definitely assigning this logged in property of value when the object is created so also i mentioned you can override this behavior so the way to do that in typescript is in the member property that you've defined if you just put an exclamation mark after the name of the property that you're creating and you can see the error goes away and this is just like telling typescript that although this hasn't been assigned a value you can trust me that i am going to assign this property a value at some point and i'll make sure that there's a value in there before i start using it for example in the login function there you go there's just a bit of background on the strict property initialization error and how to handle it in different ways depending on your needs so that's it for this tutorial make sure you stay tuned for more web dev tips you

Channel: Code With Bubb

Views: 445

Keywords: devtipsdaily, devtips, javascript, html, css, javascript html css, javascript tips, html tips, css tips, junior developer central, typescript, typescript strict property initialization

Id: Kx-qUmFioa8

Length: 3min 7sec (187 seconds)

Published: Wed Oct 20 2021