Fundamentals Of Typescript - Basic Concepts

This article is the continuation of my previous article Fundamentals of TypeScript.

 

In this article we are going to discuss the below points,

• Type Assertions
• Arrays
• De-structuring
• tsconfig.json
• Tuple
• Enum

Lets discuss one by one.

 

Type Assertions

• Type Assertion allows you to set the type of a value and tell the compiler not to infer it. This is when programmer might have a better understanding of the type of a variable than what TypeScript can infer on its own
• Such a situation can occur when you might be porting over code from JavaScript and you may know a more accurate type of the variable that what is currently assigned.
• It is similar to typecasting in other languages like C# and Java. However, unlike C# and Java, there is no runtime effect of type assertion in TypeScript
• It is merely a way to let the TypeScript compiler know the type of a variable
  

Arrays

• In TypeScript two ways to declare an array
• Using Square Brackets
• Using a generic array type, Array<elementType>
• Multi-Type Arrays
  
• Array elements can be accessed using the index of an element
  

  let shapes: string[] = ['Rectangle','Oval','Triangle'];
  let shapes: Array<string> = ['Rectangle','Oval','Triangle'];
  let values:(string | number)[] = ['Red', 22, 'Green', 33, 44, 'Blue'];
  or
  let values: Array<string | number>[]=['Red', 22, 'Green', 33, 44, 'Blue'];

Destructuring

• De-structuring i.e. braking up the structure
• Object Destructuring and Array Destructuring
• Destructuring is useful because it allows you to do in a single line, what would otherwise require multiple lines.
• Object Destructuring
  

  var rect = {x:10, y:10, height:30, width:40};
  var {x,y,height, width) = rect;
  console.log(x,y,height,width); //10,10,30,40
  rect.height = 25;
  ({x,y,height,width} = rect);
  console.log(x,y,height,width); // 10,10,25,40

• Object Destructuring with Rest Paramenter
  

  var {a,b,...remaining} = {p:11, q:22, r:33, s:44};
  console.log(a,b,remaining);//11, 22, {r:33, s:44}

• Array Destructuring
  

  let arr = [10,20,30,40,50];
  let [x,y] = arr;
  console.log(x,y); //10, 20
  [x,y] = [y,x];
  console.log(x,y); //20, 10

• Array Destructuring with Rest Parameter
  

  var [a,b, ...remaining] = [11,22,33,44];
  console.log(a,b,remaining); //1, 2, [3,4]

• Destructuring can make your code more readable and maintainable by reducing the line count and making the intent clear

tsconfig.json

• TypeScript compilation context is a term for a grouping of the TypeScript files that will parse and analyze to determine what is valid and what is not valid. The compilation context contains the information about which compiler options are in use. We can definre this logical grouping of TypeScript files by using a tsconfig.json file.
• We can compile the TypeScript files by using tsc <file name>.ts command. When we use 'tsc' command to compile TypeScript code, compiler searches for configurations which are loaded in the tsconfig.json file. TypeScript also provides an option to compile multiple .ts files in the large project.
  
• Create tsconfig.json
  
• tsc --init
• The above command will generate a default tsconfig.json file.
  
• We can compile a typescript project in any of the following ways :
  
• By invoking tsc with no input files: In this case, the compiler searches the tsconfig.json file starting in th current directory following the parent directory chain.
  
• By invoking tsc with no input files and a --project (or just -p) command: In this case the compiler specifies the path of a directory which contains a tsconfig.json file. It also specifies a path ro a valid .json file which contains the configurations.
  
• In tsconfig.json file an include and exclude properties allows us to take an array pattern to add or remove a list of TypeScript files from the compilation process.
  

Tuple

• Tuple is a new data type with set of values of different data types
  

  var playerNo:number = 10;
  var playerName:string = 'Sachin';
  var player:[number,string] = [10, 'Sachin']; //Using Tuple
  console.log(player[0] + ' ' + player[1]); //10 Sachin
  var person:[number, string, boolean] = [1, 'Abhijeet', true];

• Tuple Array
  

  var players:[number,string][];
  players = [[7, 'Virat'], [8, 'Sachin'], [9,'Rahul]];

• You can add new elements to a tuple using the push() method
  

  var players:[number,string] = [7, 'Virat'];
  player.push(10, 'Ajay');
  console.log(player); //19, Rahul

Enum

 

Enums allow us to declare a set of numed constants i.e. a collection of related values that can be numeric or string values.

 

Three types of enums

• Numeric enum
• String enum
• Heterogeneous enum

Numeric Enum

 

Numeric enums are number-based enums i.e. they store string values as numbers

• enum values start from 0 and increment by 1 for each member.
• we can initialize numeric value ourselves, next value is increment by 1 after that unless not initialized with some other number

String Enum

 

String enums are similer to numeric enums, except that the values are initialized with string values rather than numeric values.

Difference between Numeric Enum and String Enum

 

Numeric Enum values are auto-incremented, while String Enum values need to be individually initialized

The benefit of using enums is that string enums offer better readability. As it is easier to read string values rather than numeric values

Heterogeneous Enum

 

Heterogeneous enums are enums that contain both string and numeric values.

Enum in TypeScript supports reverse mapping, means we can access the value of a member and also a member name from its value.

There are few more topics are remaining of the Fundamental of TypeScript. Will come with last article for this series

 

__Happy Coding__