Share via

Typescript: Getting Started - SPFx Development (Part 4)

  • Article

We saw how to work with project files in the Part 3 of this series. Now lets see how to work with project files and compiler options.

Variable Declaration

In this chapter we will look at how we can do variable declarations using

  • Var
  • Let
  • Const

let and const are two relatively new types of variable declarations in JavaScript. let is similar to var in some respects, but allows users to avoid some of the common mistake that users run into in JavaScript. const is an augmentation of let in that it prevents re-assignment to a variable.

With TypeScript being a superset of JavaScript, the language naturally supports let and const. Here we’ll elaborate more on these new declarations and why they’re preferable to var.

Var Declarations

We used to traditionally declare variables in Javascript using var key word as :

var a = 50;

which declares the variable a with the number value of 50.

However var comes with the ability to redeclare the same variable multiple times within the function scope which can cause unintentional overwriting of the variable value. Lets head over to the Typescriptlang Playground and test this out.

  1. const message: string = 'hello world';
  2. console.log(message);
  3.  
  4. if (true) {
  5.   var a = 10;
  6.   console.log('A = '+a);
  7. }
  8.  
  9. var b = a;
  10. console.log('B = '+b);
  11.  
  12. var a = 5;
  13.  console.log('A = '+a);

Here we can see that the variable declared within the If block is available outside as well and we are able to set it to variable b without any issues. It also lets us redeclare the variables without any errors for a second time. However, if we do this at 2 different points in a function without knowing that the variable has already been defined with some other value, we are in for some serious logic issues.

Let declaration

By now we have figured out that var adds some unintentional code issue, which is precisely why let statements were introduced. Apart from the keyword used, let statements are written the same way var statements are.

Let a = 50 declares variable a with value 50

Block Scoping

When a variable is declared using let, it uses what some call lexical-scoping or block-scoping. Unlike variables declared with var whose scopes leak out to their containing function, block-scoped variables are not visible outside of their nearest containing block. We use the same code as above but we can see that a red squiggle underscore that says a is not found.

Same way I try to redeclare variable a twice and it throws the error that we cannot redeclare block scoped variable. Thus it provides more native way of reducing code errors imparted due to human negligence.

const declarations

Just like let, const declarations are another way of declaring variables. However once declared, we cannot change its value.

const a = 10;

They have the same scoping rules as Let just that they cannot be reassigned a value.