More on Types in Typescript

Hello all!

Welcome back to my Learning Typescript series! Or should I say "our" series? Because we are all pupils to this crazy world of coding and I am just here sharing that growth with everyone. In the past articles, we laid a tremendous foundation. We are going to continue that foundation as we dive a little bit deeper into the knowledge we have gained so far. Read on, and keep keeping on.

                         LETTUCE BEGIN🥬

More On Types in Typescript

We have learned about multiple types that are inherited through Javascript in the form of primitive types. There are some other types that we are going to jump on, as well as learn more about the types we have already seen.

Arrays

With some basic programming knowledge, you'll know that an array is a collection of elements enclosed in [ ] brackets. We set up an Array in TS a few different ways, but mostly as follows:

Arrays values can be accessed in some pretty cool ways, the same available in Vanilla JS. Remember that numbering in arrays begins counting at 0.

As you can see, arrays can be pretty useful in storing multiple values, including other variables or arrays, as well as objects. 'Wait, what's an object?' you say. Segway.

Objects

Objects are, in a wild way, their own entities with their own properties and type. In JavaScript, the fundamental way that we group and pass around data is through objects. In TypeScript, we represent those through object types. Objects can be a strange topic, as there is an object, as well as an Object. The lowercase object can be explained as any value that is not a primitive value, while an Object describes the functionality of all objects. We'll

A very good analogy I had read said that a cup, that you would drink from, is a good representation of an Object. A cup has color, height, width, material, and so on. Yet, just because you call something a cup doesn't mean they are all the same, even though they have the same properties. An Object allows us to create an element with its own properties that is enclosed in { } braces. This is mainly done through interface or creating our own types, as we learned about previously. Take a look at how we create Objects in a few different ways:

As well as:

And who could forget:

Notice the question mark after lastName. This signifies that this input is optional. With a little bit of javascript knowledge, we can see that working with objects and arrays has not changed for us at all. Also good to know, nothing too dramatic has changed for classes and functions as well, other than type annotation.

Here is where you can read more on classes and where you can read more on functions for Typescript, as I will most likely not dive too deep into these concepts if they do not differ much from what JS already teaches us.

Conclusion

Sweet! Our groundwork for Typescript is looking like the Taj Mahal's right about now. I hope all of this has been easy to pick up and I would love to know how I could improve on anything in this article in the comments, as I am still learning as well. Much appreciated.

Next article will deal more with how to refractor Javascript code that you may already have in a project or app with Typescript, as suggested by Jon Deavers. Thank you Jon. Thank you and look out for the next submission, don't forget to follow me here and on Twitter! Peace!