DEV Community: 🦾Jack Madden🦾

More on Types in Typescript

🦾Jack Madden🦾 — Tue, 19 Oct 2021 17:44:45 +0000

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!

Beginner Types in Typescript

🦾Jack Madden🦾 — Tue, 05 Oct 2021 23:41:27 +0000

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!

What is Typescript and When to Use it?

🦾Jack Madden🦾 — Sat, 02 Oct 2021 16:50:10 +0000

Hello all!

This is my first post to Dev.to and I am very excited for this to be the beginning of my TypeScript series where I will be documenting what I am learning through Codecademy and Free Code Camp. I will not just be copying and pasting the information, but learning, and bringing it to you in a concise manner. Please enjoy and don't be timid to send me a message of what you think!

                         LETTUCE BEGIN🥬

Installing Typescript

Let's get this sucker started on our local machine. We can either install it globally, so it can be used on any project we would like, or install it to a specific project.

Installing it globally, using npm, would look like this:

npm install -g typescript

To install it to a specific project, we would need to open the terminal, type cd and then your project's local address. Once in the project, we would install in this way:

npm install --save-dev typescript

How TypeScript Works

TypeScript is a superset of Javascript, invented by Microsoft, that adds strong type checking. Hence, the 'type' in TypeScript, I guess. The TS code is taken into a compiler and then translated into JS code, meaning all of the features of JS are available to us, plus the added features of TS.

Some added features are:
1) Better development-time tooling (the amount of time from work started to work delivered)

2) Static code analysis (analysis of the code without launching code)

3) Compile-time type checking (making sure all the types are used as they should be).

If you are coming into this with some Javascript knowledge, already, then that is preferred because TS sometimes looks roughly the same as JS code! TS files are stored in .ts files, compared to JS files being stored in .js files, so don't get that mixed up, ya hear?

When To Use TypeScript

Large Codebase

When to use a specific language, library, or framework can definitely be tricky. The same goes for TS, as there are many times where it is best to use, but also times where it may not be most practical. From what I gather, TS is getting such a big following in the Javascript community because it cuts down on common errors. However, if your codebase is not going to be large to begin with, there really isn't much reason to convert your JS files to TS, as sometimes it will add about 30% to the total size of the code

Accustomed to Type Languages

That's pretty vague and self-explanatory, right? If you or your team wants to use it, then use it. Sure? I can't judge because I had learned React a little while back and now I try to work it into every project I can.

There are also some other type-strict languages out there that keep the same mindset as TS, such as the C# language. While they are based on much different languages, the same person that created TS also created C#. I guess you could say they have a TYPE 😏.

Library or Framework Wants TS

I personally have never ran into this sort of request from a library or framework, but it is definitely not too far out of the ordinary. For TS, Angular 2 seems to be really screaming for the necessity of it. So if you are reading through the documentation of a library or framework and it is begging you to use TS, be my guest.

Type Demanding Situations

It makes sense that there would be some situations where having a strict type is crucial for your app or code snippet. One that pops into my mind is anything having to do with forms. If a rascal of a user tries to input a number into a string situation, that can throw a major error or crash your app if not handled properly. TS acts as some sort of gatekeeper in the way that this is one of the first things that it checks for via the compile-time type-checking we had discussed earlier. If you're expecting to be using a good amount of forms, or a type heavy application, then TS might be the best option.

Conclusion

I can not thank you enough for making it to the end of my first insertion to the Learning TypeScript series! While this article was more based on what TS is, and when to use it, the following articles should jump into some sweet, sweet code that we all know and love. Thank you and look out for the next submission, don't forget to follow me here and on Twitter! Peace!