Get Started With TypeScript — Part 1
An easy introduction and tutorial on using TypeScript
This is the first part of a series of articles I’ll be posting on the fundamentals of TypeScript. If you’re new to TypeScript and you’re not sure where to get started, then you’ve landed on the right page.
We’re going to take it slow and start off by discussing the very basics of TypeScript. In Part Two of this series, we’ll set up VS Code and our coding environment to work with TypeScript and apply some of the knowledge in this article. We’ll also discuss some additional basic types.
We’re not really going to be writing any code in this article outside of some examples, but we will cover the basic types and prepare you for the next lesson where we will write some code.
When we discuss what TypeScript is and how it works, I will approach this from a beginner’s perspective on a need-to-know basis. In other words, I’m not going to overload you with information.
One of the most difficult things about learning a new language is understanding what’s relevant and how to apply it in a useful manner. Because of this, we’ll only cover introductory concepts to get you started on your TypeScript journey. I’ll cover more advanced topics in Parts Three and Four.
Let’s get started.
As I said above, we won’t be writing any serious code in this article, but if you’d like to follow along, you can install VS Code if you haven’t already. We’ll be using it in the upcoming lessons in this series, and basic TypeScript functionality is supported out of the box in VS Code.
To install VS Code on your computer, head over to Microsoft’s official download page and install the stable build for your operating system.
I’ll cover the key concepts in TypeScript and how they apply specifically to someone just starting to learn the language. There’s a lot more than what I can cover in a few articles, though, so I encourage you to read the docs.
What is TypeScript?
This is a loaded question. Just Google it and you’ll see a lot of copy-and-paste answers, most very (suspiciously) close to this answer from StackOverflow:
— Paul Dixon on Stack Overflow and just about every tutorial on TypeScript
I personally found a lot of the answers I ran into when I first began learning TypeScript to be more confusing and off-putting. They seemed like they were meant to make the user answering sound like they knew more than they really did. That isn’t helpful to a beginner in any subject, much less a programming language.
I’m not going to wrap this in a neat little bow and try to shove a buzzword driven definition down your throat because it’s useless to learning. Instead, I’ll do my best to make this more approachable.
Why Do We Care About Types?
- Primitive — Data that is not an object and has no methods. The word primitive refers to the fact that these are the most low-level fundamentals of data; like primitive humans, they are the simplest form.
- Data — The value of a variable, object, or method (this is intentionally generic). This can be almost anything. We all know what data is — let’s not complicate this.
- Type — A primitive data descriptor representing the kind of a piece of data. This refers to when we describe what a piece of data actually is — a
number, etc. More on this in a bit.
typeof something, such as verifying it’s a number and not a string. Most of what happens with types is in the background.
Allow me to illustrate this with some code.
As we can see in the code above, when we check the
typeof value of a variable whose
data is a
if else statement will log “This is a number.” This is because the value of
myNumber is, indeed, a number.
NaN is a valid data value, even though it’s not what we want.
Although our code isn’t giving us a useful value, the fact is in most cases it wouldn’t even cause our app to fail and we’d be none the wiser.
This is where TypeScript comes in.
Had we written
badMath(myNumber, myString) when using TypeScript, our code editor would have told us it was going to be faulty and that
myString is not a number.
This is the first, and arguably the most important thing, you should understand about the value of TypeScript: with TypeScript, we can see these errors before we hit runtime. We can find errors in our code while we are writing it and prevent hours of troubleshooting and frustration.
Now let’s discuss some basic types and their meanings.
Basic Types and What They Mean
string— This is effectively anything in quotes, though template literals (a.k.a. template strings) are also valid values for strings.
booleanis any value that evaluates to exactly
false. A valid boolean will always be the keyword
trueor the keyword
typeof values the array contains. For example,
Array<string>would indicate an array of strings. We’ll dig deeper in the next part of this series.
undefined— These values are commonly used to specifically denote that something will
returnno value or is literally
undefined. This topic is best left for our next lesson.
any— This is literally any and all types as a possibility. For example, you will commonly assign
anywhen you’re starting to type a new object and you haven’t determined all the types. The rule of thumb is you probably shouldn’t use this in a permanent fashion.
If you’ve skimmed the documentation at TypeScriptLang.org, you’ve likely noticed there are more types listed as “Basic.” I’m not covering those here intentionally to both focus our efforts as well as avoid confusion. Fear not, we will get to those in due time.
Now that we know a few types, let’s discuss what we mean when we say “static types.”
Static Types vs. Dynamic Types
However, with TypeScript and VS Code, this is only partially correct.
As we’ll learn in the next lesson when we configure VS Code to use TypeScript, we can actually type check our code as we write it, without compiling first! This allows us to see errors as we make them.
TypeScript at Work
We’re going to take a look at our variables and the
badMath function from the code we used earlier, but written using types to give us an idea of how this can be extremely useful to us and help us write better code.
Let’s break down the error we see above:
- Error TS2345 — Don’t worry about this; this is an error code associated with the specific kind of error we’re getting. While they may be useful as a shortcut to reading the error, you’re not likely to use this when you’re first starting with TypeScript.
- “Argument of type ‘string’” — This is referencing the
myStringargument we passed to our
badMathfunction. There’s nothing in TypeScript (yet) to tell us which of the arguments are being referenced, but I’ll show you some tools when we setup VS Code that can help you at least isolate the function throwing this error.
- “…is not assignable to parameter of type ‘number’” — TypeScript is telling us that the “argument of type string” is not valid for the parameter it is meant to be passed as (our original parameters are
ywhich we statically typed as
numbers). In other words, TypeScript is saying, “When you wrote this function, you said you would take two parameters and that those would be numbers, but you’re giving me a
string— what’s up with that?”
It’s important to understand we can see these errors before we even run our code. TypeScript can help us catch bugs before we hit runtime, and that’s huge.
Is TypeScript a Compiled Language?
VS Code is able to type check your code in near real-time, as you saw in the GIF earlier, and it hadn’t been compiled at that point. In the next lesson, we’ll see how we can take advantage of this to make this functionality more robust for our uses.
What Is TypeScript, Again?
Let’s ask that question again, and think to yourself if you can answer it on your own now — what is TypeScript?
We’ve only scratched the surface with this example, but I hope you can already see how powerful TypeScript can be.
We’ve just skimmed the surface and taken the ten thousand foot view of TypeScript.
In the next lesson, we’ll start with configuring a project in VS Code to work with TypeScript. We’ll also configure some settings and extensions in VS Code to make the TypeScript coding experience a lot smoother and more beneficial to learning. I think you’ll be pleasantly surprised at how much TypeScript can add to your coding experience.
We’ll also dig deeper on basic types and apply them in a meaningful way so you can get a solid understanding of the core principals of TypeScript. We’ll practice using the basic types and start discussing some more advanced topics. I’ll give you some pointers on where you can learn more with TypeScript and how you can avoid some of the headaches that can come with being a newcomer to the language.
I hope this was a relatively easy and informative introduction to TypeScript. There’s a lot more to come in the next lesson. But for now, see if you can dig into what we’ve discussed here on your own.
Hint: you just need VS Code and to change your file type to use
.ts as the extension. There’s a lot more to this, but start there and try to type out some basic variables and functions.