In this lecture, we're going to explore a concept called type annotations.
There a new syntax feature available in TypeScript to fix our problem.
Our functions argument should be constrained to numbers.
If we attempt to pass any string or Boolean, an error should be thrown.
We can implement this behavior with type annotations.
Type annotations are a way to describe the data in our application.
We can annotate almost anything in our code.
We can annotate variables, functions, arrays and objects.
Let's start with functions.
In the ad shipping function, we're going to annotate the functions parameters, we can annotate a parameter
by adding a colon after the parameter name, followed by the data type for the price parameter.
We're going to set the data type two number.
Will use the same type for the shipping parameter.
By adding these annotations, TypeScript will restrict the type of values we can pass on to this function.
Notice how I'm using the lowercase version of the word.
It's important that we type number with lowercase N instead of an uppercase.
Otherwise, we may confuse the application with the data type.
Let's see what happens when we attempt to compile our code and the command line run the TSC example
acts command.
An error has been produced.
The error is telling us we have a problem on Line five.
It's saying we're passing in a string when it's expecting a number by adding annotations.
We're able to catch errors like these.
We can think of type annotations as a way to document our code.
The compiler will read our documented code and determine if we're doing something out of the ordinary.
Let's fix this issue in the file.
I'm going to remove the quotes from the first argument.
After doing so, I'll compile the code again.
This time, our code gets compiled without a problem.
Let's check out the JavaScript file, the annotations we've added are gone.
TypeScript will remove its features so that our code can run in the browser.
The purpose of using TypeScript is to help us debug our application before running it in an environment.
If the compiler can successfully compile our code, we should be safe from type errors.
Imagine if we were building a checkout system.
A checkout system involves a series of steps.
We wouldn't be able to catch this error until after the user has provided their shipping information
with TypeScript were able to catch the bug before opening the browser.
That's the beauty of TypeScript.
Let's take our example a step further.
We can annotate the return values of a function at the moment.
In the TypeScript file, we're logging a message in our function.
Let's change this line to return the value.
It would be nice if we could tell the compiler will always return a number after the functions parentheses,
but before the curly braces will add a colon, followed by the data type.
In this example, we'll set the data type two number.
The syntax for type annotation is the same syntax for adding type annotation to parameters.
It's a colon followed by the name of the data type.
This piece of code will tell TypeScript the function is only allowed to return numbers.
Let's see what happens if we attempt to return a value with a different type inside the function.
We will return a random string.
Next, in the command line, we'll try to compile the file.
We get an error it's telling us we're attempting to return a string instead of a number.
Our editors also highlight this error.
If you're using Visual Studio code like me, there will be a red squiggly line below the return statements.
We can hover our mouse over this to read the same message.
Let's fix this problem by reverting our changes to the original solution.
Next will compile the scripts.
They compiler successfully compiled our code.
Let's check out the JavaScript file once again, the annotation has been removed from our code.
It's a step performed by TypeScript.
That about wraps it up in the next lecture.
We'll continue exploring TypeScript.