Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:14Length:1.2 hours
  • Overview
  • Transcript

2.3 Properties and Functions

Having a typed language means that functions are declared differently than in a non-typed system. I'm also going to show you the arrow function type, which doesn't exist in earlier versions of JavaScript.

2.3 Properties and Functions

Hi, and welcome back to TypeScript Fundamentals. In this lesson, we are going to talk a little bit more about properties and functions. Let's start with functions. Of course, you have your named and anonymous functions like in JavaScript, but now that we're using a strongly typed language, it looks a little bit different. Each function also has type parameters and a return value. Here is a simple example. An add function that takes left and right argument, both are numbers. The return type is also a number. You can add a return type just like you do when defining variables with a colon. The question now arises, what to do if a function doesn't have a return type? Well, here's one of the special types I've mentioned in an earlier lesson. It's the void type. Void indicates that the function doesn't have any return type. And speaking of new return types, there is also one called never. This is used to indicate that a function never returns, for instance, when it always throws an error. When you define a function with type parameters, it doesn't automatically mean that they can't be null or undefined. Those two types are subtypes of all other ones, and are always valid. In JavaScript, if you leave a parameter off during a function call, that's perfectly fine. The variables are going to have a value of undefined. To replicate this funcitonality in TypeScript, you can make parameters at the end optional. You can't do it the other way around. If you have an optional parameter in your function, all parameters to the right must also be optional. It's also possible to give those parameters a default value that they will have if the parameter isn't provided or to use a pass as undefined. If you have default values, they act like optional parameters, but they aren't required to be at the end of a function signature. In this case, they have to be provided even if undefined during the funtion call. If you want to accept an arbitrary amount of arguments, you can do that by using an ellipses in front of the parameter at the end. This will put all parameters that have been provided after all other main parameters into an array. And you can also give this array a specific type if you want. For example, you could only accept strings. Okay, now let's talk about the this keyword. It can be very confusing when this will be what value? Normally when you are using a regular function, this will be set to the parent context. Unfortunately, this context varies depending where the function is envoked. For instance, if you return a function from a function, this won't be the context you might expect, but rather a window because we called it outside of any scope. In ECMAScript 6, JavaScript has received another function type, arrow functions. You might have already seen them, and they're also available in TypeScript. Arrow functions use the context they're created in, not the one they're invoked in. This is especially useful when providing callbacks, since they always will be called from a different location than from where they have been created. The functions syntax is designed for them to be quite short. You define them by having brackets first to define the parameters, then an arrow. And finally, you can either use curly braces for a multi-line function body, or omit them if you only have one line. In this case, the output of this line will also be the return value. Although arrow functions solve a lot of problems, or at least greatly simplify your code, there is still one unresolved issue remaining. A clarification of the type of this when using it in callbacks. Newer versions of TypeScript have become more intelligent, but sometimes it's not clear which type this has. In TypeScript, functions have a special fake parameter to define the type of this and the function signature. If you pause on this as the first parameter, you can set its type. If you don't want this to be usable, you can even set it to void. And finally, a quick word about overloads. Since TypeScript introduces typing you might want to have multiple types that can be put into the function, and depending on those types, the output might defer. To solve this, you can now overload functions or at least the signatures. This means that you can define a function that accepts a number and returns one as well, but omit the function body. You can do the same for a string parameter. The last function will contain a body, but its function signature must be compatible with with all previously declared overloads. It is up to you to do the right thing depending on your input types, just like it was in regular, old JavaScript. Although all my examples have been within the class in this lesson, all of those points are also valid outside it. To recap, functions have typed parameters and return types like variables. Void is used when there is no return value. Functions can have optional parameters that are undefined if not provided. They can also have default values. Arrow functions used to context where they defined, not where they are invoked. You can define the type of this in a fake parameter. Overloads allow you to have a function with the same name but different input and output types. In the next lesson, we are going to talk about Access Modifiers. See you there.

Back to the top