TypeScript - Basic Types

In this tutorial we will learn about basic types in TypeScript.

Variable in TypeScript

We create variable in TypeScript using the let keyword.

let name;

Note! In JavaScript we use the var keyword to create variables.

var name;

Types in TypeScript

Following are the basic types in TypeScript.

• Boolean
• Number
• String
• Array
• Tuple
• Enum
• Any
• Void
• Null and Undefined
• Never

Let us discuss the above basic types. So, open your text editor or IDE and lets write some code.

Syntax of variable creation with type

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.

Boolean

A variable of type boolean takes only one of the two values, either true or false.

In the following example we are creating a boolean variable.

let isGameOver: boolean;

Now, isGameOver variable can take only boolean value.

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);

Number

Type number is used to store floating point values.

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;

String

To handle textual data we use variables of type 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.

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.

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.

Array

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>.

In the following example we are creating an array of type string.

let days: Array<string> = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];

Tuple

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

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.

enum Color {Red, Green, Blue};

Note! The new type Color accepts only 3 possible values Red, Green and 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};

Any

If we are not sure of the type of a variable then we set it to any.

let someVar: any;

The someVar variable can take value of any type.

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];

Void

The void type is opposite of any.

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.

Null and Undefined

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;

Never

The never type represents the type of value that will never occur.

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...
  }
}