TypeScript
In this tutorial we will learn about basic types in TypeScript.
We create variable in TypeScript using the let keyword.
let
let name;
Note! In JavaScript we use the var keyword to create variables.
var
var name;
Following are the basic types in TypeScript.
Let us discuss the above basic types. So, open your text editor or IDE and lets write some code.
let varName: varType; varName = someVal; // or we can write let varName: type = someVal;
Where varName is the name of the variable of given varType type and it takes someVal as a value.
varName
varType
someVal
Note! Once a variable is given a type then it can't take value of other types.
This is similar to other programming languages like Java where a variable of type int can take only integer value.
int
A variable of type boolean takes only one of the two values, either true or false.
boolean
true
false
In the following example we are creating a boolean variable.
let isGameOver: boolean;
Now, isGameOver variable can take only boolean value.
isGameOver
The following TypeScript code will give us "isGameOver: false" in the browser console when compiled into JavaScript.
let isGameOver: boolean; isGameOver = false; console.log("isGameOver: " + isGameOver);
Type number is used to store floating point values.
number
In the following example we are storing the numbers in 4 different ways.
let decimal: number = 10; let hex: number = 0xA; let binary: number = 0b1010; let octal: number = 0o12;
To handle textual data we use variables of type string.
string
In the following example we have a variable that holds string value.
let fullname: string = 'Yusuf Shakeel';
We can use both double quotes and single quotes to enclose a string value.
To create multiline string we can use backtick `.
`
let sentence: string = `The quick brown fox jumps over the lazy dog. `; console.log(sentence);
We can even use ${ expr } template string to use variables as shown below.
${ expr }
Don't forget to put the string in backtick.
let fullname: string = 'Yusuf Shakeel'; let outputSentence: string = `My name is ${ fullname }.`; console.log(outputSentence);
The above code will print My name is Yusuf Shakeel. in the browser console.
My name is Yusuf Shakeel.
We can even compute result of an expression.
let outputString: string = `1 + 2 = ${ 1 + 2 }`; console.log(outputString);
The above code will print 1 + 2 = 3.
1 + 2 = 3
Like JavaScript, we can also work with arrays in TypeScript to store multiple values under one variable.
In the following example we are creating an array of type number.
let score: number[] = [1, 3, 5, 6, 8];
We can even use generic array type Array<type>.
Array<type>
In the following example we are creating an array of type string.
let days: Array<string> = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
We use tuple to create an array of fixed size. And the type of each element of the array is known.
In the following example we are creating a tuple that can take 3 values of type string, boolean and number.
let userData: [string, boolean, number] = ['Yusuf Shakeel', true, 10];
The value must be in that order and match the type.
The following code is wrong as we are assigning number value to string type.
// this code will not work let userData: [string, boolean, number] = [10, true, 10];
And we will get the following error on compiling the code.
$ tsc example/script/basic-type.ts(32,5): error TS2322: Type '[number, true, number]' is not assignable to type '[string, boolean, number]'. Type 'number' is not assignable to type 'string'.
Enum helps us to create new type and add names to a set of numerical values.
In the following example we are creating a new type Color that can take the following given values.
Color
enum Color {Red, Green, Blue};
Note! The new type Color accepts only 3 possible values Red, Green and Blue.
Red
Green
Blue
And the first member Red gets the number 0, the second member Green gets the number 1 and Blue gets the number 2.
Enum starts numbering from 0.
So, using the above Color type we can create variables and assign one of the given values.
enum Color {Red, Green, Blue}; let myColor: Color = Color.Blue; console.log("MyColor: " + myColor); // this will print MyColor: 2
We can also assign different values to enum members.
In the following example we are setting the value of Green to 10. So, Blue will get the next value i.e. 11. While Red will get the default starting value 0.
enum Color {Red, Green = 10, Blue};
If we are not sure of the type of a variable then we set it to any.
any
let someVar: any;
The someVar variable can take value of any type.
someVar
let someVar: any; someVar = 10; someVar = 'Hello World'; someVar = true;
Similarly, we can create an array whose element type is not known.
let dataArr: any[] = ['Hello World', true, 100];
The void type is opposite of any.
void
Common use is with functions that are not going to return any value.
In the following example we have a function that will not return any value so its return type is set to void.
function helloWorld(): void { console.log("Hello World"); }
Note! Creating variables of type void generally has no use as we can only assign undefined or null to them.
undefined
null
Variables of type null and undefined can take value null and undefined. So, they are not of much use on their own.
let uVar: undefined = undefined; let nVar: null = null;
The never type represents the type of value that will never occur.
never
In the following example the function has never return type as it will never reach the end of execution.
function foo(): never { while (true) { // some code... } }