5 Basic Features of Typescript

/ Typescript /

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. If you’re familiar with any object oriented programming language then TypeScript will be the awesomeness of JavaScript like c#, Java.

Typescript Official Website — https://www.typescriptlang.org/docs/home.html

Medium Post – https://medium.com/@afroza021/5-basic-features-of-typescript-d3eede63f610

First let’s talk about data types,

Types

A type is simply set of values. There are different types available in typescript. Which are,

1. Boolean — Represents only true/false value

let isDone: boolean = false;

2. Number — Represents floating point values

let decimal: number = 6;

3. String — Represents textual values

let color: string = "blue";

4. Array — Set of array values

let list: Array<number> = [1, 2, 3];

5. Tuple — Represents array with fixed data type

let x: [string, number];
x = ["hello", 10];

6. Enum — Represents sets of numeric and string values

enum Color {Red, Green, Blue}
let c: Color = Color.Green;

7. Any — Set any type of values

let notSure: any = 4;

8. Null — Set of null values

let n: null = null;

9. Undefined — Uninitialized variables

let u: undefined = undefined;

10. Object — Represents the non-primitive type of values.

var obj: { property: string; } = { property: "foo" };

Interfaces

One of the most core principle, super useful and cool features of typescript is interface. It is the way to define and describe data for any kind of object.

We can define any properties and methods inside the interface. So let’s create an interface,

Interface Book {
   name: string,
   author: string,
   totalPage: number
}

Here just create an interface name as Book and inside the Book interface add three properties name, author and totalPage. First two property define with string data type and totalPage define the number.

So, whenever we want we can use this interface now, the simplest way to call interface,

const  myBook: Book;

const myBook: Book = {
  name: ‘abc’,
  author: ‘xyz’,
  totalPage: 120
}

Class

Starting with ECMAScript 2015, also known as ECMAScript 6, JavaScript programmers will be able to build their applications using object-oriented class-based approach. In TypeScript, also supports this techniques object-oriented class-based approach. By creating a class we can add fields, properties, constructors, and functions (static, prototype, instance based).

A simple class example is as follows,

class Book {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}
let myBook = new Book("xyz");
console.log(myBook)

This is a very basic syntax for a class. In this Book class has a constructor that accepts a single parameter name. And the outside of this class construct instance of the Book class using new.

Generics

Components that are capable of working on the data of today as well as the data of tomorrow will give you the most flexible capabilities for building up large software systems.

https://www.typescriptlang.org/docs/handbook/generics.html

function identity(arg: number): number {
   return arg;
}

From the Following syntax It’s a generic function that receives a number argument and return same type of value.

function identity<T>(arg: T): T {
   return arg;
}

Instead of use a specific type we can also use a type variable T to the identity function. “T” is the actual data type we expect to retrieve.

Enums

Enum data type unique for every Javascript developers but c# or java developers familiar with this keyword and now in Typescript.

Enum is a data type that provides both numeric and string-based enums. An enum can be defined using the enum keyword.

Numeric Enums

First, Create a simple enum name Counter,

enum Counter {
    One,
    Two,
    Three
}

Following is a numeric enum that contains three elements one, two, three. Where One initialize with 0 and Two initialize with 1 and Three initialize with 2. So, numeric enums always increase sequentially.

If we initialize any element with value like,

enum Counter {
    One,
    Two = 4,
    Three
}

Here we initialize Two to 4, so that our next sequence will be three = 5.

Below is an example how we can show and play with enum,

var firstCount = Counter["Two"]; // 4

String Enums

In a string enum, each member has to be constant-initialized with a string literal, or with another string enum member.

enum Direction {
    Up = "UP",
    Down = "DOWN",
    Left = "LEFT",
    Right = "RIGHT",
}

let myDirection = Direction.Up;

This is a very simple string enum example. Here, myDirection will be ‘UP’.

I would like to end this here. In this article I just write some basic features of Typescript. That we are already familiar with object-oriented programming language but in typescript they mixture these features for the javascript developers. Which I think is a blessing for every JavaScript developers.

References

  1. https://www.typescriptlang.org/docs/home.html
  2. https://basarat.gitbooks.io/typescript/
  3. https://blog.mariusschulz.com/