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

2.1 Basic Types and Variable Declaration

Although variable declaration is a pretty basic topic, there are a few differences when working with a strongly typed language. You will learn how to define typed variables in this lesson.

2.1 Basic Types and Variable Declaration

Hi, welcome back to TypeScript Fundamentals. In this lesson we are going to talk about the most basic functionality of any prpgramming language, variables. In TypeScript you have two ways of storing variables. You can either use the classic var keyword That is also present in JavaScript, introduce let keyword, that defines a variable in the current scope for instance, a for loop or if statement. Let's look at an example. In JavaScript, a declared variable is always defined to the nearest function. So if you have an example function here the variable i I can define in a four loop it will also be valid after the loop has completed but not outside our function. If I change the bar to let keyword the type script complier will show an error. In my case, since I'm using an IDE, it will show right in line. Let's have a look at this in the shell. When I compile it, there is still an output file. Let's run it with Node. As you can see, there are no errors during the execution. The I_variable is correctly printed after the loop. This is due to the fact the type script compiles to an older JavaScript version, where it has to replace it with var. Besides variable declarations, type script also supports constants, unifying them with the const keyword As you might have guessed, constants can change. And the compiler will throw an error if you try to. Constants support the same degree of scoping as variables. You define with let do. If you define them inside a loop, you can't access them outside it Let's do it anyways and see what the compiler does. It compiles the file errors, but it generates an output. It seems that the constant we defined gets printed and is also changed in the for loop. The reason for that is that the concept of constants doesn't exist in earlier versions of JavaScript. The compiler simply converted the constant into another variable. Script six or ES2015 introduced both of these language features to chalice script. If we find the target as ES6, it will generate a JavaScript file and has let and const in it. And if you run that clause with node, an exception is thrown. So far we used variables without explicit types. It's perfectly lethal to do that with typoscripts. In fact, you can even use it to type system without ever defining types. Simply by letting the language do the defining To explain that further, let me just hover over the I. As you can see, it is defined as a number. Similarly, the parameter is a string. Time script automatically infers the type from the assigned value when you define it. Let's extract the declaration of I out of the for loop, but don't assign a variable. It is now of type any. This type is special as it allows all types. Of course, sometimes you want to defin a variable with a specific type. Although you don't know its value right away, and you can do that in TypeScript. Using a colon, we can specify a type for the variable like number. In TypeScript, there are a few basic types. The obvious ones are number, string, and boolean. And then there is the any type, which you have already seen. For more complex storage, there is also an array type. Arrays also have typed values, so you need to define them with their array. To define an array of a type, you can use square brackets after the type. If you add a different type to the array, the compiler will show you an error, that value is not of the expected type. If you need an array with a specific type structure, you can use a tuple. A tuple has a finite number of entries. Those are of a specific type. For instance, you can have a string and a number. TypeScript will complain if they don't match. And then, there is the classic object type, a set of key: "value" pairs. Let's have a look at another new type system JavaScript. Enums are a fantastic way to define a set of static values, like a transportation type. I can define an enum with curly brackets, and provide types as names. Optionally, you can also give them a value if they're a person. If you don't do that, the first item will be zero and the following will be incremented. It is good practice to do so if you plan storing those values, as adding a new item in the middle will change everything. You can access an enum by using the name, adopt, and the value you want to use, like Type.Walk. There are a few other types, as well, but I will introduce them throughout the course, since they don't make much sense when used with variables. Sometimes, you might be in the situation to force the variable into another type. You can tell the compiler that you know what you're doing, and give it a type assertion. This isn't the best example because if any, the compiler will keep quiet about non-existing functions for your default. But let's use it as an example. I want to get the length of the string, but the string is defined in an any variable. Since I know absolutely for sure that there is a string, I can use angle brackets to forcefully cast it into this type and use .length on it. At this point, if I'm using a function that is not present on a string, like toFixed, the compiler will tell me. There is also an alternative style of type assertions. It is also the only one allowed when using TypeScript with JSX. You can use the as keyword Instead of the angled brackets. To recap, A classic JavaScript var is always defined to the next function scope. The let variable is only defined within its current scope, like loops or conditional blocks. Constants have the same characteristics as let variables, but can't be changed. Types can be inferred by the value assigned here in declaration. If the value is unknown at this point, you can use a colon to define a specific type. Number, string, and boolean are basic types. But there are also arrays, tuples, objects, and enums. Type assertion is used to tell the compiler that it should create a variable as a specific type. In the next lesson we are going to look at object-oriented programming. And you will learn about classes, objects, and interfaces. See you there.

Back to the top
Continue watching with Elements