Join Jess Chadwick for an in-depth discussion in this video Writing your first TypeScript function, part of TypeScript Essential Training.
- [Voiceover] Over the past few videos, I've described what TypeScript is in theory, but now it's time to see it in action. In this video, I'm going to take you on a whirlwind tour of the most important features of TypeScript, the features that you'll find yourself using on a daily basis. If you find I'm going too fast in this video, don't worry. I'll spend the rest of this course diving into all of the details so that you won't miss a thing. In later videos, I'll show you how to install TypeScript onto your local system, but for now, I'm gonna skip that and start by showing you the simplest possible way to start learning TypeScript: TypeScript's free, online TypeScript editor.
The only way I can ever guarantee that the parameter value is a string is to write code to check it at run time. Here is where TypeScript comes in handy. If I only ever want strings to be passed in, I can say so by explicity saying that the value parameter is a string using this syntax. As soon as I add this type, TypeScript immediately notices that I am trying to pass a number value as a parameter to the Speak function on the last line of code, and it underlines that code in red to indicate the error.
When I hover over the error, TypeScript tells me that I'm trying to pass in a number when the function expects a string. TypeScript is raising this error because it thinks that the variable I'm passing is a number. TypeScript thinks the variable is a number because it was initialized as the result of adding two numbers together on line seven. To make this error go away, I need to tell TypeScript that the "what to say" variable is indeed a string. I can do that using the same syntax that I just used to define the string type on the method parameter in line one.
I can put this type information right after the variable name and before the assignment. Of course, that didn't actually solve the problem. It just gave TypeScript more information to figure out where the problem was. Remember, the real problem is that I'm adding two numbers together, which produces a number as a result, and what I need to do is change this addition to produce a string, rather than a number, and I can do that by explicitly calling the two-string method on one of the number values to turn it into a string, and finally, the errors go away completely.
It's interesting to note that what I'm left with now doesn't make a whole lot of sense either. Why in the world am I converting two numbers to strings and then adding them together? The answer is, of course, that this is just a demo, but it does illustrate an important point. TypeScript may help out a lot, but it's not gonna solve all of your problems. You're still responsible for writing code that makes sense, but that's a different course altogether. Of course, the real solution is for me to never have made them numbers in the first place.
Now that I've shown how to specify the type of variables and function parameters, let's talk about function return values. Take a look at what TypeScript says when I hover over the Speak function on line one. Notice that void at the end? That's TypeScript saying that this method doesn't return any value, and when I add a return value, that type changes. If I hover over the method again, I can see that TypeScript has now determined that the method returns a string value. Likewise, let's see what happens when I change the value that I'm returning to the length of the variable.
Now, when I hover over the function, I can see that TypeScript thinks it now returns a number. When I want to explicitly define which type of function returns, all I have to do is use the same syntax at the end of the function signature as I did with the variable definition. For example, let's say that I want to make sure that the Speak function always returns a string type. I'll simply add that to the end of the function signature like this. With the return type specified, TypeScript can now tell me I'm not returning a value that matches that type, which is the case right now since I'm actually returning the length of the value rather than the value itself.
Luckily, in this situation, it's pretty easy to fix. Once I fix that, TypeScript is happy again and all the errors go away, and that's your whirlwind introduction to TypeScript's static typing functionality. Of course, there's far more to learn about TypeScript and trust me, I'll show it all to you in the other chapters, but everything else you're going to see throughout this course rests on top of the fundamental syntax and concepts that I just demonstrated. Now that I've given you the high-level overview of what TypeScript is and how it might be beneficial to you, head onto the next chapter, where I'll show you how to install and configure the tools you'll need in order to work with TypeScript on your local machine as opposed to an editor on a website.
- What is TypeScript?
- Installing TypeScript
- Creating a TypeScript project
- Reviewing ES6 language features
- Defining custom and anonymous types
- Defining and implementing TypeScript classes
- Working with generics
- Organizing code with namespaces
- Switching modules
- Importing modules
- Debugging TypeScript
- Implementing decorators