Full stack Web Development

Basic Data Types in Typescript

TypeScript is a language for application-scale JavaScript. TypeScript adds optional types, classes, and modules to JavaScript. TypeScript supports tools for large-scale JavaScript applications for any browser, host, and for any OS. TypeScript compiles to readable, standards-based JavaScript.

Now let us have a quick look into installing Typescript. To install the latest stable version you need to run the below command:

npm install -g typescript

After installation gets complete you can try some of the basic TypeScript example which is explained below.

The TypeScript code consists of plain JavaScript code as well as certain keywords and constructs that are specific to TypeScript. However, when you compile the TypeScript code, it is converted into plain JavaScript. Meaning, the resultant JavaScript can be used with any browser that supports JavaScript.

The below code uses TypeScript specific keywords such as class and data types such as number and string.

class Customer {
    customerId: number;
    companyName: string;
    contactName: string;
    country: string;
    addCustomer(): number {
        //some code here
        return 0;
    }
}

When you compile this code, the resultant JavaScript that gets outputted is as follows:

var Customer = (function () {
    function Customer() { }
    Customer.prototype.addCustomer = function () {
        return 0;
    };
    return Customer;
})();

As you can see, this is just the plain JavaScript and can be used in any browser that understands JavaScript. In your web pages you will be referring to this JavaScript code file (*.js) and not the TypeScript code file (*.ts). To compile the TypeScript code to JavaScript you have two options – You can use either the command line TypeScript compiler (tsc.exe) or the TypeScript editor plugin for Visual Studio 2012.

Now, take a brief look into the basic types of Typescript.

Basic Types of TypeScript

TypeScript allows you to declare variables with a specific data type. The types can be classified as primitive or object types. The primitive types include number, Boolean and string, whereas, object types include modules, classes and interfaces.

  1. Boolean

The most basic datatype is the simple True/false value.

var isFalse: boolean = false;

  1. String

String types plays a very vital role in any language, as in other languages, we use the type ‘string’ to refer to these textual datatypes. TypeScript uses the double quote (“) or single quote (‘) to surround string data.

var name: string = "Acadgild";
  1. Number

As in JavaScript, all numbers in TypeScript are floating point values. These ‘floating point’ numbers get the type ‘number’.

var height: number = 99;
  1. Array

TypeScript allows you to work with arrays of values. Array types can be written in one of two ways. In the first method, you use the type of the elements followed by ‘[]’ to denote an array of that element type.

var list:number[] = [1, 2, 3];

The second method uses a generic array type ‘Array<elemType>’.

var list:Array<number> = [1, 2, 3];
  1. Enum

A very helpful addition to the standard set of datatypes from JavaScript is the ‘enum’. Like in languages like C#, an ‘enum’ is an easy way of giving friendly names to sets of numeric values.

enum stuff {pen, pencil, eraser};
var c: stuff = stuff.eraser;

By default, enums begin numbering their members starting at 0. You can change this by manually setting the value of one its members. For example, we can start the previous example at 1 instead of 0.

enum Color {pen = 1, pencil, eraser};
var c: stuff = stuff.eraser;

Or, even manually set all the values in the enum as shown below:

enum Color {pen = 1, pencil = 2, eraser = 4};
var c: stuff = stuff.eraser;

A handy feature of enums is that you can also go from a numeric value to the name of that value in the enum. For example, if we had the value 2 but weren’t sure which that mapped to in the Color enum above, we could look up the corresponding name.

enum stuff {pen = 1, pencil, eraser};
var stuffName: string =stuff{2];
alert(stuffName);
  1. Any

We may need to describe the type of variables that we may not know when we are writing the application. These values may come from dynamic content, i.e. from the user or 3rd party library. In these cases, we want to opt-out of type-checking and let the values pass through compile-time checks. To do so, we label these with the ‘any’ type.

var notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

The ‘any’ type is a powerful way to work with existing JavaScript, allowing you to gradually opt-in and opt-out of type-checking during compilation.

The ‘any’ type is also handy if you know some part of the type, but not all of it. For example, you may have an array, but the array has a mix of different types.

var list:any[] = [1, true, "free"];
list[1] = 100;
  1. Void

The opposite in some ways to ‘any’ is ‘void’, the absence of having any type at all. You may commonly see this as the return type of functions that do not return a value.

function warnUser(): void {
    alert("This is my warning message");
}

We hope we were clear in explain the data types in TypeScript. In case of any queries, feel free to write to us at [email protected].

In our next post, we will be discussing about functions in TypeScript. Stay tuned!

Keep visiting our site www.acadgild.com for more updates on Angularjs and other technologies. Click here to learn Angularjs from our Expert Mentors

Related Popular Courses:

IT TRAINING

DEVOPS TESTING

BLOCKCHAIN DEVELOPMENT

ONLINE DATA SCIENCE COURSES

ANDROID PROGRAMMING ONLINE COURSE

AngularJS course details

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Articles

Close