What is TypeScript? An Intro to Using Types in Your Code

Get the project source code below, and follow along with the lesson material.

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

Lesson Transcript

[00:00 - 00:16] What is TypeScript? TypeScript is a type superset of JavaScript that compiles to plain JavaScript. This is the definition from TypeScript_lang.org. TypeScript allows you to specify types for values in your code, so you can develop applications with more confidence. Using types in your code.
[00:17 - 00:28] Consider this JavaScript example. Here we have a function that verifies that a password has at least eight characters. When you pass it a string, that has at least eight characters, it will return true.
[00:29 - 00:41] But someone might accidentally pass a numeric value to this function. In this case, you won't see any problems until you try to run the application. The number that you will pass as an argument won't have the length attribute.
[00:42 - 00:51] So when your app will try to access it, the code will crash. And the real problem here is that you will only know this after you run your code.
[00:52 - 01:00] With TypeScript we can restrict the values that we passed to our function to be only strings. Here we say that the argument called password can only be a string.
[01:01 - 01:10] And only then we check that password length is bigger or equal to eight. If we call it with a wrong type, here we pass a number to it. TypeScript will give us an error.
[01:11 - 01:21] TypeScript can tell if we have an error in our code just by analyzing the syntax. That means that you don't have to run the program. Most code editors support TypeScript so that error will be immediately highlighted.
[01:22 - 01:28] Strings and numbers are examples of built-in types in TypeScript. TypeScript supports all the types available in JavaScript and add some more.
[01:29 - 01:35] We will get familiar with a lot of them during the next lessons. But the coolest thing is that you can define your own types.
[01:36 - 01:42] Let's say we have a grid function that works with user objects. It generates a greeting message using provided first and last names.
[01:43 - 01:51] How can we make sure that this function receives an input of the correct type? We can define our own user type and specify it as a type of our user argument.
[01:52 - 01:59] Our function will only accept objects that match the defined user type. Here for example it will return hello, Maxim evenov.
[02:00 - 02:09] If we try to pass something else, we will get an error. Here we try to pass an empty object and TypeScript will tell us that argument of type empty object is not assignable to parameter of type user.
[02:10 - 02:18] Because empty object is missing the first and last name fields from the user type. Benefits of using TypeScript. First of all it is preventing errors.
[02:19 - 02:25] As you can see with TypeScript we can define the interfaces for parts of our program. So we can be sure that they interact correctly.
[02:26 - 02:41] It means that they have clear contracts of communication with each other which will significantly reduce the amount of bugs. If on top of that we cover our code with unit tests, boom our application becomes rock solid. Now we can add new features with confidence without fear of breaking it.
[02:42 - 02:56] There is a research paper showing that just by using type language you will get 15% fewer bugs in your code. There is also an interesting paper about unit tests stating that products where test driven development was applied had between 40 and 90% reductions in pre-release bug density.
[02:57 - 03:06] On top of that you will get better developer experience. When you use TypeScript you also get better code suggestions in your editor, which makes it easier to work with large and unfamiliar code bases.

[00:00 - 00:16] What is TypeScript? TypeScript is a type superset of JavaScript that compiles to plain JavaScript. This is the definition from TypeScript_lang.org. TypeScript allows you to specify types for values in your code, so you can develop applications with more confidence. Using types in your code.

[00:17 - 00:28] Consider this JavaScript example. Here we have a function that verifies that a password has at least eight characters. When you pass it a string, that has at least eight characters, it will return true.

[00:29 - 00:41] But someone might accidentally pass a numeric value to this function. In this case, you won't see any problems until you try to run the application. The number that you will pass as an argument won't have the length attribute.

[00:42 - 00:51] So when your app will try to access it, the code will crash. And the real problem here is that you will only know this after you run your code.

[00:52 - 01:00] With TypeScript we can restrict the values that we passed to our function to be only strings. Here we say that the argument called password can only be a string.

[01:01 - 01:10] And only then we check that password length is bigger or equal to eight. If we call it with a wrong type, here we pass a number to it. TypeScript will give us an error.

[01:11 - 01:21] TypeScript can tell if we have an error in our code just by analyzing the syntax. That means that you don't have to run the program. Most code editors support TypeScript so that error will be immediately highlighted.

[01:22 - 01:28] Strings and numbers are examples of built-in types in TypeScript. TypeScript supports all the types available in JavaScript and add some more.

[01:29 - 01:35] We will get familiar with a lot of them during the next lessons. But the coolest thing is that you can define your own types.

[01:36 - 01:42] Let's say we have a grid function that works with user objects. It generates a greeting message using provided first and last names.

[01:43 - 01:51] How can we make sure that this function receives an input of the correct type? We can define our own user type and specify it as a type of our user argument.

[01:52 - 01:59] Our function will only accept objects that match the defined user type. Here for example it will return hello, Maxim evenov.

[02:00 - 02:09] If we try to pass something else, we will get an error. Here we try to pass an empty object and TypeScript will tell us that argument of type empty object is not assignable to parameter of type user.

[02:10 - 02:18] Because empty object is missing the first and last name fields from the user type. Benefits of using TypeScript. First of all it is preventing errors.

[02:19 - 02:25] As you can see with TypeScript we can define the interfaces for parts of our program. So we can be sure that they interact correctly.

[02:26 - 02:41] It means that they have clear contracts of communication with each other which will significantly reduce the amount of bugs. If on top of that we cover our code with unit tests, boom our application becomes rock solid. Now we can add new features with confidence without fear of breaking it.

[02:42 - 02:56] There is a research paper showing that just by using type language you will get 15% fewer bugs in your code. There is also an interesting paper about unit tests stating that products where test driven development was applied had between 40 and 90% reductions in pre-release bug density.

[02:57 - 03:06] On top of that you will get better developer experience. When you use TypeScript you also get better code suggestions in your editor, which makes it easier to work with large and unfamiliar code bases.

LessonEditor