What is TypeScript

[00:00:00]
>> Anjana Vakil: So, TypeScript, what is it Is it a programming language I guess I've been kind of talking about it Is it, does it check types for you Maybe you've heard this phrase, type checking Is it a build tool Does it build JavaScript Is it like an IDE tool for our development environment to be able to just give us fancy hints and things like that What do y'all think It's like a tool chain, right

[00:00:28]
It's a bunch of libraries and compiler, it's kind of all of those things, but it's built on JavaScript, right It is kind of all of those things, exactly all of the above is sort of the answer here depending on how we're using it We might be using it in certain of those capacities and not in others, or we might be using all of it, and that's what we're going to be exploring through this course is how does it work as all of those different things

[00:00:54]
So we can certainly talk about TypeScript as a programming language It is a programming language, and it is different than JavaScript, although there are some similarities So, we write JavaScript files, usually with a .js extension We write TypeScript files with a .ts extension So that's one difference But that tiny little letter change actually under the hood represents a whole bunch of changes to the language itself

[00:01:31]
So, when we talk about JavaScript, we're talking about an interpreted language But TypeScript is a compiled language, and we're going to talk about what that means in a moment And it is a language that compiles to JavaScript at the moment And we also have some differences in syntax JavaScript has less syntax than TypeScript And you'll often hear them, we're going to talk about what this means

[00:02:02]
You'll often hear the relationship between TypeScript and JavaScript described as one of a superset So we talk about TypeScript as a superset of JavaScript or JavaScript is a subset of TypeScript, and we're going to talk about what that means in a moment And the meat and potatoes here, where we have dynamic and weak typing in JavaScript that gives us all of those hacks, in TypeScript types work totally differently

[00:02:38]
Types are static We're going to talk about what that means, but essentially it means that when something is typed, that shall stay its type forever No more switching numbers to strings and things like that And the types are strong So, when we talk about types in TypeScript, we're talking not about dynamic types that are figured out by the language as we go, but about static types that are declared in the code and remain so

[00:03:13]
And instead of these weak types that the JavaScript interpreter can shift around types as it pleases and coerce a string one to a number one and vice versa, in TypeScript, we have a strongly typed language, meaning that the type of something is not going to be changed out from under us, under our noses So the idea in TypeScript is to make a similar scripting language to JavaScript that nevertheless solves these problems with its type system by having a completely different approach to how values are typed through the language

[00:03:59]
And so what we're going to be doing is wrapping our heads gradually around what all of these things mean So let's first talk about interpreters versus compilers Perhaps y'all have other mnemonic devices for thinking about how interpreted languages versus compiled languages run But I sort of think of it like this If our code is meant to make music, an interpreted language, it's kind of like a musician, like a pianist, reading the sheet music as they go and playing the notes from what they read

[00:04:41]
And maybe somebody is there to help flip the pages for them as they go So essentially, in this metaphor, JavaScript is the pianist, and our code is the sheet music, and JavaScript reads our code line by line and does what it says, plays the notes we wrote In a compiled language, and perhaps some of us have worked with other compiled languages, but TypeScript, we will see is a compiled language

[00:05:13]
I think it's sort of more like the language is someone who's really good at transcribing music in their head or music that they hear or something else into sheet music, writing it down and producing an artifact, this sheet music, that then can be given to a pianist or maybe a guitarist or what have you to interpret But the compiler itself is not actually playing this music

[00:05:47]
The compiler is not actually running the code It is instead writing the instructions that we would need to run the code So, in this case, we're going to see that TypeScript is going to compile the notes in our head, which in this metaphor is the TypeScript code we write, to sheet music that the browser or Node or whoever can run, which is going to be our compiled JavaScript that comes out of TypeScript, and we're going to be understanding that by compiling some types, compiling some TypeScript code to JavaScript as we go through this course

[00:06:30]
Okay, so another thing that we said about TypeScript and JavaScript is that TypeScript is a superset of JavaScript What does that mean So when we say TypeScript is a superset of JavaScript, in your head, you can picture a little Venn diagram, where TypeScript is big, and JavaScript is smaller and completely contained within TypeScript Now, what am I talking about here

[00:07:03]
So, we're talking about the syntax of these languages, and as I mentioned briefly before, TypeScript has more syntax, but it also has JavaScript syntax So what this means is that JavaScript code is valid TypeScript code So, for example, and we're going to see this in action in this course, if we just rename a .js file to a .ts file, TypeScript is still fine with that

[00:07:44]
It knows JavaScript syntax because TypeScript syntax includes all of JavaScript syntax So code that works in JavaScript also works in TypeScript However, the opposite is not true And when we talk about compiling TypeScript to JavaScript, we're essentially saying that we're going to start with a TypeScript file, and TypeScript is going to figure out how to output the equivalent JavaScript code without any of the extra TypeScript syntax, without any of the extra fancy type stuff that TypeScript gives us

[00:08:40]
All of that is going to get removed before we actually run the code And that is part of the job of the compiler, is to make sure that all of that helpful type information and extra syntax that TypeScript adds, which we're going to cover a chunk of in this course, that all of that because it's not valid JavaScript, all of that has to go away, and the equivalent JavaScript that can be run in the browser or in Node or wherever we're trying to run it is going to be the output that we get from running the compiler, which we're going to do a lot in this course on TypeScript code

[00:09:30]
So the compiler is going to take a .ts file, output a .js file, and the .js file is going to have that smaller set of syntax that does work in JavaScript We said that TypeScript is not just a programming language, we can also think of it as a helpful tool for development And when we say it's a developer tool or dev tool, what we're usually talking about is the fact that TypeScript is really mainly useful at the time I'm writing code

[00:10:10]
That's when TypeScript helps me out a lot It helps me not add a string to a number, and it helps me not switch a variable that was originally a number to a variable that is not or to a value that's a string now And so if you've worked with TypeScript before, or even if you've just worked with JavaScript in an IDE like VS Code, you've probably seen things like the IntelliSense autocomplete, hints about maybe what properties are available on an object, and so on and so forth

[00:10:43]
And so we're going to explore how TypeScript can be a really, really helpful development tool Now, we also said because TypeScript can compile to JavaScript, because it does compile to JavaScript, we could also use TypeScript as a JavaScript build tool Now, back when TypeScript was developed, this was a little bit more relevant because we didn't have really awesome build tools like Babel and Webpack and so on and so forth

[00:11:14]
They were, I mean, they were also good tools back then, but it has evolved a lot And so now TypeScript isn't used so much as a way to build JavaScript projects However, it can be really, really helpful as a step in our JavaScript builds to make sure that we're not building code that does things like give our users object object or have a bunch of type errors saying cannot read property of null or whatever

[00:11:50]
And so that is where we're going to be talking again about all the different platforms that we want our code to eventually run on, whether it be in the browser, in Node, on a tiny little microchip, I don't know, and what versions of these languages we can work with So JavaScript is constantly evolving and features keep getting added, and we need to know what kind of features we're allowed to use and what kind of features we can assume exist in the environment where TypeScript will run

[00:12:27]
So we are going to be talking about how we can configure TypeScript to build different types of JavaScript and also about how it can be a helpful sort of precursor to other tooling we might use to build JavaScript projects So, this was the sort of the all of the above to all of these different ways that we can think about TypeScript It is a very large concept in my mind, in terms of the intended use cases, and we're going to be bit by bit, looking at each of these use cases as we go through this course.