Beginner Types in Typescript

#javascript #beginners #typescript #codenewbie

Hello all!

Welcome to the second insertion to my Learning Typescript series, where I will be learning Typescript and passing on the glorious knowledge.

While the last submission dealt more with what Typescript is and when it is most beneficial to use, this article will deal more with viewing some beginner code to lay some nice groundwork, ya dig?

                         LETTUCE BEGIN🥬

Types in Typescript

As mentioned previously, Typescript is a superset of Javascript, so we are able to access JS's primitive types available in JS.
Those types are (in a specific order I will never tell a soul):

string - anything enclosed in ' ' or " "
number - any number value
boolean - a value of true or false
null - an absence of value
undefined - when no value is assigned before using variable or object

Since Typescript is so 'type-y', when a variable is declared to have a certain type, this variable can never change its type. It may change its value, but not the initial declared type.

But hold your horses! What if you create a variable but you don't assign it any value for Typescript to know what it is! Well, in this case, TS brings in its handy any type, that allows this variable to hold any value, and be changed to any type. However, this goes against what TS is trying to help you with, which is error checking for your types to be used properly. In the case you do not want TS to do this, there is also a noImplicitAny flag that can put a stop to this. We'll talk about how to do that later, promise:)

Declaring Variables

I'm more of a visual learner, so I will put in some graphics below to show everything we have learned so far. But first, we need to talk about how Typescript allows us to declare our variables.

Type Annotation

When declaring a variable with const, let, or var, TS gives us the option to declare the type as well, using Type Annotation. Take a look see here meow:

This is cool and sometimes useful. From what I see, this looks important only when you want to, or not want to, use any. Next!

Inferred Types

Typescript is also pretty smart and will sometimes just assume it knows what you mean when you set a variable up with a value. That would then look as follows in the picture below that you will now see:

That's a little bit better. I like that way, but there are a couple more to know about.

Union Types

Sometimes (and please stop asking me 'when?') we need to have a variable set to multiple types, but not to the any type. In this case, we would use the Union Type, as such that you are about to look at currently:

Something to note is that we could use null | undefined, but TypeScript comes with the strictNullChecks compiler option which does not allow assigning both to a variable. So not recommended, unless you turn this off.

Create Your Own Type

And finally, the last option that we have to declare variables and give them some TYPES. TS also gives us the option to create our own type, using the type keyword. There are a couple ways to do this, but we'll need to discuss other things first, so let's talk later about that! For now, this is setting a custom type while also using Union Types. Let's get it going and have a read of the thing we're talking about:

The drink type can accept either of the values 'water', 'coffee', or 'tea'. Notice how we use the | to create a union type. In this case, any variable assigned the type drink can accept any of the three values. We'll definitely be coming back to this one.

Conclusion

How wild, we just learned about types in Typescript. What a world. This is a good amount of reading for not too much payout, but I promise we are laying some SICK ground work here. Keep looking out for that third post, as it is going to be one you do not want to miss, my friend. Thank you and look out for the next submission, don't forget to follow me here and on Twitter! Peace!