Tech
News
Videos
Forums
Jobs
Books
Events
More
Interviews
Live
Learn
Training
Career
Members
Blogs
Challenges
Certification
Contribute
Article
Blog
Video
Ebook
Interview Question
Collapse
Feed
Dashboard
Wallet
Learn
Achievements
Network
Refer
Rewards
SharpGPT
Premium
Contribute
Article
Blog
Video
Ebook
Interview Question
Register
Login
Fundamentals Of Typescript - Basic Concepts
WhatsApp
Dinesh Gabhane
3y
8.9k
0
7
100
Article
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__
Arrays
De-structuring
Enum
tsconfig.json
Tuple
Type Assertions
Up Next
Ebook Download
View all
TypeScript: Beginner To Advanced
Read by 10.2k people
Download Now!
Learn
View all
Blue Ocktopus Technology Systems Private Limited
Enabling revenue generation through brand loyalty and customer retention for enterprise retail and e
Membership not found