Getting started with Typescript
Typescript is typed javascript. Typescript is an open-source programming language from Microsoft for building web applications. The code is written in Typescript and compiles down to plain javascript.
- Typescript eventually at the end of the day, gets converted into javascript only.
- Typescript actually serves your way better in ANGULAR when compared to anything else.
- It works on any browser, any os that javascript runs.
We are gonna dive into the TS
Setting up Typescript
To install typescript make sure that you have installed NPM [ Node Package Manager ].
write this to terminal
npm install -g typescript
Assigning types in TS
Typescript is a typed language where we can specify the type of variables.
To assign a type, use let or const then use: then the name of the type then an equal sign, and then value of it. Like this
let varName : type = value ;
Typescript includes all the core types of javascript - number , string , boolean .
Mentioning types allows you to write less buggy code.
TS-Variable
TS encourages us to use var, let const keyword for variable declaration.
var
variables in TS can be declared using var keyword as in JS.
var myVariable : number = 3 ;
let
let declarations can be done without initialization. a variable declared with let have a block-scope and cannot be re-declared.
let myVariable: number = 3 ;
const
const declarations are always initialized with a value. variable declared with const have a block-scope and cannot be re-declared .
const myVariable : number = 3 ;
The Data Types in TS
Typescript Number
Numbers in TS are either floating point or integers.
let myNumber : number = 3 ;
let decNumber : number =3.3;
let bigNumber : bigint =333333333333333333333333;
Typescript String
TS uses (') or (") to surround literalz.
(`) uses to create a multiline string.
let name : string = ' Harry potter ' ;
let role : string =" React native developer " ;
//Multiline string
let experience = ` 3 yearz of experience
as react native developer ` ;
Typescript Boolean
It allows two values true and false.
let isGood : boolean ;
isGood = true ;
Typescript ArrayType
It is an ordered list of data.
There are two ways to declare an array variable
//using square brackets
let list1 : number[ ] = [1,2,3];
//using a generic array type
let list2 : Array<number> =[1,2,3];
Typescript Tuple
A Tuple can contain two values of different data types.
let student : [ string , number ] = [ ' Harry potter ', 3 ] ;
Typescript Enum
An enumerated data type is a group of named constant values.
enum is a way of giving more friendly names to a set of numeric values;
enum color {yellow , purple , blue} ;
let fav : color = color.blue ;
console.log(fav) ; // output is 2
Typescript Any
If you are unsure what the variable type would be then make use of any type.
If you are expecting a value from a third-party library, user inputs, and when the value is dynamic then any type comes in handy here.
This allows you to reassign type of variable to any type .
let numberOne : any =10 ;
numberOne = true ;
numberOne = "hello" ;
// Compiler doesn't throw an error here.
Typescript Void
void is used where there is no data .
Use the void type as the return type of function that does not return a value.
function log(harry) : void {
console.log(harry);
}
Typescript Union
Union allows us to use more than one data type for a variable.
let animal : ( boolean | string ) ;
animal = "Rabbit" ;
animal = true ;
Typescript null,undefined
In TS null and undefined are classified as a subtype of all other types.
let n : null = null ;
let u :undefined = undefined ;
You can assign a value of null and undefined to either boolean, number or string.
let isGood : boolean = null ;
let myName : string = undefined ;
Let us recall the core types of TS
Type | Values | Description |
number | 3,3.3,-3 | All numbers . No diff between integers and floats . |
string | "Hoi",'Hoi',Hoi | All text values |
boolean | true , false | Truthy and falsy values only . |
Tips to compile and run
for example The file is saved as Lco.ts .
Compile it by using tsc Lco.ts .
Then run it by using node Lco.ts .
Thanks for reading...๐
You can also visit my Linkedin profile...